Vue例項及生命週期

阿新 • • 發佈：2018-12-04

1,Vue例項生命週期.

有時候,我們需要在例項建立過程中進行一些初始化的工作,以幫助我們完成專案中更復雜更豐富的需求,開發,針對這樣的需求,Vue提供給我們一系列的鉤子函式

Vue.js例項生命週期

2,Vue生命週期的階段

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },
        beforeCreate() {
            console.group("beforeCreate");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.name);
            console.log("init", this.init);
            console.log("innerHTML", document.getElementById("app"))
        },

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },
  created() {
            console.group("Created");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.name);
            console.log("init", this.init);
            console.log("innerHTML", document.getElementById("app"))
        },
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },
        
        beforeMount() {
            console.group("beforeMount");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.name);
            console.log("init", this.init);
            console.log("innerHTML", document.getElementById("app"))
        },

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },

        mounted() {
            console.group("mounted");
            console.log("el: ", this.$el);
            console.log("data: ", this.$data);
            console.log("name: ", this.name);
            console.log('myClick', this.myClick);
            console.log("innerHTML: ", document.getElementById("app"));
        },

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },
       
        beforeUpdate(){
            console.group("beforeUpdate");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.name);
            console.log("myClick", this.myClick);
            console.log("innerHTML:", document.getElementById("app"));
        },
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    {{ name }}
    <button @click="myClick">點選修改資料</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            name: "雪人"
        },
        methods: {
            init: function () {
                console.log(this.name)
            },
            myClick: function () {
                this.name = "雪雪";
            }
        },
       
        updated(){
            console.group("updated");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.name);
            console.log("myClick", this.myClick);
            console.log("innerHTML:", document.getElementById("app"))
        },

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">
    <App></App>
</div>
<script>
    // Vue生命週期的消亡
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: "Hello 雪人"
            }
        },
        methods: {
            changeData: function() {
                this.mes = "帥爆太陽的男人 is here!";
            }
        },
        // 元件的建立和銷燬對效能有影響
        beforeDestroy(){
            console.log("beforeDestroy");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.mes);
            console.log("innerTEXT:", document.getElementById("app").innerText);
            console.log("innerHTML:", document.getElementById("app").innerHTML);
        }
    };
    let App = {
        template: `
            <div>
                <laside v-if="isShow"></laside>
                <button @click="showHide">建立消除元件</button>
            </div>
        `,
        // 判斷有巢狀的子元件
        components: {
            "Laside": Laside,
        },
        methods: {
            showHide:function(){
                this.isShow = !this.isShow;
            }
        },
        data(){
            return {
                isShow: true,
            }
        }
    };
    new Vue({
        el: "#app",
        components:{
            App,
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">

</div>
<script>

    // Vue生命週期的消亡
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: "Hello 雪人"
            }
        },
        methods: {
            changeData: function() {
                this.mes = "帥爆太陽的男人 is here!";
            }
        },
        
        destroyed(){
            console.log("destroyed");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name: ", this.mes);
        }
    };
    let App = {
        template: `
            <div>
                <laside v-if="isShow"></laside>
                <button @click="showHide">建立消除元件</button>
            </div>
        `,
        // 判斷有巢狀的子元件
        components: {
            "Laside": Laside,
        },
        methods: {
            showHide:function(){
                this.isShow = !this.isShow;
            }
        },
        data(){
            return {
                isShow: true,
            }
        }
    };
    new Vue({
        el: "#app",
        template: `<App></App>`,
        components:{
            App,
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    

    // Vue生命週期的消亡
    let Laside = {
        template: `
            <div>
                <h1>{{ mes }}</h1>
            </div>
        `,
        data() {
            return {
                mes: "Hello 雪人"
            }
        },
        methods: {
            changeData: function() {
                this.mes = "帥爆太陽的男人 is here!";
            }
        },

        activated(){
            console.log("activated");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.mes);
        },
        deactivated(){
            console.group("deactivated");
            console.log("el", this.$el);
            console.log("data", this.$data);
            console.log("name", this.mes);
        },
    };
    let App = {
        template: `
            <div>
                <laside v-if="isShow"></laside>
                <button @click="showHide">建立消除元件</button>
            </div>
        `,
        // 判斷有巢狀的子元件
        components: {
            "Laside": Laside,
        },
        methods: {
            showHide:function(){
                this.isShow = !this.isShow;
            }
        },
        data(){
            return {
                isShow: true,
            }
        }
    };
    new Vue({
        el: "#app",
        template: `<App></App>`,
        components:{
            App,
        }
    })
</script>
</body>
</html>

***activated和deactivated在瀏覽器上無明顯效果,只是在虛擬的DOM樹發生了變化***

2.1,VueRouter的實現原理

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
</head>
<body>
<div id="app">

</div>
<script>
    // 先獲取到div這個標籤
    let oDiv = document.getElementById("app");

    // window視窗的onhashchange函式,內部其實就是這個原理,不加break會繼續向下執行
    window.onhashchange = function () {
        switch (location.hash) {
            case '#/login':
                oDiv.innerHTML = `<h1>這是登入頁面</h1>`;
                break;
            case '#/register':
                oDiv.innerHTML = `<h1>這是註冊頁面</h1>`;
                break;
            default:
                oDiv.innerHTML = `<h1>這是首頁</h1>`;
                break
        }
    }
</script>
</body>
</html>

2.2Vue路由安裝的五大步驟

重中之重:先把router導進來

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>安裝使用</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    // 1,在Vue根例項中使用,VueRouter,固定寫法,據說以後會用,但不知道有什麼用
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>這是主頁頁面</h1>
            </div>
        `
    };

    let Login = {
        template: `
            <div>
                <h1>這是登入頁面</h1>
            </div>
        `
    };

    let Register = {
        template: `
            <div>
                <h1>這是註冊頁面</h1>
            </div>
        `
    };

    let App = {
        // 第四步, router-link會渲染成a標籤, to會變成href屬性, to後面是router中定義的路徑
        // 第五步, router-view是頁面的渲染出口
        template: `
            <div>
                <router-link to="/">首頁</router-link>
                <router-link to="/login">登入</router-link>
                <router-link to="/register">註冊</router-link>
                <router-view></router-view>
            </div>
        `
    };

    // 第二步例項化一個router物件, 本質上是將路徑和頁面內容綁定了對應關係
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/login',
                component: Login,
            },
            {
                path: '/register',
                component: Register,
            }
        ]
    });

    new Vue({
        el: "#app",
        template:`<App></App>`,
        // 第三步,在根例項中註冊router物件
        router:router,
        components:{
            App,
        }
    })
</script>
</body>
</html>

2.3路由重新命名

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>命名</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    // 1,在vue根例項中使用,VueRouter
    Vue.use(VueRouter);

    // 這是主頁面的元件
    let Home = {
        template: `
            <div>
                <h1>這是主頁面</h1>
            </div>
        `
    };

    // 這是登入頁面的元件
    let Login = {
        template: `
            <div>
                <h1>這是登入頁面</h1>
            </div>
        `
    };

    // 這是註冊頁面的元件
    let Register = {
        template: `
            <div>
                <h1>這是註冊頁面</h1>
            </div>
        `
    };

    // 寫一個元件的統一入口,
    // 第四步,router-link會渲染成a標籤,to會變成href屬性, to後面是router中定義路徑
    // 第五步,router-view是頁面內容的渲染出口
    // 重新命名類似於反向解析
    let App = {
        template: `
            <div>
               <router-link :to="{ name:'home' }">首頁</router-link>
               <router-link :to="{ name:'login' }">登入</router-link>
               <router-link :to="{ name:'register' }">註冊</router-link>
               <router-view></router-view>
            </div>
        `
    };

    // 例項化一個router物件:本質是將路徑和頁面內容綁定了對應關係
    let router = new VueRouter({
        routes: [
            {
                name: 'home',
                path: '/',
                component: Home,
            },
            {
                name: 'login',
                path:'/login',
                component:Login,
            },
            {
                name: 'register',
                path:'/register',
                component: Register,
            }
        ]
    });

    // 第三步把router註冊在根例項中
    new Vue({
        el:"#app",
        template: `<App></App>`,
        router: router,
        components:{
            App,
        }
    })
</script>
</body>
</html>

2.4,VueRouter值路由引數之引數

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>路由引數</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    //  在真實的場景中,可以有以下路形式
    // user/1,
    // user/userID:1
    // 1,在Vue根例項中使用.VueRouter
    Vue.use(VueRouter);

    // 這是主頁面的元件
    let Home = {
        template: `
            <div>
                <h1>這是主頁面</h1>
            </div>
        `
    };

    // 偽造一個使用者資訊的元件
    let userParams = {
        template: `
            <div>
                <h1>這是使用者一的資訊</h1>
            </div>
        `
    };

    //手寫一個所有元件的入口,引數的重中之重,這個引數是在to的後邊在寫一個字典,params:{userId:1}
    let App = {
        // router-link會渲染成a標籤,to會變成href屬性,to後面中定義的路徑
        // router-view是頁面內容的渲染出口
        template:`
            <div>
            <router-link :to="{ name:'home' }">首頁</router-link>
            <router-link :to="{ name:'userParams', params:{userId:1} }">登入</router-link>
            <router-link :to="{ name:'userQuery', query: { userId:2 } }">註冊</router-link>
            <router-view></router-view>
</div>
        `
    };
    // 偽造一個使用者二的資訊的元件
    let userQuery = {
        template: `
            <div>
                <h1>這是使用者二的資訊</h1>
            </div>
        `
    };

    // 例項化一個router的物件
    // 本質上是將路徑和頁面內容綁定了對應關係
    let router = new VueRouter({
        routes:[
            {
                name:'home',
                path:'/',
                // 把Home註冊到router中
                component:Home,
            },
            {
                name:'userParams',
                path:'/user/:userId',
                // 把userParams註冊到router中
                component:userParams,
            },
            {
                name:'userQuery',
                path:'/user',
                // 把userQuery註冊到router中
                component:userQuery,
            }
        ]
    });

    // 在根例項中註冊router物件
    new Vue({
        el: "#app",
        template: `<App></App>`,
        router: router,
        components:{
            App,
        }
    })
</script>
</body>
</html>

2.5,VueRouter路由之子路由

用重名就可以進行子路由的切換

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>寫死路徑的很不怎麼樣的子路由</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    //手寫一個不怎麼樣的主頁面的元件
    let Home = {
        template:`
            <div>
                <h1>這是主頁面</h1>
            </div>
        `
    };

    //手寫一個不怎麼樣的課程頁面
    let Courses = {
        template:`
            <div>
                <h1>這是課程頁面</h1>
                <router-link :to="{ name:'lightcourses' }">輕課</router-link>
                <router-link :to="{ name:'degreecourses' }">學位課</router-link>
                <router-view></router-view>
            </div>
        `
    };
    // 這回要不把這兩個先註冊到App中吧
    let App = {
        template:`
            <div>
                <router-link :to="{ name:'home' }">首頁</router-link>
                <router-link :to="{ name:'courses' }">課程頁面</router-link>
                <router-view></router-view>
            </div>
        `
    };
    //寫一個課程裡邊的輕課的子路由
    let LightCourses = {
         template:`
            <div>
                <h1>這是輕課的頁面</h1>
            </div>
         `
    };
    //寫一個學位課的頁面
    let DegreeCourses = {
        template:`
            <div>
                <h1>這是學位課的頁面</h1>
            </div>
        `
    };
    //把這倆貨寫到courses中

    //例項化一個VueRouter的物件
    let router = new VueRouter({
        routes:[
            {
                name: 'home',
                path: '/',
                component:Home
            },
            {
                name:'courses',
                path: '/courses',
                component:Courses,
                //把課程的子路由註冊進來,要不然不能點
                children:[
                    {
                        name:'lightcourses',
                        path: '/lightcourses',
                        component:LightCourses,
                    },
                    {
                        name:'degreecourses',
                        path:'/degreecourses',
                        component:DegreeCourses
                    }
                ]
            }
        ]
    });

    //實力一個Vue物件
    new Vue({
        el:"#app",
        router:router,
        components:{
            App
        },
        template: `<App></App>`
    })
</script>
</body>
</html>

2.6,VueRouter子路由的鉤子函式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>鉤子函式</title>
    <script src="vue.min.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>

<div id="app">

</div>
<script>
    // 1,使用VueRouter使用路由
    Vue.use(VueRouter);

    let Home = {
        template:`
            <div>
                <h1>這是首頁頁面</h1>
            </div>
        `
    };
    //手寫一個login頁面的元件
    let Login = {
        template: `
            <div>
                <h1>這是登入頁面</h1>
            </div>
        `
    };
    //支付的元件
    let Pay = {
        template:`
            <div>
                <h1>這是支付頁面</h1>
            </div>
        `
    };

    // 把這些元件註冊到App中
    let App = {
        // router-link會渲染成a標籤, to會渲染成href
        // router-view是內容的渲染出口
        template:`
            <div>
                <router-link :to="{ name:'home' }">首頁</router-link>
                <router-link :to="{ name:'login' }">登入</router-link>
                <router-link :to="{ name:'pay' }">支付</router-link>
                <router-view></router-view>
            </div>
        `
    };

    // 例項化一個router物件
    // 把a按標籤的錨點值和頁面內容綁定了對應關係
    let router = new VueRouter({
        routes:[
            {
                name:'home',
                path:'/',
                component:Home
            },
            {
                name:'login',
                path:'/login',
                component:Login,
            },
            {
                name:'pay',
                path:'/pay',
                component:Pay,
            }
        ]
    });
    // 通過router物件的beforeEach(function(to, from, next))
    router.beforeEach(function(to, from, next){
        console.log("to", to);
        console.log("from", from);
        console.log("next", next);
        if (to.meta.require_login){
            next('/login');
        }else {
            next();
        }
    });
    new Vue({
        el:"#app",
        template:'<App></App>',
        components:{
            App
        },
        // 在根例項中註冊router物件
        router:router
    })
</script>
</body>
</html>

Vue例項及生命週期

1,Vue例項生命週期. 有時候,我們需要在例項建立過程中進行一些初始化的工作,以幫助我們完成專案中更復雜更豐富的需求,開發,針對這樣的需求,Vue提供給我們一系列的鉤子函式 2,Vue生命週期的階段 <!DOCTYPE html> <html

Vue例項和生命週期

建立一個Vue例項每個Vue應用都是通過Vue函式建立一個新的Vue例項開始： var vm = new Vue({ //選項 }) 資料與方法當一個Vue例項被建立時，它向Vue的響應式系統中加入了其data物件中能找到的所有屬性。當這個屬性的值發生變化時，檢視將產生"響應"，即匹配更新

Vue.js-07：第七章 - Vue 例項的生命週期

一、前言　　在之前的 Vue 學習中，我們在使用 Vue 時，都會建立一個 Vue 的例項，而每個 Vue 例項在被建立時都要經過一系列的初始化過程。例如，需要設定資料監聽、編譯模板、將例項掛載到 DOM 並在資料變化時更新 DOM 等。在這個過程中，Vue 會執行一些生命週期鉤子

Vue例項的生命週期

生命週期先上圖什麼是生命週期 Vue例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。在Vue的整個生命

關於Vue例項的生命週期（2）

關於Vue例項的生命週期（2）建立(create)->掛載(mount)->更新(update)->銷燬(destory) 鉤子函式觸發事件 beforeCreate 在例項初始化之後，資料觀測(data observer)

Vue鉤子函式生命週期例項詳解

vue生命週期簡介 Vue例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。在Vue的整個生命週期中，它提供了一系列的事件，可以讓我們在事件觸發時註冊js

Vue2.5筆記：Vue的例項與生命週期

理解與認識 Vue 的例項是我們學習 Vue 非常重要的一步，也是非常必須的，因為例項是它的一個起點，也是它的一個入口，只有我們建立一個 Vue 例項之後，我們才行利用它進行一些列的操作。首先 Vue 沒有完全遵守 MVVM 的架構模式，但是它的設計也受到了該模式的啟發，Vue 也就是在該模式中起到 VM（

Vue學習之旅----元件及生命週期

<template> <div id="app"> <v-home></v-home> <v-news></v-news> <router-view /> &l

Vue學習筆記3.2-生命週期函式（順帶記錄Vue的例項的生命週期）

Vue生命週期函式有beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured。共11個。本文直說前8個，另外3

6、第十 - WEB開發進階 - Django使用者登入後的資訊管理及生命週期簡述

案例操作：一、Django編寫模擬使用者登入並跳轉到後臺　　示範案例，要求： 1、模擬使用者登入，賬號密碼一致、輸入錯誤的話進行提示 2、使用者登入成功跳轉到後臺，並顯示其他home.html資訊 3、彈出對話方塊，設定新增、刪除按鈕程式碼結構：程式碼

關於Vue的元件,生命週期與路由

父元件向子元件傳值： v-bind:content="father-components-data" 子元件利用props：[…] 接收每一個父元件傳過來的值子元件向父元件傳值： this.$emit() 通過事件觸發向上一層觸發事件，父元件監聽此事件，獲取子

vue 專案實戰 (生命週期鉤子)

開篇先來一張圖下圖是官方展示的生命週期圖 Vue例項的生命週期鉤子函式（8個） 1. beforeCreate

Vue中的生命週期（淺談）

Vue中的宣告週期是什麼？ vue例項從建立到銷燬的過程稱之為vue的生命週期用Vue框架，熟悉它的生命週期可以讓開發更好的進行。首先先看看官網的圖，詳細的給出了vue的生命週期: 接下來我們就根據上面那張圖來分析分析模擬一下

vue基礎5-生命週期

1、vue例項的生命週期 1.1、什麼是生命週期？ --從Vue例項建立、執行、銷燬期間，總是伴隨著各式各樣的事件，這些事件，統稱為生命週期！ 1.2、生命週期鉤子：就是生命週期事件的別名而已； 1.3、生命週期鉤子 = 生命週期函式 = 生命週期事件 1.4、

Vue.js之生命週期

有時候，我們需要在例項建立過程中進行一些初始化的工作，以幫助我們完成專案中更復雜更豐富的需求開發，針對這樣的需求，Vue提供給我們一系列的鉤子函式。 vue生命週期 beforeCreate 在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼

Vue.js原始碼生命週期 LifeCycle 學習

callHook 。我們來看看 callHook 程式碼： export function callHook (vm: Component, hook: string) { const handlers = vm.$options[hook] // 獲取Vue選項中的

vue js 的生命週期和鉤子函式

用Vue框架，熟悉它的生命週期可以讓開發更好的進行。首先先看看官網的圖，詳細的給出了vue的生命週期: 簡單理解為它可以總共分為8個階段： beforeCreate（建立前）, created（建立後）, beforeMount

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

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

vue父子元件生命週期函式執行順序

vue父元件載入和銷燬執行最後一個鉤子函式之前先執行一遍子元件的鉤子： 1.載入父:beforecreate-created-beforeMount-（子:beforecreate-created-beforeMount-mounted）-mounted 2.銷燬父:beforeDestroy--

maven常用命令及生命週期

1.maven的常用命令 clean:清理將專案根目錄下target目錄清理掉 compile:編譯將專案中.java檔案編譯為.class檔案 test:單元測試（單元測試類名的要求：xxxTest.java）將專案根目錄src/test/j

Vue例項及生命週期

相關推薦