快捷導(dǎo)航

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

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

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

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

例子如下：

頁(yè)面一進(jìn)后，

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

再設(shè)置一個(gè)新值：通過(guò)控制臺(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>

以上這篇對(duì)Vue2 自定義全局指令Vue.directive和指令的生命周期介紹就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選
這篇文章主要介紹了Vue?elementui如何實(shí)現(xiàn)表格selection的默認(rèn)勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue3 與 vue2 優(yōu)點(diǎn)對(duì)比匯總
隨著用vue3 的開(kāi)發(fā)者越來(lái)越多，其必定是又她一定的有帶你，接下來(lái)這篇文章小編就為大家介紹vue3 對(duì)比 vue2 有什么優(yōu)點(diǎn)？感興趣的小伙伴請(qǐng)跟小編一起閱讀下文吧
2021-09-09
Vue組件之Tooltip的示例代碼
這篇文章主要介紹了Vue組件之Tooltip的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能
這篇文章主要為大家詳細(xì)介紹了VUE實(shí)現(xiàn)圖片驗(yàn)證碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動(dòng)態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
利用report分析vue項(xiàng)目中各文件大小
這篇文章主要介紹了利用report分析vue項(xiàng)目中各文件大小問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue.js路由跳轉(zhuǎn)詳解
這篇文章主要為大家詳細(xì)介紹了vue.js路由跳轉(zhuǎn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動(dòng)態(tài)注冊(cè)路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue3中Cesium地圖初始化及地圖控件配置方法
本文中，我們主要介紹Cesium在Vue3運(yùn)行環(huán)境的配置，及Cesium實(shí)例中控件的顯隱設(shè)置，本項(xiàng)目基于pnpm安裝，也可使用其他包管理器進(jìn)行安裝，如npm或yarn，本文通過(guò)示例代碼對(duì)vue初始化Cesium地圖相關(guān)知識(shí)介紹的非常詳細(xì)，需要的朋友參考下吧
2023-07-07
談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-08-08