官网: 自定义指令
实例:v-color
注册一个全局自定义指令 `v-color-two`
在 main.js 中:
调用全局自定义指令:
import vue from 'vue'import App from '. / App'Vue.config.productionTip = false Vue.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 文件中:
如果想注册局部指令,组件中也接受一个 directives 的选项:
<template>
<div id="app">
<p v-color-two="'blue'">自定义指令:v-colorTwo</p>
</div>
</template>
注册局部自定义指令 v-color
调用自定义指令 v-color
<script>
export default {
name: 'app',
components: {},
directives: {
// 指令的定义
color: function(el, binding) {
el.style.color = binding.value;
}
},
data() {
return {}
},
mounted: function() {},
methods: {}
}
</script>
页面效果:
<template>
<div id="app">
<p v-color="'red'">自定义指令:v-color</p>
</div>
</template>
来源: http://www.bubuko.com/infodetail-2465430.html