深入解析Vue.directive 自定義指令

前端攻城小牛啊發表於2019-04-01
Vue

這篇文章主要介紹了Vue.directive 自定義指令，文中通過示例程式碼介紹的非常詳細，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

深入解析Vue.directive 自定義指令

一、什麼是全域性API？

全域性API並不在構造器裡，而是先宣告全域性變數或者直接在Vue上定義一些新功能，Vue內建了一些全域性API，比如我們今天要學習的指令Vue.directive。說的簡單些就是，在構造器外部用Vue提供給我們的API函式來定義新的功能。

二、Vue.directive自定義指令

我們在第一季就學習了內部指令，我們也可以定義一些屬於自己的指令，比如我們要定義一個v-jspang的指令，作用就是讓文字變成綠色。 在自定義指令前我們寫一個小功能，在頁面上有一個數字為10，數字的下面有一個按鈕，我們每點選一次按鈕後，數字加1.

三、自定義指令中傳遞的三個引數

el: 指令所繫結的元素，可以用來直接操作DOM。 binding: 一個物件，包含指令的很多資訊。 vnode: Vue編譯生成的虛擬節點。

四、自定義指令的生命週期

自定義指令有五個生命週期（也叫鉤子函式），分別是 bind,inserted,update,componentUpdated,unbind bind:只呼叫一次，指令第一次繫結到元素時呼叫，用這個鉤子函式可以定義一個繫結時執行一次的初始化動作。 inserted:被繫結元素插入父節點時呼叫（父節點存在即可呼叫，不必存在於document中）。 update:被繫結於元素所在的模板更新時呼叫，而無論繫結值是否變化。通過比較更新前後的繫結值，可以忽略不必要的模板更新。

✧在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力

componentUpdated:被繫結元素所在模板完成一次更新週期時呼叫。 unbind:只呼叫一次，指令與元素解綁時呼叫。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="../assets/js/vue.js"></script>
  <title>vue.directive 自定義指令</title>
</head>
<body>
  <h1>vue.directive 自定義指令</h1>
  <hr>
  <div id="app">
    <div v-jspang="color" id="aaa">
      {{num}}
    </div>
    <p>
      <button @click='jia'>加分</button>
    </p>
    <p>
      <button onclick='unbind()'>解綁</button>
    </p>
  </div>
  
  <script type="text/javascript">
  
    function unbind(){
      app.$destroy();
    }
  
    //自定義指令
    Vue.directive('jspang',{
      bind:function(el,binding,vnode){//被繫結
        /**
            var s=JSON.stringify;
            el.innerHTML = 
              'name:'    + s(binding.name) +'<br>' + 
              'value:'    + s(binding.value) +'<br>' + 
              'expression:' + s(binding.expression) +'<br>' ;
        **/
        el.style='color:'+binding.value;
          
  
        console.log('1 - bind');
      },
      inserted:function(){//繫結到節點
        console.log('2 - inserted');
      },
      update:function(){//元件更新
        console.log('3 - update');
      },
      componentUpdated:function(){//元件更新完成
        console.log('4 - componentUpdated');
      },
      unbind:function(){//解綁
        console.log('5 - unbind');
      }
 // ✧在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
    })
  
    var app=new Vue({
      el:'#app',
      data:{
        color:'green',
        num:10
      },
      methods:{
        jia:function(){
          this.num++;
        }
      }
    })
  </script>
</body>
</html>
複製程式碼

bind:function(){//被繫結
   console.log('1 - bind');
},
inserted:function(){//繫結到節點
   console.log('2 - inserted');
},
update:function(){//元件更新
   console.log('3 - update');
},
componentUpdated:function(){//元件更新完成
   console.log('4 - componentUpdated');
},
unbind:function(){//解綁
   console.log('1 - bind');
}
複製程式碼

結語

感謝您的觀看，如有不足之處，歡迎批評指正。 獲取資料??? 本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：???619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

相關文章