官网：自定义指令
实例：v-color
注册一个全局自定义指令 `v-color-two`
在main.js中：
import Vue from ‘vue‘import App from ‘./App‘Vue.config.productionTip = falseVue.directive(‘colorTwo‘, { ?// 当被绑定的元素插入到 DOM 中时…… ?inserted: function(el, binding) { ???el.style.color = binding.value; ?}});/* eslint-disable no-new */new Vue({ ?el: ‘#app‘, ?template: ‘<App/>‘, ?components: { App }});调用全局自定义指令：
app.vue文件中：
<template> ?<div id="app"> ???<p v-color-two="‘blue‘">自定义指令：v-colorTwo</p> ?</div></template>
如果想注册局部指令，组件中也接受一个 directives 的选项：
注册局部自定义指令 v-color
<script>export default { ?name: ‘app‘, ?components: {}, ?directives: { ???// 指令的定义 ???color: function(el, binding) { ?????el.style.color = binding.value; ???} ?}, ?data() { ???return {} ?}, ?mounted: function() {}, ?methods: {}}</script>调用自定义指令 v-color
<template> ?<div id="app"> ???<p v-color="‘red‘">自定义指令：v-color</p> ?</div></template>
页面效果：
Vue.js自定义指令的用法与实例
原文地址：https://www.cnblogs.com/yingzi1028/p/8306597.html