“Vue从入门到实战:自定义指令”的版本间的差异
来自CloudWiki
(创建页面,内容为“==使用背景== vue的内置指令可以满足大部分业务需求。 在某些特殊情况下,如果我们需要对普通的DOM元素进行底层操作,就…”) |
|||
第10行: | 第10行: | ||
Vue.directive(id,[definition]) | 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> |
2021年2月7日 (日) 12:47的版本
使用背景
vue的内置指令可以满足大部分业务需求。
在某些特殊情况下,如果我们需要对普通的DOM元素进行底层操作,就要用到自定义指令了。
自定义指令的注册
Vue提供了两种注册的方式,全局注册和局部注册。
全局注册
全局注册使用Vue.directive()方法来注册一个全局自定义指令。
Vue.directive(id,[definition])
例如,要编写一个让元素自动获取焦点的全局指令。
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
全局指令可以在任何Vue实例的模板中使用。
<div id="app"> <input v-focus> </div> <div id="app2"> <input v-focus> </div>
局部注册
局部注册是在Vue实例的选项对象中使用directive选项进行注册。
new Vue({ el:'#app', directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } }
局部注册的自定义指令只能在该实例绑定的视图中使用。
<div id="app"> <input v-focus> </div>