自定义指令
import Vue from 'vue'// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
Vue.directive('my-color',(el) => {el.style.color = 'red'el.style.backgroundColor = 'yellow'
})
自定义全局指令
1.新增文件
/directives/index.js
import Vue from 'vue'const directives = {myDirective: {bind(el, binding, vnode) {// 当指令绑定到 HTML 元素上时触发.**只调用一次**console.log(el, binding, vnode)},inserted() {// 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**},updated() {// 所在组件的`VNode`更新时调用.},componentUpdated() {// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。},unbind() {// 只调用一次，指令与元素解绑时调用.}}
}export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key])})}
}2. 修改main.js
import Vue from 'vue'
import Directives from './directives'Vue.use(Directives)3. 使用
<div v-my-directive>测试</div>
// or
<div v-my-directive="111">测试</div>页面内定义
<template><div v-my-text="{key:'text',maxval:'1000'}"></div>
</template>
<script>
export default {data(){return {}},directives:{myText:{bind(el,binding,vnode) {},},}
}
</script>.
