查看“Vue从入门到实战:自定义指令”的源代码
←
Vue从入门到实战:自定义指令
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==使用背景== vue的内置指令可以满足大部分业务需求。 在某些特殊情况下,如果我们需要对普通的DOM元素进行底层操作,就要用到自定义指令了。 ==自定义指令的注册== Vue提供了两种注册的方式,全局注册和局部注册。 ===全局注册=== 全局注册使用Vue.directive()方法来注册一个全局自定义指令。 Vue.directive(id,[definition]) 例如,要编写一个让元素自动获取焦点的全局指令。 <nowiki> // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })</nowiki> 全局指令可以在任何Vue实例的模板中使用。 <nowiki> <div id="app"> <input v-focus> </div> <div id="app2"> <input v-focus> </div></nowiki> ===局部注册=== 局部注册是在Vue实例的选项对象中使用directive选项进行注册。 <nowiki> new Vue({ el:'#app', directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }</nowiki> 局部注册的自定义指令只能在该实例绑定的视图中使用。 <nowiki> <div id="app"> <input v-focus> </div> </nowiki>
返回至
Vue从入门到实战:自定义指令
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息