vue全局自定义指令

定义 

// 引入Vue  
import Vue from 'vue';  
  
// 定义全局自定义指令 `v-change-color`  
Vue.directive('change-color', {  
  // 当绑定元素插入到DOM中时……  
  inserted: function (el, binding) {  
    // 这里的binding.value是你传递给指令的值  
    // 假设我们传递一个颜色字符串作为指令的值  
    el.style.color = binding.value;  
  },  
  // 如果需要，也可以定义其他钩子函数，比如`update`  
  // update: function (el, binding) {  
  //   // 响应数据变化时的逻辑  
  //   el.style.color = binding.value;  
  // }  
});  
  
// 创建Vue实例  
new Vue({  
  el: '#app',  
  data: {  
    // 示例数据  
  },  
  // 其他选项...  
});

模板使用

<div id="app">  
  <!-- 使用自定义指令，并传递颜色值 -->  
  <p v-change-color="'red'">这段文字的颜色会被改变为红色。</p>  
</div>