在VueJS的使用中,虽然有着一些除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许自定义指令来实现某些功能
例如:我们在加载页面的时候实现输入框自动获取焦点的功能
当页面加载时,我们还未对输入框进行任何操作,并且输入框已经处于聚焦状态,显示效果如下:
我们可以按照官网的模板来编译JS:
// 注册一个全局自定义指令 "autofocus"
Vue.directive('autofocus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
这是官网定义的全局指令,我们也可定义一个局部指令来使用
directives: {
autofocus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
当JS编译完成后,我们就可以在HTML中加入我们自定义的v-autofocus指令来实现预期的效果
<input type="text" v-autofocus>
在编译JS文件时,一个指令定义对象可以提供如下几个钩子函数,不能随便自己定义
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
每个钩子函数的参数 有el
、binding
、vnode
和 oldVnode ,能力有限,仅做简略笔记,其
具体所指和功能请移步官网 自定义指令
https://cn.vuejs.org/v2/guide/custom-directive.html
输入框自动获取焦点完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script>
/*所有钩子函数都有自动调用的特点,都不需要用户主动去调用*/
Vue.directive("focus",{
inserted:function (el) {
el.focus();
}
});
var app = new Vue({
el: "#app",
data: {}
});
</script>
</html>