Vue.js 笔记07

关键词：自定义指令

Vue内置的指令很丰富，比如v-if、v-show等，但在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令。

基本用法

自定义指令的注册方式和组件很像，也分为全局注册和局部注册，例如注册一个v-focus指令，用于在<input>、<textarea>元素初始化时自动获得焦点：

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
    <script>
        Vue.directive('focus',{
            inserted(el){
                el.focus()
            }
        })
        const app = new Vue({
            el:'#app'
        })
    </script>
</body>

此时，页面的输入框会自动取得焦点。

在上述注册指令的代码中，inserted其实是一个钩子函数，自定义指令的选项是由几个钩子函数组成的，每个都是可选的：

bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
inserted：被绑定元素插入父节点时调用
update：被绑定元素所在的模板更新时调用，不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated：被绑定元素所在模板完成一次更新周期时调用
unbind：只绑定一次，指令与元素解绑时调用

还是在上述的注册指令代码中，inserted函数中使用了一个 el 参数，这些参数也是可选的：

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

基本用法

Comments 1 条评论

取消回复