0三、Vue.js---自定義指令

時間 2019-11-18

原文原文鏈接

自定義指令的簡介(官網)：除了核心功能默認內置的指令，Vue 也容許註冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的狀況下，你仍然須要對普通 DOM 元素進行底層操做，這時候就會用到自定義指令。javascript

自定義指令分爲局部指令和全局指令。顧名思義，它倆的做用範圍不一樣。html

注意：1. 自定義指令命名時使用駝峯命名規則。在使用時，遇到大寫字母須要將大寫改成小寫並在該字母前加「-」。如：myVue==>my-vue。2. 使用自定義指令時，須要在名字前面加「v-」。如：myVue==>v-my-vue。vue

1、自定義指令

一、全局指令

自定義全局指令的關鍵字是 Vue.directive，具體使用方法見代碼及註釋：java

js部分代碼：app

window.onload = function (){
// Vue.directive(id,[opt])
//    會在Vue中註冊一個新的指令
//          新指令的名稱 就是  在定義時所指定的 id
//          自定義的指令  在註冊到Vue中時 會被默認的增長一個前綴  v-

  Vue.directive("myVue",{        
      // 生命週期的鉤子函數
      // 建立
      bind(){
          // 指令第一次綁定到元素上時，所執行的方法 ， 只會被調用一次
          console.log("bind");
      },
      // 寫入
      inserted(){
          // 被該指令綁定的元素  寫入到 DOM 結構中
          console.log("inserted");
      },
      // 更新
      update(){
          // 被綁定的元素 在模板中 發生更新 會調用該方法
          alert("update");
      },
      // 模板更新
      componentUpdate(){
          // 被綁定的元素  在模板完成一次更新時 會被調用
          alert("componentUpdate");
      },
      // 銷燬
      unbind(){
          // 解除綁定的時候調用
          alert("unbind");
      }
  });

  new Vue({
    el:"#app"
  });
}

html部分代碼：函數

<body>
  <div id="app">
    <!-- 定義是的指令名是myVue,這裏使用時是 v-my-vue -->
    <div v-my-vue></div>
  </div>
</body>

二、局部指令

自定義全局指令的關鍵字是 directives，具體使用方法見代碼及註釋：測試

js部分代碼：spa

window.onload = function (){
  new Vue({
    el:"#app",
    directives:{
        //指令名稱，這裏能夠定義多個指令。
        // 注意指令的有效範圍
        myVue:{
            bind(){
                console.log("bind");
            },
            inserted(){
                console.log("inserted");
            },
            update(){
                console.log("update")
            },
            componentUpdate(){
                console.log("componentUpdate")
            },
            unbind(){
                console.log("unbind")
            }
        }
    }
  });
}

html部分代碼：.net

<body>
  <div id="app">
    <!-- 定義是的指令名是myVue,這裏使用時是 v-my-vue -->
    <div v-my-vue></div>
  </div>
</body>

經過上述自定義指令，結合鉤子（生命週期）函數，咱們能夠對 DOM 對象進行底層操做。可是，因爲考慮到上述代碼都比較多，並且咱們對DOM操做基本上是在元素建立（bind）和更新（update）兩個階段。因此，官網也提供了自定義指令的簡寫方式。code

2、簡寫方式

全局方式的簡寫：Vue.directive( 指令名 , 函數 )。第二個參數（函數）會在指令 bind 和 update 的時候調用；

局部指令的簡寫：directives:{ 指令名 : 函數 }。也是在指令 bind 和 update 的時候調用函數。具體見代碼部分：

js部分代碼：

// fun 只會在 指令 的bind  和 update 調用

// 自定義全局指令簡寫
Vue.directive("hello",function(){
    console.log("調用全局指令");
});

new Vue({
    el:"#app",
    data:{
        msg:"消息"
    },
    //自定義局部指令簡寫
    directives:{
        world:function(){
            console.log("局部指令");
        }
    }
});

html部分代碼：

<body>
    <div id="app">
        <div v-hello>{{msg}}</div>
        <div v-world>{{msg}}</div>
        <input type="text" v-model="msg">
    </div>
</body>

經過這種簡寫方式，代碼量確實少了不少。

3、參數傳遞

上面介紹的自定義指令都是不帶參數的。

vue.js 的指令參數是以" : " 爲關鍵字；

vue.js 的修飾符是以 " . " 爲關鍵字。（具體可見《Vue.js---指令》）。

自定義指令的傳參方式也是如此。自定義指令簡寫時的function能夠傳兩個參數，第一個是 el，表示的是當前指指令所綁定元素的 DOM 對象；第二個是 args，args的具體內容能夠根據下述代碼打印出來研究一下。

js段代碼部分：

new Vue({
    el:"#app",
    data:{
        msg:"消息",
        nums:[1,2,3,4]
    },
    // 自定義局部指令
    directives:{
        // 第一個自定義指令
        vueOne:function(el,args){
            // el 所指的是 當前指指令 所綁定元素的 DOM 對象
            // 感興趣的能夠打印出el看看
            // console.log(el);
            // args 是參數結合
            // console.log(args);
            // el.innerHTML = "測試消息";
            el.innerHTML = args.value;                
            // Vue 幫開發者 省略對於DOM的操做
            el.style.color = "red";
        },
        // 第二個自定義指令
        math:function(el,args){
            // 打印args在控制檯看看結果
            // console.log(args);
            let temp;
            //傳的參數是 sum 時作加法操做
            if(args.arg=="sum"){
              temp = 0;
              for (let i = 0; i < args.value.length; i++) {
                temp = temp+(args.value[i]);
              }
            }
            // 傳遞的參數是 mul 時作乘法操做
            if(args.arg=="mul"){
              temp = 1;
              for (let i = 0; i < args.value.length; i++) {
                temp = temp*(args.value[i]);
              }
            }
            el.innerHTML = temp;
        },
        aaa:function(el,args){
          // 當指令 v-aaa每攜帶一個修飾符，args中的modifiers(對象)會多個以key爲該修飾符 值爲true的元素
          console.log(args);
          console.log(args.modifiers.f1);//攜帶修飾符f1時，打印true,不然打印false
          console.log(args.modifiers.f3);//攜帶修飾符f2時，打印true,不然打印false
        }
    }
});

html代碼部分：

<body>
    <div id="app">
        <!-- <div v-world></div> -->
        <div v-vue-one="msg"></div>
        <input type="text" v-model="msg">
        <!-- v-math 指令傳參 sum/mul -->
        <div v-math:sum="nums"></div>
        <div v-math:mul="nums"></div>
        <!-- 自定義指令v-aaa攜帶兩個修飾符 -->
        <div v-aaa.f1.f2></div>
    </div>
</body>

以前看到過使用自定義指令攜帶修飾的方式作表單校驗。感興趣的能夠找找看。

至此，完畢，感謝您的閱讀。