VUE复习笔记20（自定义指令）

简介

除了核心功能中我们可以直接使用的 v-show和v-model等，我们还可以进行注册自定义指令。
在vue2.0中，代码的复用和抽象的主要形式就是组件。
然而有的时候，我们还是需要对底层的dom元素进行操作。这时候就会需要用到自定义指令。

举例如下：
当页面加载完毕时，输入框自动获得焦点，注意：autofocus在移动版的safari上不工作。事实上，只要在你打开页面后还没有点击任何内容的情况下，这个输入框就应该是处于聚焦状态的。我们现在尝试使用指令来实现这个功能。

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，也可以在vue 的选项中新添加一项 directives：

<template>
    <div class="test">
        <h2>vue practise</h2>
        <input v-focus type="text" placeholder="hahahha">
    </div>
</template>

<script>
    export default{
        data(){
            return{

            }
        },
        directives:{
            focus:{
                inserted(el){
                    el.focus();
                }
            }
        }
    }
</script>

这里是在指令 directives选项中设置指令的名称，我们这里语义化的设置为focus，在focus中执行方法。所传入的el参数就是当前的元素。
然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

<input v-focus>

钩子函数

在 directives 指令选项中，可以定义如下几个钩子函数：
1.bind:只能够调用一次，在指令刚被绑定到元素上的时候开始滴啊用，我们也可以用它在进行一次性的初始化设置。
2.inserted:被绑定的元素插入父节点的时候调用，只是保证父节点还存在，但是不一定已经被插入文档中了。
3.update:所在的组件vnode更新时调用，但是可能发现在其子vnode更新之前，指令的值可能发生改变，但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
4.componentUpdate:指令所在的组件和他的子组件全部更新之后执行。
5.unbind:指定也只会执行一次，指令和他的元素解绑的时候调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数的参数

指令的钩子函数会被传入以下的参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了el之外，其他参数都是只读的，一般不建议修改。如果需要在钩子函数之间共享数据，建议通过 dataset 来修改。