Vue 实现自定义指令

分3步实现一个简单的Vue自定义指令 

1.创建一个存放自定义指令的js文件,写好我们想要的功能(以修改样式为例),具体代码如下:

　　注:css带有横杠( - )的属性应写为驼峰命名

export const abc = (el) => {
  el.style.backgroundColor = 'blue'
}

2.导入自定义指令函数,并配置到directive中

import { abc } from './自定义指令.js'  //导入
directives: { abc },  // 注册

3.在标签内使用自定义指令

<button v-abc style="width:200px;height:200px">button>

最后效果:

  　　

 下面是自定义组件生命周期:

1.bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。 2.inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中) 3.update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。 4.componentUpdated:被绑定元素所在模板完成一次更新周期时调用。 5.unbind:只调用一次，指令与元素解绑时调用