Vue.js从入门到项目实践(超值版)
上QQ阅读APP看书,第一时间看更新

3.2.3 钩子函数参数

前面介绍了钩子函数,那么它们有哪些参数呢?下面将对钩子函数的参数进行介绍。

(1)el:指令所绑定的元素,可利用它直接操作DOM。

(2)binding:指令所绑定的值,如下所示。

①name:指令名,不包括“v-”前缀。

②value:指令的绑定值。例如v-my-directive="2+1"中,绑定值为3。

③oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子函数中可用。无论值是否改变都可用。

④expression:字符串形式的指令表达式。例如v-my-directive="2+2"中,表达式为“2+2”。

⑤arg:传给指令的参数,可选项。例如v-my-directive:vue中,参数为“vue”。

⑥modifiers:一个包含修饰符的对象。例如v-my-directive.vue.bar中,修饰符对象为{vue:true,bar:true}。

(3)VNode:Vue编译生成的虚拟节点。

(4)oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子函数中可用。

提示:这些参数中,除了el以外,其他参数都看作是只读参数,即不要对它们进行修改。如果需要跨钩子使用它们,建议使用dataset来实现。

指令的参数值可以是动态的,代码如下:

    <p v-track:left="[dyLeft]">text </p>
       data(){
         return {
           dyLeft : 500
           }
       }