注册自定义指令的方式
注册v-focus自动聚焦指令:
<div id="app">
<input type="text" v-focus="msg">
</div>
1. 全局注册
Vue.directive("focus", {
// Vue会对html代码进行解析
// 解析之后,会将解析后的内容重新渲染到页面中
// inserted函数,就会在当前指令所在的元素,被插入到页面中的时候执行
inserted: function (el) {
// el 函数中接收的形参el,其实就是当前指令所在的元素
el.focus()
// console.log(el);
}
})
2. 局部注册
在创建Vue实例的时候,参数对象添加directives属性,在属性中注册指令即可!
全局注册所有的vue实例都能用
局部注册,只能在当前的vue实例中使用
const vm = new Vue({
el: "#app",
data: {
msg: "<h1>hello world</h1>"
},
directives: {
focus: {
inserted(el){
el.focus();
}
}
}
});
自定义指令的钩子函数:
directives: {
focus: {
// 当vue要对当前指令所在的元素进行解析的时候执行
bind(el){
console.log("bind 钩子函数被执行了")
},
// 当当前指令所在的元素被插入到页面中的时候,会执行的函数
inserted(el){
console.log("