封裝vue指令

指令的定義一定要放到 new Vue({}) 代碼之前，否則報錯並且無效；
在注冊指令的時候，不需要加上v- 這個前綴；
在dom元素上使用的時候，必須加上v- 前綴；

自定義指令鈎子函數

一個指令定義對象可以提供如下幾個鈎子函數 (均為可選)：

bind：只調用一次，指令第一次綁定到元素時調用，在這里可以進行一次初始化設置；

inserted：被綁定元素插入父節點時調用；

update：在 bind 之后立即以初始值為參數第一次調用，之后每當綁定值變化時調用，參數為新值與舊值；

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用；

unbind：只調用一次，指令與元素解綁時調用；

鈎子函數的參數

el：指令所綁定的元素，可以用來直接操作 DOM ；
binding：一個對象，包含以下屬性：
　　name：指令名，不包括 v- 前綴；
　　value：指令的綁定值，例如：v-my="2" 中，綁定值為 2；
　　oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鈎子中可用。無論值是否改變都可用；
　　expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"；
　　arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"；
　　modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }；
　　vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情；
　　oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用；

Vue.directive('focus',{
  bind:function(){
    //這個指令的邏輯
    //可以利用this.el來獲取到當前指令所在的元素對象
    this.el.style.color = 'red';
  }
});

////定義一個帶有參數的自定義指令
    Vue.directive('color',{
        params:['colorname'],
        bind:function(){
            //1.0 獲取到colorname的值
            var cname = this.params.colorname;

            //2.0 獲取到el以后給其賦予一個樣式
            this.el.style.color = cname;
        }
    });

    使用：
    <input type="text" v-model="productid"  v-color colorname="blue" > -----其實就是this.el.style.color = cname=colorname= “blue”，

定義組件內自定義指令

<template>
  <div class="hello">
      <div v-test='name'></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
     name:'我是名字',
    }
  },
  directives:{
      test:{
        inserted: function (el, binding) {// 指令的定義
           / /el為綁定元素，可以對其進行dom操作
           console.log(binding) //一個對象，包含很多屬性屬性
        },
        bind: function (el, binding, vnode) {
            el.innerHTML =binding.value
          }
      }
  },
  created:function(){
  },
  mounted:function(){ 
  },
  methods:{
  }
}
</script>

定義全局自定義指令

<div id="box">
    hello<span v-red> welcome</span>
</div>
<script type="text/javascript">
    Vue.directive('red',{
        inserted:function(el){
            el.style.background = 'red';
        }
    });
    var vm = new Vue({
        data:{
        
        },
    }).$mount('#box'); 
</script>

實例

在圖片未完成加載前，用隨機的背景色占位，圖片加載完成后才直接渲染出來。

<div id="app" >
  <div v-img='val.url'  v-for="val in list"></div>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>

<script type="text/javascript">
  Vue.directive('img', {
    inserted:function (el, binding) {
      var color = Math.floor(Math.random()*1000000);
      el.style.backgroundColor = "#" + color; 

      var img = new Image();
      img.src = binding.value;
      img.onload = function(){
        el.style.backgroundImage = 'url('+ binding.value +')'
      }
    }
  });
  new Vue({
    el: '#app',
    data: {
      list:[
        {
          url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan04.jpg'
        },
        {
          url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan03.jpg'
        },
        {
          url:'http://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/Billboard/img/tan04.jpg'
        }
      ]
    }
  });
</script>

 

原文：https://www.jianshu.com/p/dfdfb9e2b501