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

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

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

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

例子如下：

頁面一進(jìn)后，

在控制臺(tái)中設(shè)置一個(gè)新值：通過控制臺(tái)設(shè)置的新name

再設(shè)置一個(gè)新值：通過控制臺(tái)設(shè)置的新name

最后點(diǎn)擊解綁，解除綁定(解除綁定之后，id="app"的Dom和vm的實(shí)例之間解除mvvm的綁定關(guān)系)：

代碼：

<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和指令的生命周期介紹就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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