在Vue中，自定義指令的生命周期，有5個事件鉤子：1-bind 被綁定， 2-inserted 被插入， 3-update 開始更新， 4-componentUpdated 更新完成，5-unbind 解除綁定。我們可以設置指令在某一個事件發生時的具體行為。
例子如下：
頁面一進后，
在控制臺中設置一個新值：通過控制臺設置的新name
再設置一個新值：通過控制臺設置的新name
最后點擊解綁，解除綁定(解除綁定之后，id="app"的Dom和vm的實例之間解除mvvm的綁定關系)：
代碼：
<h1>自定義指令及其生命周期</h1><div id="app"> <div v-mydirective.modify1.mofify22="mycolor"> {{ name }} </div></div><button onclick="unbindApp()">解綁</button><script> function unbindApp() { vm.$destroy(); } Vue.directive("mydirective",{ bind:function (el, binding, vnode) { //1-被綁定 console.log("1-bind 被綁定"); console.log("el:",el); console.log("binding:",binding); console.log("vnode:",vnode); el.style.color=binding.value; }, inserted:function (el, binding, vnode) { //2-被插入 console.log("2-inserted 被插入"); }, update:function (el, binding, vnode) { //3-更新 console.log("3-update 更新"); }, componentUpdated:function (el, binding, vnode) { //4-更新完成 console.log("4-componentUpdated 更新完成"); }, unbind:function (el, binding, vnode) { //5-解綁 console.log("5-unbind 解綁"); } }); var vm=new Vue({ el:"#app", data:{ mycolor:"blue", name:"mydirective指令" } }); </script>以上這篇對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
