摘要：供用戶在相應(yīng)的階段對(duì)其進(jìn)行操作。我們像下面這樣使用這個(gè)指令大多數(shù)情況下，我們只需要使用與鉤子函數(shù)。里提供了函數(shù)的簡(jiǎn)寫(xiě)形式鉤子函數(shù)有兩個(gè)常用的參數(shù)和。其他用法與全局自定義指令一致。

vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，稱為生命周期，共有八個(gè)階段。

這八個(gè)階段里分別有一個(gè)叫做鉤子函數(shù)的實(shí)例選項(xiàng)。供用戶在相應(yīng)的階段對(duì)其進(jìn)行操作。

beforeCreate(){  //組件實(shí)例剛剛創(chuàng)建，還未進(jìn)行數(shù)據(jù)觀測(cè)和事件配置
                
},
created(){  //實(shí)例已經(jīng)創(chuàng)建完成，并且已經(jīng)進(jìn)行數(shù)據(jù)觀測(cè)和事件配置
                
},
beforeMount(){//模板編譯之前，還沒(méi)掛載
                
},
mounted(){ //模板編譯之后，已經(jīng)掛載，此時(shí)才會(huì)渲染頁(yè)面，才能看到頁(yè)面上數(shù)據(jù)的展示
                    
},
beforeUpdate(){//組件更新之前
                
},
updated(){//組件更新之后
                
},
beforeDestroy(){//組件銷(xiāo)毀之前
                
},
destroyed(){  //組件銷(xiāo)毀之后
                    
}

這幾個(gè)鉤子中，最常用的是created()與mounted()。

計(jì)算屬性也是用來(lái)存儲(chǔ)數(shù)據(jù)，但具有以下幾個(gè)特點(diǎn)：

數(shù)據(jù)可以進(jìn)行邏輯處理操作

對(duì)計(jì)算屬性中的數(shù)據(jù)進(jìn)行監(jiān)視

    {{addZero}}

    
new Vue({
    el: "#app",
    data: {
        num: 8
    },
    computed: {
        //這是計(jì)算屬性的get方法，用于取值
        addZero() {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
})

這里的addZero和num一樣，都是屬性。不過(guò)addZero是依賴于num、進(jìn)行計(jì)算后的值。一旦num的值發(fā)生變化，addZero的值也會(huì)隨之變化。

 

    {{num}}----{{addZero}}
    

    點(diǎn)擊改變num
 
    
 new Vue({
    el: "#app",
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
 })

一旦我們點(diǎn)擊按鈕改變num的值，那么因?yàn)橛?jì)算屬性實(shí)時(shí)監(jiān)測(cè)依賴項(xiàng)，addZero也會(huì)跟著發(fā)生變化。

將計(jì)算屬性的get函數(shù)定義為一個(gè)方法也可以實(shí)現(xiàn)和計(jì)算屬性類似的功能。那么二者之間有什么區(qū)別？

區(qū)別一：計(jì)算屬性是基于它的依賴進(jìn)行實(shí)時(shí)更新的，方法則是調(diào)用才更新

區(qū)別二：計(jì)算屬性是有緩存的，只要相關(guān)依賴沒(méi)有改變，多次訪問(wèn)計(jì)算屬性得到的值是之前緩存的計(jì)算結(jié)果，不會(huì)多次執(zhí)行。操作一個(gè)沒(méi)有依賴項(xiàng)的值也是如此。

官方文檔給出了下面這個(gè)例子：

computed: {
  now: function () {
    return Date.now()
  }
}

計(jì)算屬性存在緩存，這里的now值不會(huì)發(fā)生變化。

計(jì)算屬性由兩部分組成：get和set，分別用來(lái)獲取計(jì)算屬性和設(shè)置計(jì)算屬性。默認(rèn)只有g(shù)et，如果需要set，要自己添加。

        

        {{num}}----{{addZero}}
        

        點(diǎn)擊改變num
    
    
   new Vue({
        el: "#app",
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : "0" + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我們?cè)?b>change方法中改變addZero屬性的值的時(shí)候會(huì)自動(dòng)調(diào)用它的set方法。

vue中給實(shí)例和屬性提供了若干屬性和方法。

獲取屬性的語(yǔ)法：實(shí)例名.屬性名
以下是常用的屬性：

vm.$el: 獲取vue實(shí)例關(guān)聯(lián)的元素DOM，進(jìn)而可以對(duì)其進(jìn)行操作

vm.$data: 獲取數(shù)據(jù)對(duì)象data

vm.$options：獲取選項(xiàng)，自定義的選項(xiàng)也可以在這里獲取。

vm.$refs：獲取所有添加ref屬性的元素dom對(duì)象，進(jìn)而可以對(duì)其進(jìn)行操作

手動(dòng)掛載vue實(shí)例

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");

銷(xiāo)毀實(shí)例

vm.$destroy();  //銷(xiāo)毀實(shí)例所占的內(nèi)存空間

在DOM更新完成后再執(zhí)行回調(diào)函數(shù)，一般在修改數(shù)據(jù)之后使用該方法，以便獲取更新后的DOM

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
 
 //修改數(shù)據(jù)
 vm.msg="foo";
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM還沒(méi)更新完，Vue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生改變之后DOM立即變化，需要按一定的策略進(jìn)行DOM更新，需要時(shí)間！使用$nextTick方法等DOM更新完再獲取數(shù)據(jù)。

通過(guò)vue實(shí)例的$set方法為對(duì)象添加屬性，可以實(shí)時(shí)監(jiān)視。

    {{user.name}}
 {{user.age}}
    

    添加屬性

    
var vm = new Vue({
    data: {
        msg: "Hello vue.js",
        user: {
            name: "hedawei",
            gender: "man"
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, "age", 22);
        }
    }
}).$mount("#app");

方法中使用原始的添加屬性方法的話不會(huì)在模板中顯示。使用$set方法會(huì)實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)，然后添加。

監(jiān)控vue實(shí)例的變化

 vm.$watch("msg", (newValue, oldValue) => {
    console.log("msg被修改啦，原值：" + oldValue + "，新值：" + newValue);
 });

如果需要監(jiān)控深度數(shù)據(jù)變化（例如監(jiān)控一個(gè)對(duì)象中的某個(gè)屬性），則需要在選項(xiàng)中添加{deep:true}

自定義指令分為自定義全局指令和自定義局部指令。

使用全局方法Vue.directive(指令I(lǐng)D,定義對(duì)象)。注：使用指令時(shí)必須在指名名稱前加前綴v-，即v-指令名稱。

簡(jiǎn)單示例：

Vue.directive("hello",{
    bind(){ //常用！！
        alert("指令第一次綁定到元素上時(shí)調(diào)用，只調(diào)用一次，可執(zhí)行初始化操作");
    },
    inserted(){
        alert("被綁定元素插入到DOM中時(shí)調(diào)用");
    },
    update(){
        alert("被綁定元素所在模板更新時(shí)調(diào)用");
    },
    componentUpdated(){
        alert("被綁定元素所在模板完成一次更新周期時(shí)調(diào)用");
    },
    unbind(){
        alert("指令與元素解綁時(shí)調(diào)用，只調(diào)用一次");
    }
 });

這里定義了一個(gè)名為hello的指令，指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)，分別在不同的時(shí)期生效。我們像下面這樣使用這個(gè)指令:

hello vue.js

大多數(shù)情況下，我們只需要使用bind與update鉤子函數(shù)。vue里提供了函數(shù)的簡(jiǎn)寫(xiě)形式：

Vue.directive("hello", function () {
    alert("hello vue.js");
})  

鉤子函數(shù)有兩個(gè)常用的參數(shù)el和binding。el是綁定的DOM對(duì)象，binding是一個(gè)對(duì)象，包含若干屬性。

拿到DOM對(duì)象，我們就可以對(duì)DOM進(jìn)行一些操作。

hello vue.js

Vue.directive("hello", function (el,binding) {
    el.style.color = "red";
    
    //屬性name是指令的名字（不帶v-）
    console.log(binding.name);     //hello
    //屬性value是傳遞給指令的值
    console.log(binding.value);   //alice
    //屬性expression是指令值的字符串形式（個(gè)人感覺(jué)就是類似變量名）
    console.log(binding.expression);  //msg
    //屬性arg是傳遞給指令的參數(shù)(和傳值寫(xiě)在一起容易令初學(xué)者困惑，下面分開(kāi)寫(xiě)  
    //合在一起寫(xiě)的寫(xiě)法是
hello vue.js
)
    //
hello vue.js
    console.log(binding.arg);       //123
    //屬性modifiers是一個(gè)包含修飾符的對(duì)象。
    //與傳參傳值合在一起的寫(xiě)法是 
hedawei
    //
hello vue.js
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    }
 })

局部自定義指令寫(xiě)在實(shí)例的directives選項(xiàng)中。

  var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法與全局自定義指令一致。

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。本質(zhì)上還是使用CSS3動(dòng)畫(huà)：transition、animation屬性。

使用transition組件，將要執(zhí)行動(dòng)畫(huà)的元素包含在該組件內(nèi)：

    
        運(yùn)動(dòng)的元素
   

我們需要為其定義一個(gè)name屬性，以便后面為其添加css樣式。

動(dòng)畫(huà)有6個(gè)CSS類名，下面結(jié)合例子說(shuō)明：

    
    

        點(diǎn) 擊
        
            

            
        
    
    
    

vue中給過(guò)渡的不同時(shí)期提供了不同的鉤子函數(shù)。

        

        

        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert("動(dòng)畫(huà)進(jìn)入之前");
        },
        enter(el) {
            alert("動(dòng)畫(huà)進(jìn)入");
        },
        afterEnter(el) {
            alert("動(dòng)畫(huà)進(jìn)入之后");
        },
        beforeLeave(el) {
            alert("動(dòng)畫(huà)離開(kāi)之前");
        },
        leave(el) {
            alert("動(dòng)畫(huà)離開(kāi)");
        },
        afterLeave(el) {
            alert("動(dòng)畫(huà)離開(kāi)之后");
        }
    }
 });

在這不同的時(shí)期，我們可以取到過(guò)渡元素的DOM對(duì)象，從而對(duì)其進(jìn)行操作。

上面的標(biāo)簽只適用于單元素過(guò)渡。若要對(duì)多元素進(jìn)行過(guò)渡，則需要使用標(biāo)簽，并且綁定key屬性，設(shè)置不同的值。

    點(diǎn) 擊
    
        

        
        

        
    

我們可以使用vue的自定義過(guò)渡類名結(jié)合第三方動(dòng)畫(huà)庫(kù)實(shí)現(xiàn)自定義動(dòng)畫(huà)效果。這六個(gè)自定義類名和vue內(nèi)置的類名類似:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class
示例：

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 

    點(diǎn) 擊
    
        

        
    


 

未完待續(xù)。。。