自定义指令directive

官网参考：https://cn.vuejs.org/v2/guide/custom-directive.html
https://cn.vuejs.org/v2/api/#directives

局部指令

案例说明：根据"isAddColor"值判断是否改变字体颜色

<template>
  <div>
    <h1 v-change-color="isAddColor?colorValue:''">根据"isAddColor"值判断是否改变字体颜色</h1>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        isAddColor: true,
        colorValue: '#f00'
      }
    },
    directives: {
      /*
      * parem: el:指令所绑定的元素;binding:绑定的相关参数
      * */
      changeColor: function(el,binding){
        el.style.color = binding.value
      }
    }
  }
</script>

全局自定义指令

// 注册一个全局自定义指令 v-change-color

Vue.directive('changeColor',{
  // 被绑定元素插入父节点是调用
  inserted: function (el,binding) {
    el.style.color = binding.value
  }
})