對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹

更新時間：2018年08月30日 09:37:44 作者：xuanwuziyou

今天小編就為大家分享一篇對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在Vue中，自定義指令的生命周期，有5個事件鉤子：1-bind 被綁定， 2-inserted 被插入， 3-update 開始更新， 4-componentUpdated 更新完成，5-unbind 解除綁定。我們可以設置指令在某一個事件發(fā)生時的具體行為。

例子如下：

頁面一進后，

在控制臺中設置一個新值：通過控制臺設置的新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和指令的生命周期介紹就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue操作select獲取option值方式
文章介紹了在Vue中操作select元素并實時獲取選中的option值的方法,通過使用`@change`事件并傳遞參數(shù),可以實現(xiàn)動態(tài)獲取選中的值
2025-01-01
vue實現(xiàn)pdf導出解決生成canvas模糊等問題(推薦)
最近公司項目需要，利用vue實現(xiàn)pdf導出，從而保存到本地打印出來，說起來好像也很容易，具體要怎么實現(xiàn)呢？下面小編給大家?guī)砹藇ue實現(xiàn)pdf導出解決生成canvas模糊等問題，需要的朋友參考下吧
2018-10-10
vue實現(xiàn)路由懶加載的3種方法示例
這篇文章主要給大家介紹了關于vue實現(xiàn)路由懶加載的3種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
基于vue實現(xiàn)pdf預覽功能
隨著互聯(lián)網(wǎng)的發(fā)展,PDF?文件在信息交流和文檔分享中起著重要的作用,通過在?Vue?組件中實現(xiàn)?PDF?預覽功能,我們可以為用戶提供便捷的內容閱讀體驗,下面我們就來看看具體實現(xiàn)方法吧
2023-08-08
利用vue.js實現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實現(xiàn)被選中狀態(tài)的改變方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue 如何打開接口返回的HTML文件
本文主要介紹了vue 如何打開接口返回的HTML文件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
vue實現(xiàn)購物車案例
這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
一文詳解Vue3組件通信輕松玩轉復雜數(shù)據(jù)流
在大型Vue項目中,組件通信如同神經網(wǎng)絡般貫穿整個應用,這篇文章將為大家詳細介紹一下Vue3中的組件通信方式,有需要的小伙伴可以了解下
2025-02-02
詳解Vue3的組合式API中如何使用computed屬性
在Vue中，computed屬性是一種計算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動態(tài)計算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧
2023-06-06