16.自定义指令

一、定义语法:

(1).局部指令:

//第一种
new Vue({

directives:{指令名:配置对象}

}）

//举例
<div>
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <h2>放大10倍后的n值是：<span v-big="n"></span></h2>
</div>
<scrpit>
    directives:{
      //big函数何时被调用？1.指令与元素成功绑定时;2.指令所在模板重新解析时
      big(element,binding) {
        console.log(big,this)
        element.innerText=binding.value*10
      }
}
</scrpit>

//第二种
new Vue({

directives:{指令名:回调函数}

}）
//举例
<scrpit>
    directives:{
      fbind:{
        //指令所在元素成功绑定时：

        bind(element,binding){
          element.value= binding.value

        },
        //指令所在元素被插入页面时：
        inserted(element,binding){
          element.focus()
        },
        //指令所在元素被重新解析时：
        update(element,binding){
          element.value= binding.value
        }
      }
}
</scrpit>

(2).全局指令:

Vue.directive(指令名,配置对象）

或

Vue.directive(指令名,回调函数)

Vue. directives('fbind',{
        //指令所在元素成功绑定时：

        bind(element,binding){
          element.value= binding.value

        },
        //指令所在元素被插入页面时：
        inserted(element,binding){
          element.focus()
        },
        //指令所在元素被重新解析时：
        update(element,binding){
          element.value= binding.value
        }
      })

二、配置对象中常用的3个回调:

(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用;

(3).update:指令所在模板结构被重新解析时调用；

三、备注:

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

  <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>


'big-number'(element,binding) {
        element.innerText=binding.value*10
    }