Vue.js 笔记07

发布于 2020-05-29  1029 次阅读


关键词:自定义指令

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钩子中可使用

届ける言葉を今は育ててる
最后更新于 2020-05-29