指令是Vue.js中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM行为。
Vue.js本身就提供了大量的内置指令来进行对DOM的操作,
我们也可以开发自定义指令。
主要介绍部分常见指令的使用及场景以及自定义指令的开发和指令相关的参数。
v-bind主要用于动态绑定DOM元素属性(attribute),即元素属性实际的值是由vm实例中的data属性提供的。
v-bind还拥有三种修饰符,分别为.sync、.once、.camel
自定义指令基础
除了内置指令外,Vue.js也提供了方法让我们可以注册自定义指令,以便封装对DOM元素的重复处理行为,提高代码复用率。本小节主要说明了如何创建、注册自定义指令,以及讲述指令的相关属性钩子函数,更深一步地了解指令在Vue.js中起到的作用。
指令的注册
我们可以通过Vue.directive(id, definition) 方法注册一个全局自定义指令,接收参数id和定义对象。id是指令的唯一标识,定义对象则是指令的相关属性及钩子函数。
指令的定义对象
我们在注册指令的同时,可以传入definition定义对象,对指令赋予一些特殊的功能。这个定义对象主要包含三个钩子函数:bind、 update和 unbind。
bind: 只被调用一次,在指令第一次绑定到元素上时调用。
update:指令在bind之后以初始值为参数进行第一次调用,之后每次当绑定值发生变化时调用,update接收到的参数为newValue和oldValue
unbind:指令从元素上解绑时调用,只调用一次。
未完待续