Vue的過濾器,生命週期的鉤子函式和使用Vue-router

阿新 • • 發佈：2018-11-28

一.過濾器　　

1.區域性過濾器在當前元件內部使用過濾器

　　給某些資料 添油加醋

//宣告
filters:{
    '過濾器的名字':function(val,a,b){
        //a 就是alax ，val就是當前的資料
    }
}
//使用  管道符
資料 | 過濾器的名字('alex'，'wusir')

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</ 
title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        let App  
= {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
                }
            },
            template:`

               <div>我是一個APP  {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}< 
/h2>

               </div>
            `,
            filters:{
                myReverse:function (val) {
                    console.log(val);
                    return val.split('').reverse().join('')
                },
                //年-月- 日  年- 月
                myTime:function(val,formatStr){
                    return moment(val).format(formatStr);
                }
            }
        }
        new Vue({
            el:'#app',
            data(){
                return {

                }
            },
            components:{
                App
            }

        })

    </script>
</body>
</html>

2.全域性過濾器只要過濾器一建立，在任何元件中都能使用

Vue.filter('過濾器的名字'，function(val,a,b){})
在各個元件中都能使用
資料 | 過濾器的名字('alex'，'wusir')

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        //全域性過濾器
        Vue.filter('myTime',function (val,formatStr) {
            return moment(val).format(formatStr)
        })
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
                }
            },
            template:`

               <div>我是一個APP  {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>

               </div>
            `,
            filters:{
                myReverse:function (val) {
                    console.log(val);
                    return val.split('').reverse().join('')
                }

            }
        }
        new Vue({
            el:'#app',
            data(){
                return {

                }
            },
            components:{
                App
            }

        })

    </script>
</body>
</html>

二.生命週期的鉤子函式

created 元件建立

虛擬DOM React
傳送ajax 獲取資料實現資料驅動檢視

mounted

　　獲取真實DOM

activated

　　啟用當前元件

deactivated

keep-alive Vue提供的內建元件，主要作用，讓元件產生快取
停用當前元件

destroyed

　　如果開了定時器，一定要關閉定時器

beforeCreate(){

    // 元件建立之前

    console.log(this.msg);

},

created(){

    // 元件建立之後

    // 使用該元件，就會觸發以上的鉤子函式，created中可以操作資料，傳送ajax，並且可以實現vue==》頁面的影響  應用：傳送ajax請求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},

beforeMount(){

    // 裝載資料到DOM之前會呼叫

    console.log(document.getElementById('app'));

},

mounted(){

    // 這個地方可以操作DOM

    // 裝載資料到DOM之後會呼叫 可以獲取到真實存在的DOM元素，vue操作以後的DOM

    console.log(document.getElementById('app'));

},

beforeUpdate(){

    // 在更新之前，呼叫此鉤子，應用：獲取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新之前，呼叫此鉤子，應用：獲取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},

beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},

activated(){

    console.log('元件被激活了');

},

deactivated(){

    console.log('元件被停用了');

}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <App/>
</div>
<script src="vue.js"></script>

<script>
    let Test = {
        data() {
            return {
                msg: 'alex',
                count:0,
                timer:null
            }
        },
        template: `
               <div id="test">
                    <div id="box">{{ msg }}</div>
                    <p>{{ count }}</p>
                    <button @click = 'change'>修改</button>
               </div>
            `,
        methods: {
            change() {
                this.msg = 'wusir';
                document.querySelector('#box').style.color = 'red';
            }
        },
        beforeCreate() {

            // 元件建立之前
            console.log('元件建立之前', this.msg);

        },
        created() {
//                ********最重要
            // 元件建立之後
//            this.timer = setInterval(()=>{
//                this.count++
//            },1000);

            // 使用該元件，就會觸發以上的鉤子函式，
            // created中可以操作資料，傳送ajax，並且可以實現資料驅動檢視
            // 應用：傳送ajax請求

            console.log('元件建立之後', this.msg);

            // this.msg = '嘿嘿黑';

        },
        beforeMount() {

            // 裝載資料到DOM之前會呼叫

            console.log(document.getElementById('app'));


        },
        mounted() {
//            *******很重要*****

            // 這個地方可以操作DOM

            // 裝載資料到DOM之後會呼叫 可以獲取到真實存在的DOM元素，vue操作以後的DOM

            console.log(document.getElementById('app'));
            //jsDOM操作

        },
        beforeUpdate() {

            // 在更新之前，呼叫此鉤子，應用：獲取原始的DOM

            console.log(document.getElementById('app').innerHTML);

        },
        updated() {

            // 在更新之後，呼叫此鉤子，應用：獲取最新的DOM

            console.log(document.getElementById('app').innerHTML);

        },
        beforeDestroy() {

            console.log('beforeDestroy');

        },
        destroyed() {
            //注意： 定時器的銷燬 要在此方法中處理
            console.log('destroyed',this.timer);
            clearInterval(this.timer);

        },
        activated(){

            console.log('元件被激活了');

        },

        deactivated(){

            console.log('元件被停用了');

        }
    }
    let App = {
        data() {
            return {
                isShow:true
            }
        },
        template: `

               <div>

                   <keep-alive>
                     <Test  v-if="isShow"/>
                  </keep-alive>
                    <button @click = 'clickHandler'>改變test元件的生死</button>
               </div>
            `,
        methods:{
          clickHandler(){
              this.isShow = !this.isShow;
          }
        },
        components: {
            Test
        }

    }
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            App
        }

    })

</script>
</body>
</html>

三.Vue的全家桶（kfc） vue+vue-router+vuex

　　vue+vue-router 主要來做 SPA（Single Page Application）單頁面應用

　　vue-router是vue的核心外掛

　　為什麼要使用單頁面應用？

　　　　傳統的路由跳轉，如果後端資源過多，會導致頁面出現白屏現象，讓前端來做路由，在某個生命週期的鉤子函式中傳送ajax，資料驅動。為了使用者體驗

1.使用vue-router

　　下載引入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以後是模組化程式設計，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首頁</div>`
    }
    const Course = {
        data() {
            return {}
        },
        template: `<div>我是免費課程</div>`
    }
    //建立路由
    const router = new VueRouter({
        //定義路由規則
        mode:'history',
        routes: [
            {
              path:'/',
              redirect:'/home'
            },
            {
                path: '/home',
                component: Home
            },
            {
                path: '/course',
                component: Course
            }
        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的兩個全域性元件
        //router-view  是路由元件的出口
        template: `
            <div>

                <div class="header">
                    <router-link to = '/home'>首頁</router-link>
                    <router-link to = '/course'>免費課程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

    }
    new Vue({
        el: '#app',
        //掛載 路由物件
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

</script>

</body>
</html>

2.命名路由

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以後是模組化程式設計，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首頁</div>`
    }
    const Course = {
        data() {
            return {
                categoryList:[]
            }
        },
        template: `<div>
        <span v-for = '(item,index) in categoryList'>{{item.name}}</span>



    </div>`,
        methods:{
          getCategroyList(){

          }
        },
        created(){
            //ajax 傳送請求 資料獲取
            this.getCategroyList();
        }
    }
    //建立路由
    const router = new VueRouter({
        //定義路由規則
        routes: [
            {
              path:'/',
              redirect:'/home'
            },
            {
                path: '/home',
                name:'Home',
                component: Home
            },
            {
                path: '/course',
                name:'Course',
                component: Course
            }
        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的兩個全域性元件
        //router-view  是路由元件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"Home"}'>首頁</router-link>
                    <router-link :to = '{name:"Course"}'>免費課程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

    }
    new Vue({
        el: '#app',
        //掛載 路由物件
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

</script>

</body>
</html>

3.動態路由匹配

　　$route 路由資訊物件

　　$router 路由物件 VueRouter

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以後是模組化程式設計，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)

    //路由正規化：

    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1   query


    const User = {
        data() {
            return {
                user_id:null
            }
        },
        template: `<div>我是使用者{{ user_id}}</div>`,
        created() {
            console.log(this.$route); //路由資訊物件
//            提醒一下，當使用路由引數時，例如從 /user/foo 導航到 /user/bar，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。
        },
        watch: {
            '$route'(to, from) {
                // 對路由變化作出響應...
                console.log(to.params.id);
                console.log(from);
                this.user_id = to.params.id;
                //傳送ajax

            }
        }
    }

    //建立路由
    const router = new VueRouter({
        //定義路由規則
        routes: [

            {
                path: '/user/:id',
                name: 'User',
                component: User
            }

        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的兩個全域性元件
        //router-view  是路由元件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"User",params:{id:1}}'>使用者1</router-link>
                    <router-link :to = '{name:"User",params:{id:2}}'>使用者2</router-link>

                </div>
                <router-view></router-view>
            </div>

        `

    }
    new Vue({
        el: '#app',
        //掛載 路由物件
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

</script>

</body>
</html>

4.程式設計式導航

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //如果以後是模組化程式設計，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)

    //路由正規化：

    //http://127.0.0.1:8080/index/user
    //http://127.0.0.1:8080/user/1 params
    //http://127.0.0.1:8080/user/2
    //http://127.0.0.1:8080/user?user_id =1   query
    const Home = {
        data() {
            return {}
        },
        template: `<div>我是首頁</div>`
    }

    const User = {
        data() {
            return {
                user_id: null
            }
        },
        template: `<div>我是使用者{{ user_id}}
                    <button @click = 'clickHandler'>跳轉首頁</button>

                 </div>`,
        created() {
            console.log(this.$route);
        },
        methods:{
            //程式設計式導航
            clickHandler(){
                this.$router.push({
                    name:"Home"
                })
            }
        },
        watch: {
            '$route'(to, from) {
                // 對路由變化作出響應...
                console.log(to.params.id);
                console.log(from);
                this.user_id = to.params.id;
                //傳送ajax

            }
        }
    }

    //建立路由
    const router = new VueRouter({
        //定義路由規則
        routes: [

            {
                path: '/user/:id',
                name: 'User',
                component: User
            },
            {
                path: '/home',
                name: 'Home',
                component: Home
            }

        ]
    })
    let App = {
        data() {
            return {}
        },
//        router-link和router-view 是vue-router 提供的兩個全域性元件
        //router-view  是路由元件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"User",params:{id:1}}'>使用者1</router-link>
                    <router-link :to = '{name:"User",params:{id:2}}'>使用者2</router-link>

                </div>
                <router-view></router-view>
            </div>

        `

    }
    new Vue({
        el: '#app',
        //掛載 路由物件
        router,
        data() {
            return {}
        },
        template: `<App />`,
        components: {
            App
        }
    })

</script>

</body>
</html>

Vue的生命週期鉤子函式

1、beforeCreate():元件例項剛剛被建立 (el和data並未初始化) 2、created():元件建立完成,屬性已繫結,但DOM還未生成,$el屬性還不存在 (完成data資料的初始化)，: 例項已經建立完成之後呼叫,在這一步,例項已經完成資料觀測, 屬性和方法的運算, watch/event

vue的生命週期鉤子函式與自定義指令鉤子函式

Vue.directive('hello',{ bind:function(el){ console.log("bind時父節點為:"+el.parentNode) console.log("觸發bind指令鉤子函式") },

vue.js生命週期鉤子函式及快取

生命週期在工作中用到最多的就是created,mounted,activated，deactivated. 由於系統需要快取，使用了keep-alive

VueRouter和Vue生命週期(鉤子函式)

一、vue-router路由 1、介紹 vue-router是Vue的路由系統，用於定位資源的，在頁面不重新整理的情況下切換頁面內容。類似於a標籤，實際上在頁面上展示出來的也是a標籤，是錨點。 2、路由註冊 1. 定義一個路由匹配規則和路由對應元件的物件 let url = [

vue.js生命週期鉤子、過濾器、互動練習001 仿留言板

需求: 呼叫介面獲取留言資料過濾時間只取年月日開啟網頁便執行請求程式碼: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /&g

對Vue生命週期鉤子函式的理解

對Vue生命週期鉤子函式的理解例項建立之後，初始化事件和生命週期，而後觸發beforeCreate。beforeCreate，當前例項建立之前，很少操作，一般用於載入動畫，比如建立一個旋轉動畫。created表示當前例項建立完成，元件、屬性等初始化完成，一般封裝一個方法，從網路請求資料

前端框架vue.js系列（10）：生命週期鉤子函式

每個vue例項在被建立之前都要經過一系列的初始化過程。例如需要設定資料監聽、編譯模板、掛載例項到dom、在資料變化時更新dom等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，給予使用者機會在一些特定的場景下新增他們自己的程式碼。下圖說明了例項的生命週期。你不需要立

vue過渡動畫的生命週期/鉤子函式

相信大家都會看到使用vue外掛的時候，那一連串的函式是什麼意思呢？ vue中所有的鉤子函式： beforeCreate（建立前） created（建立後） beforeMount（載入前） mounted（載入後） beforeUpdate（更新前） up

Vue.js生命週期鉤子

**官方文件：**https://cn.vuejs.org/v2/api/#選項-生命週期鉤子什麼是例項的生命週期？例項在被建立前經過的一系列初始化過程叫生命週期什麼是生命週期鉤子？在生命週期中被自動呼叫的函式叫做生命週期鉤子生命週期鉤子的用途？為我們提供執行自定義邏輯的機會鉤

vue例項生命週期鉤子

每個 Vue 例項在被建立時都要經過一系列的初始化過程——例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。同時在這個過程中也會執行一些叫做生命週期鉤子的函式，這給了使用者在不同階段新增自己的程式碼的機會。 vue2.0主要有以下幾個生

vue.js生命週期鉤子詳解

Vue例項從建立到銷燬的過程，就是生命週期。 Vue的生命週期包括：開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程。在Vue的整個生命週期中，提供了一系列的事件，可以註冊JavaScript方法，達到控制整個過程的目的，在這些Ja

react元件生命週期鉤子函式

掛載期 constructor 資料接收實現繼承super(props) componentWillMount 資料掛載之前可以操作資料不可以操作dom componentDidMount 資料掛載之後可以操作資料和dom render 渲染元件和 html 標籤更新期

react 的生命週期鉤子函式

上篇文章我們學習了 state，用以跟蹤元件的內部狀態。今天，我們將暫停具體的元件實現，轉而來談談 react 元件在應用程式中是如何存在的，也就是 react 元件的生命週期。當應用程式使用 React 框架時，就可以使用該框架提供的一些生命週期鉤子函式，

react中的生命週期鉤子函式? 每個都是幹什麼用的?

首先react有10個生命週期鉤子函式掛載期 constructor 資料接收實現繼承super(props) componentWillMount 資料掛載之前可以操作資料不可以操作dom componentDidMount 資料掛載

React 較難理解的生命週期鉤子函式

1. constructor 在react中，class 裡的constructor 方法用來初始化state和繫結事件方法其中，super作為方法執行父類的建構函式，引數為props 即接受父元件傳入的props 如果沒有執行super, r

Vue的過濾器,生命週期的鉤子函式和使用Vue-router

一.過濾器　　 1.區域性過濾器在當前元件內部使用過濾器　　給某些資料添油加醋 //宣告 filters:{ '過濾器的名字':function(val,a,b){ //a 就是alax ，val就是當前的資料 } } //使用管道符資料 | 過濾器的名

vue學習筆記(二)vue的生命週期和鉤子函式

前言通過上一章的學習，我們已經初步的瞭解了vue到底是什麼東西，可以幹什麼，而這一篇部落格主要介紹vue的生命週期和它常用的鉤子函式，如果有學過java的園友可能有接觸到在學習servlet的時候學過servlet的生命週期servlet 載入--->例項化--->服務--->銷燬,對於v

【必看】認識Vue，Vue快速入門，Vue如何建立一個例項？Vue的生命週期，什麼是鉤子函式？

認識Vue Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使

vue所有生命週期函式/鉤子函式理解

下邊是一個template 的程式碼，裡邊包含了所有vue 生命週期函式，我們可以vue-cli 專案中新建一個模板把下邊程式碼全都複製進去，然後F12開啟審查元素，觀察這些生命週期函式打印出來的log 裡的區別！ <template> <div class

十四、Vue的生命週期（鉤子函式）

Vue的生命週期（鉤子函式） Vue一共有10個生命週期函式，我們可以利用這些函式在vue的每個階段都進行操作資料或者改變內容

Vue的過濾器,生命週期的鉤子函式和使用Vue-router

相關推薦