vue自定义指令directive实例详解

发布时间：2020-12-17 02:38:03 所属栏目：百科来源：网络整理

导读：下面给大家介绍vue自定义指令directive，具体内容如下所示： vue除了一些核心的内部定义的指令（ v-model,v-if,v-for,v-show ）外，vue也允许用户注册自己的一些功能性的指令，有时候你实在是要对Dom操作，这个时候是自定义指令最合适的了。来直接看例子：

下面给大家介绍vue自定义指令directive，具体内容如下所示：

vue除了一些核心的内部定义的指令（v-model,v-if,v-for,v-show）外，vue也允许用户注册自己的一些功能性的指令，有时候你实在是要对Dom操作，这个时候是自定义指令最合适的了。

来直接看例子：当页面加载时使得元素获得焦点（autofocus 在移动版 Safari 是不支持的），就是当页面加载好了，不做任何的操作使得表单自动获得焦点，光标自动在某个表单上代码如下：

如果想注册局部指令，组件中也接受一个 directives 的选项：

export default { directives: { // 指令的定义 zsqfocus: { inserted: function (el) { // 获得焦点 el.focus() } } } }

然后你可以在模板中任何组件上使用新的 v-zsqfocus 属性，如下：

//调用

举了一个跟官网一样的例子，directives跟methods，mounted等是一个级别的可以同时使用。

PS：下面看下vue之自定义指令directive的实例代码，具体代码如下所示：

总结

以上所述是小编给大家介绍的vue自定义指令directive实例详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!