vue2.0學習筆記（第四講）（生命週期函數、vue實例的簡單方法、自定義指令）

時間 2019-12-05

標籤 vue2.0 vue 學習筆記第四生命周期函數實例簡單方法自定義指令简体版

原文原文鏈接

1、生命週期函數

vue提供了幾個鉤子函數，用於對應由vue建立的實例對象的生命週期。下面來羅列在vue2.0當中定義的生命週期函數。html

beforeCreate
該函數在實例對象剛被建立，尚未綁定屬性時觸發執行。
created
該函數在實例對象完成建立和屬性綁定，可是DOM還未生成（$el屬性還不存在）時觸發執行。
beforeMount
該函數在組件掛載以前觸發執行。
mounted
該函數在組件掛載完成以後觸發執行。（至關於於vue1.x當中的compiled和ready）
beforeUpdate
該函數在組件數據更新以前觸發執行。
updated
該函數在組件數據更新完畢以後觸發執行。
beforeDestroy
該函數在實例對象銷燬以前觸發執行。
destroyed
該函數在實例對象完成銷燬以後觸發執行。

在上述的鉤子函數當中，比較經常使用的有mounted和updated。注意mounted不會承諾全部的子組件也都一塊兒被掛載。若是但願等到整個視圖都渲染完畢，能夠用vm.$nextTick替換掉mounted。以下所示：vue

mounted: function(){
  this.$nextTick(function(){
    // Code that will run only after the
    // entire view has been rendered
  })
}

當咱們在vue實例對象的methods當中定義了一個方法，但願當文本節點所有插入文檔當中以後先自動調用一次該方法，那麼咱們就能夠把對該方法的調用寫在moutned函數體內部，相似於原生js當中window.onload的做用。示例代碼以下所示：數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                },
                mounted:function(){
                    this.$nextTick(function(){
                       this.show(); 
                    });
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <button @click="show()">按鈕</button>
    </div>
</body>
</html>

則當頁面加載完成，實例對象建立，組件掛載完成以後就會先調用一次該實例對象當中的show方法。注意，在該實例對象內部一樣經過this來獲取該方法。dom

2、vue實例的簡單方法

當咱們定義var vm = new Vue({});以後代表建立了一個新的vue實例對象，vm這個實例對象在建立完成以後，在其身上就自帶了一些簡單的屬性和方法，在實例對象外部經過vm.的方式來獲取，在實例對象內部經過this.的方式來獲取。函數

一、`vm.$el（this.$el）`

該實例屬性能夠獲取到vm這個實例對象所掛載的dom元素。示例代碼以下所示：this

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:"hahaxixi"
            },
            methods:{
                change:function(){
                    this.$el.style.color = 'red';
                }
            }
        });

    };
</script>
<div id="box">
    <button @click="change()">按鈕</button>
    <h2>{{msg}}</h2>
</div>

在上述示例當中，由this.$el獲取的dom元素相似於document.getElementById('box')的效果。頁面剛完成加載渲染的效果爲：spa

當咱們點擊按鈕後，頁面呈現結果爲：code

二、`vm.$data（this.$data）`

該實例屬性能夠獲取該實例對象當中data這個數據對象。示例代碼以下所示：htm

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:"hahaxixi"
            },
            methods:{
                show:function(){
                    alert(this.$data.msg);
                }
            }
        });

    };
</script>
<div id="box">
    <button @click="show()">按鈕</button>
    <h2>{{msg}}</h2>
</div>

當咱們點擊按鈕時，便可在彈出框當中顯示data這個數據對象當中msg對應的屬性值"hahaxixi"。對象

三、`vm.$mount()`

該實例方法能夠容許咱們手動掛載vue實例到某個指定的dom元素身上。當使用這個方法時，在實例對象內部能夠不給el屬性賦值。

var vm = new Vue({
            el:'#box',
            data:{},
            methods:{}
        });

       var vm = new Vue({
            data:{},
            methods:{}
        }).$mount('#box');

上述兩段代碼的做用效果是同樣的。

四、`vm.$destroy()（this.$destroy()）`

該實例方法用於銷燬實例對象。

五、`vm.$options（this.$options）`

該實例屬性用於獲取咱們在vm這個實例對象內部自定義的屬性或方法。示例代碼以下所示：

<script>
    window.onload = function(){
        var vm = new Vue({
            data:{
            },
            methods:{
                change:function(){
                    alert(this.$options.aa);
                    this.$options.show();
                }
            },
            aa:'haha',
            show:function(){
                alert('xixi');
            }
        }).$mount('#box');
    };
</script>
<div id="box">
    <button @click="change()">按鈕</button>
</div>

從上述代碼當中能夠知道，咱們能夠給vm這個實例對象加上自定義的屬性和方法。aa爲自定義的屬性，在實例內部經過this.$options.aa來獲取，show爲自定義的方法，在實例內部能夠經過this.$options.show()來調用。故當點擊按鈕以後，先彈出'haha'，再彈出'xixi'。

六、`vm.$watch('數據屬性名',function(newVal,oldVal){})`

該實例方法能夠用於監聽實例對象當中數據的變化。該方法的第一個參數寫vm這個實例對象當中所要監聽的數據屬性名，當被監聽的數據發生變化時執行其回調函數，該回調函數當中默認接收兩個參數，形參名能夠任取，回調函數當中第一個參數表示數據變化以後的值，第二個參數表示數據變化以前的值。示例代碼以下所示：

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'haha'
            },
            methods:{
                change:function(){
                    this.msg  = 'xixi';
                }
            }
        });
        vm.$watch('msg',function(newVal,oldVal){
            alert(newVal);
            alert(oldVal);
        });
    };
</script>
<div id="box">
    <button @click="change()">按鈕</button>
    <h2>{{msg}}</h2>
</div>

當咱們點擊按鈕時，數據發生變化，即會調用$watch當中的回調函數，先彈出"xixi"，而後再彈出"haha"。
上述這種vm.$watch(name,fnCb)的方式調用只是對數據進行淺度的監視，當要監視的數據爲一個對象是，當該對象內部的屬性值發生變化時，使用淺度監視沒法監測到這個變化，此時須要使用深度監視，調用方式爲vm.$watch(name,fnCb,{deep:true})。但咱們若是監視的是一個數組對象，則只需使用淺度監視便可監視到數組內部的元素數據是否發生了變化。

3、自定義指令

vue當中的自定義指令名稱必須以v-開頭，不過咱們在定義這個自定義指令時，名稱省略v-的前綴。如
自定義指令的名稱爲v-red，則定義爲Vue.directive('red',function(el){});該函數當中的形參el表明使用了這個v-red指令的dom元素。示例代碼以下所示：

<script>
    window.onload = function(){
        Vue.directive('red',function(el){
            el.style.color = 'red';
        });
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'qianqian'
            }
        });
    };
</script>
<div id="box">
    <h2 v-red>{{msg}}</h2>
</div>

可接收參數的自定義指令定義爲Vue.directive('red',function(el,binding){});該函數當中的形參el表明使用了這個v-red指令的dom元素，在函數體內部使用binding.value來表明該自定義指令所接收到的參數。示例代碼以下所示：

<script>
    window.onload = function(){
        Vue.directive('red',function(el,binding){
            el.style.color = binding.value;
        });
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'qianqian',
                b:'skyblue'
            }
        });
    };
</script>
<div id="box">
    <h2 v-red="b">{{msg}}</h2>
</div>

當自定義指令接收的參數爲一個對象時，示例代碼以下所示：

<script>
    window.onload = function(){
        Vue.directive('red',function(el,binding){
            el.style.color = binding.value.color;
            el.style.backgroundColor = binding.value.background;
        });
        var vm = new Vue({
            el:'#box',
            data:{
                msg:'qianqian',
                b:'skyblue',
                c:'yellow'
            }
        });
    };
</script>
<div id="box">
    <h2 v-red="{color:b,background:c}">{{msg}}</h2>
</div>