9. 自定义指令

9.1 函数写法

Vue

new Vue({
    directives:{
    //big函数何时会被调用?1. 指令与元素成功绑定时(一上来). 2. 指令所在的模板被重新解析时
    big(element,binding){
        element.innerText=binding.value*10
    }
}
})

HTML

<h3>放大十倍后的n: <span v-big="n">{{n}}</span></h3>

9.2 对象写法

Vue

new Vue({
    el: "#root",
    data: {
        n:1
    },
    directives:{
        fbind:{
            //指令与元素成功绑定时(一上来)
            bind(element,binding){
                element.value=binding.value;
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                //自动聚焦
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value=binding.value
            }
        }
    }

HTML

<input type="text" v-fbind="n" placeholder="自动聚焦">

注意: 函数中的参数: element为被绑定的标签的真实DOM节点, binding为自定义指令的参数

9.3 总结

1. 定义语法

   1. 局部指令

      new Vue({
          directives:{指令名:配置对象}
      })
      <!-- 或者-->
      new Vue({
          directives:{指令名:回调函数}
      })

   2. 全局指令

      Vue.directive(指令明,配置对象)
      <!-- 或者-->
      Vue.directive(指令明,回调函数)

2. 配置对象中常用的3个回调

   1. bind: 指令与元素成功绑定时调用
   2. inserted: 指令所在元素被插入页面时调用
   3. update: 指令所在模板结构被重新解析时调用

3. 备注

   1. 指令定义时不加v-,但使用时要加v-
   2. 指令名如果是多个单词,要使用kabab-case命名方式,不要使用camelCase命名