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>