Vue自定义指令

定义自定义指令

1. 定义局部指令

new Vue({
   // 对象式声明
   directives: {
       //指令名： 配置对象
       // 函数式写法
       big(element, binding) {
           element.innerText = binding.value * 10
       }
   },
 })
 
 //或者
 
 
directives: {
   // 对象式写法
   big: {
       bind(element, binding) {
           element.innerText = binding.value * 100
       },
       inserted(element, binding) {},
       update(element, binding) {
           element.innerText = binding.value * 100
       },
   },
}, 

2. 定义全局指令

// 全局指令 可以给多个vue实例使用 跟filter类似
Vue.directive('big', function (element, binding) {
   console.log('big')
   element.innerText = binding.value * 10
})

//或者

// 对象式写法
Vue.directive('big', {
   bind(element, binding) {
       element.innerText = binding.value * 10
   }
})

配置方式的区别

1. 对象式配置函数的调用
   （1）bind : 指令与元素成功绑定时调用
   （2）inserted ： 指令所在元素被插入页面时调用
   （3）update : 指令所在模板结构被重新解析时调用
   注意：Vue中其他动态属性有变更引起模板重构，同样会调用update函数，函数式声明默认实现了bind与update，若果没有特殊需求需要使用inserted（比如获得焦点，获取上下级元素），可以直接使用函数式声明。可以简化代码。

其他注意事项

1. 指令定义时不加v-，但是使用时要加v-
2. 指令名如果是多个单词，要使用kebab-case命名当时（用-作为单词连接符），不要使用驼峰命名
3. 指令名如果是多个单词，在声明时要加上引号声明为字符串才能正确解析
   使用如下：

<!-- 使用自定义指令v-more-big 自定义指令可以实现动态更新 -->
<h4>放大100倍之后的数据是：<span v-more-big="num"></span></h4>

directives: {
    // 对象式写法
    'more-big': {
        bind(element, binding) {
            element.innerText = binding.value * 100
        },
        inserted(element, binding) {
            element.innerText = binding.value * 100
        },
        update(element, binding) {
            element.innerText = binding.value * 100
        },
    },
},