Vue.js指令

指令是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:指令从元素上解绑时调用,只调用一次。

未完待续

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值