当页面加载时,该元素将获得焦点 (注意:autofocus
在移动版 Safari 上不工作)。事实上,如果你在打开这个页面后还没有点击过任何内容,那么此时这个输入框就应当处于聚焦状态。此外,你可以单击 Rerun
按钮,输入框将被聚焦。
现在让我们用指令来实现这个功能:
const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
// 当被绑定的元素挂载到 DOM 中时……
mounted(el) {
// 聚焦元素
el.focus()
}
})
如果想注册局部指令,组件中也接受一个 directives
的选项:
directives: {
focus: {
// 指令的定义
mounted(el) {
el.focus()
}
}
}
然后你可以在模板中任何元素上使用新的 v-focus
attribute,如下:
<input v-focus />
指令钩子传递了这些参数:
#el
指令绑定到的元素。这可用于直接操作 DOM。
#binding
包含以下 property 的对象。
instance
:使用指令的组件实例。value
:传递给指令的值。例如,在v-my-directive="1 + 1"
中,该值为2
。oldValue
:先前的值,仅在beforeUpdate
和updated
中可用。无论值是否有更改都可用。arg
:传递给指令的参数(如果有的话)。例如在v-my-directive:foo
中,arg 为"foo"
。modifiers
:包含修饰符(如果有的话) 的对象。例如在v-my-directive.foo.bar
中,修饰符对象为{foo: true,bar: true}
。dir
:一个对象,在注册指令时作为参数传递。例如,在以下指令中1
const app = Vue.createApp({}) app.directive('highlight', { beforeMount(el, binding, vnode) { el.style.background = binding.value } })
<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>
const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // 新增
beforeMount() {},
mounted() {},
beforeUpdate() {}, // 新增
updated() {},
beforeUnmount() {}, // 新增
unmounted() {}
}