Vue自定义指令写法与个人理解

2023-08-29 06:01:04 146

什么是Vue指令?

指令是一种可以附加到DOM元素的微命令(tinycommands).它们通常以"v-"作为前缀,以方便Vue知道你在使用一种特殊的标记,从而确保语法的一致性.如果你需要对HTML元素的低级别(low-level)访问来控制一些行为,它们通常很有用.

如果你正在使用Vue(或者Angular),你可能已经很熟悉其中的一些指令,如:v-if,v-else等等.我们将从了解一些基础开始,但是如果你更愿意直接看例子,请直接往下滚动.这些例子也能很好的让你理解这些概念.

以下是一些指令的使用方法,以及对应的例子片段.这些例子不是规定性的,它们只是一些用例.这里的"例子"实际上是"指令".

v-example:这将实例化一个指令,但不接受任何参数.虽然不带参数的指令,在使用的过程中并不是很灵活,但是你仍然可以通过这种类型的指令对DOM元素做一些操作.

v-example="value":这将传递一个值给指令,并且该指令根据该值计算出要做的操作.

IwillshowupifstateExampleistrue

v-example="'string'":这将让你把'string'作为一个表达式.

thisisanexampleofastringinsometext'">

v-example:arg="value":这允许我们传入一个参数给指令.下面的例子中,我们绑定到一个类,将其样式化为一个对象,单独存储.

v-example:arg.modifier="value":这允许我们使用修饰语.下面的例子中,允许我们在点击事件时,调用preventDefault().

理解Vue自定义指令

既然我们已经大致过了一遍所有的我们所用过的指令类型方法,让我们想一想我们如何通过自己编写的自定义指令来实现它们?使用自定义指令的一个很好的例子是滚动事件,让我们看看如何实现它.

首先,最基本的是如何创建一个全局的指令.(是的,它什么也不做.)仅仅是创建了一个指令.

Vue.directive('tack');

HTML:

Thiselementhasadirectiveonit

我们有几个可用的钩子,每个钩子可以选择一些参数.钩子如下:

bind:一旦指令附加到元素时触发
inserted:一旦元素被添加到父元素时触发
update:每当元素本身更新(但是子元素还未更新)时触发
componentUpdate:每单组件和子组件被更新时触发
unbind:一旦指令被移除时触发

就个人而言,bind和update也许是这五个里面最有用的两个钩子了.
每个钩子都有el,binding,和vnode参数可用.update和componentUpdated钩子还暴露了oldVnode,以区分传递的旧值和较新的值.

el,跟你所期待的一样,就是所绑定的元素.binding是一个保护传入钩子的参数的对象.有很多可用的参数,包括name,value,oldValue,expression,arguments,arg及修饰语.vnode有一个更不寻常的用例,它可用于你需要直接引用到虚拟DOM中的节点.binding和vnode都应该被视为只读.

绑定一个自定义指令

既然我们已经知道了这一点,就可以开始研究如何在实际中使用一个自定义指令.让我们完善刚才所创建的第一个指令,让它变得有用:

Vue.directive('tack',{
bind(el,binding,vnode){
el.style.position='fixed'
}
});

在HTML元素中:

Iwillnowbetackedontothepage

毫无疑问,它完全可以按照我们所希望的工作.但是它还不够灵活,如果我们可以传入一个值,然后直接更新或者重用这个指令就好了.例如,我们想为这个元素指定一个值,表示这个元素离顶部多远(多少个像素),我们可以这样写(在CODEPEN上查看):

//JS
Vue.directive('tack',{
bind(el,binding,vnode){
el.style.position='fixed';
el.style.top=binding.value+'px';
}
});

//HTML

Scrolldownthepage
Stickme70pxfromthetopofthepage

假设我们想要区分从顶部或者左侧偏移70px,我们可以通过传递一个参数来做到这一点(在CODEPEN上查看):

当然,你可以同时传入不止一个值.你可以像使用标准指令一样简单的使用自定义指令(在CODEPEN上查看):

基于我们的自定义指令,我们可以创建和修改方法,从而创建更为复杂的自定义指令.这里,我们将做一个waypoints-like例子,用少量的代码实现特定滚动事件触发的动画效果(在CODEPEN上查看):

Vue自定义指令写法与个人理解

热门推荐

随机推荐