自定义指令

除了Vue的内置指令为，vue还支持自定义指令

简单的自定义指令

如下所示：

在directives中创建big方法，传入两个参数：

1 element: 绑定的Dom元素

2 binding: 绑定的对象，其value属性即为绑定变量的值

<div id="root">
  <h1 v-big="n" ref="a"></h1>
  <button @click="n++">点我+1</button>
</div>
<script>
  const vm = new Vue({
    el: "#root",
    data: {
      n:1
    },
    directives:{
      big(element, binding){
        console.log(element);
        console.log(binding);
      }
    }
  });
</script>

常规写法

如下所示：

在directives中创建fbind对象，可指定三个方法：

1 bind() 在指令与元素绑定成功时执行
2 insert() 在元素在插入页面时执行
3 update() 在模板重解析时执行

<div id="root">
    <button @click="n++">点我n+1</button>
    <input type="text" v-fbind:value="n"><br><br>
</div>
<script>
    const vm = 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
                }
            }
        }
    })
</script>

注意事项

1.指令相关的函数,所有this都指向window

2.Vue不推荐使用驼峰命名,最好用-相连,指令函数名用字符串，如下：

directives:{
    "other-people"(element, binding){
        element.value = "不要驼峰命名"
    }
}