vue自定義指令

一、自定義指令是用來操作dom的，盡管vue推崇數據驅動試圖的理念，但並非所又情況都適合數據驅動。自定義指令就是一種有效的補充和擴展，不僅僅可用於定義任何dom操作，並且是可以復用的‘

       比如谷歌圖片的加載做的非常優雅，在圖片未完成加載前，用隨機的背景色占位背景圖片加載晚成后才直接渲染出來。用自定義只能怪可以非常方便的實現這個功能。

//Vue.directive(指令名，指令要做的操作)
Vue.directive("img",{
    inserted:function(el,binding){
                 var color=Math.floor(Math.random()*1000);
                  el.style.bagckgroundColor="#"+color;
                  var img=new Image();
                   img.src=binding.value;//獲取傳給指令的值
                  img.onload=function(){
                     el.style.bagkgroundImage='url('+bingding.value+')'

}
}

}
)

 

 　　　　自定義指令的第二用處是用於集成第三方插件。在前端開發領域，以前的通用框架是jQuery,jQuery以及基於jQuery的通用組件形成了一個龐大的生產系統。現在的通用框架是vue等，每個框架都需要基於自身構建新的組件庫。自定義指令好就好在：原先的那些通用的組件，無論是純js的也好，基於jQuery的也好，都可以直接拿來吸收，不需要改造或重構。比如寫文檔通常會用到的highlight.js，我們可以直接將其封裝為一個自定義指令。

 

 

 

 

二、vue自定義指令包括4部分：指令名稱、參數、修飾符、表達式

v-dire:arg.e="expression"

指令名稱:參數.修飾符="表達式"

三、自定義指令有全局注冊指令、局部注冊指令。全局注冊指令又分函數注冊形式、對象注冊形式。

全局注冊指令，使用Vue的directive函數實現

//函數注冊形式示例:
Vue.directive('dire',function(el,bindings,vnode){

    console.log("自定義指令");

});

參數說明：

dire 指令名稱

el 當前綁定的dom元素

bindings 指令解析后的結果，包括指令名稱、參數、表達式等，bindings.vaule返回的是表達式

vnode 對應的虛擬dom
對象注冊形式示例:

Vue.directive('dire',{

    bind:function(el,bindings,vnode){

        console.log("bind--最先執行的鈎子函數");

    },

    inserted:function(el,bindings,vnode){

        console.log("inserted--在bind后面執行");

    },

    update:function(el,bindings,vnode){

        console.log("update--綁定組件更新前觸發執行");

    },

    componentUpdated:function(el,bindings,vnode){

        console.log("componentUpdated--綁定組件更新后觸發執行");

    },

    unbind:function(el,bindings,vnode){

        console.log("componentUpdated--組件銷毀前觸發執行");

    }

});

 

局部注冊指令示例：

var vm = new Vue({

    el:'#app',

    data:{

        x:0
    },

    directives:{ //指令局部注冊

        dire:{  //dire指令名稱

            bind:function(el,bindings,vnode){

                console.log("bind--最先執行的鈎子函數");

            },

            inserted:function(el,bindings,vnode){

                console.log("inserted--在bind后面執行");

            },

            update:function(el,bindings,vnode){

                console.log("update--綁定組件更新前觸發執行");

            },

            componentUpdated:function(el,bindings,vnode){

                console.log("componentUpdated--綁定組件更新后觸發執行");

            },

            unbind:function(el,bindings,vnode){

                console.log("componentUpdated--組件銷毀前觸發執行");

            }

        }

    }

});