vue directive自定义指令
时间: 2023-11-07 16:04:14 浏览: 139
vue自定义指令实现方法详解
5星 · 资源好评率100%
vue.directive是Vue.js中用来注册自定义指令的方法。通过注册自定义指令,我们可以在Vue应用中对普通DOM元素进行底层操作,并扩展和补充Vue内置的指令。自定义指令可以用于定义任何DOM操作,并且可以复用。
在Vue中,可以通过全局注册和局部注册两种方式来定义自定义指令。
全局注册指令的方式是通过Vue.directive方法来实现,第一个参数是自定义指令的名称,注意不需要加v-前缀,Vue会自动加上。第二个参数可以是一个对象或者一个指令函数。
局部注册指令的方式是在Vue组件的directives选项中定义指令。指令选项的值可以是一个对象或者一个指令函数。
<<引用>>
例如,我们可以通过以下方式全局注册一个名为"focus"的自定义指令:
```
Vue.directive("focus", {
inserted(el) {
el.focus();
}
})
```
在模板中使用该指令:
```
<input type="text" v-focus>
```
这样,在页面渲染后,该输入框会自动获取焦点。
<<引用>>
另外,我们也可以通过局部注册的方式定义自定义指令。
在组件的directives选项中定义指令:
```
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
```
在模板中使用该指令:
```
<input type="text" v-focus>
```
这样,在该组件中的输入框会自动获取焦点。
阅读全文