指令:以“v-”开头的都是指令,不同的指令实现不同的功能;
注册自定义指令:1、全局注册;2、局部注册
使用时时候需要添加v-
1、局部注册directives
在所对应的组件内注册,
<template>
<div class="ZhiDingYiZhiLing">
<input type="text">
<input type="text" v-focus>
</div>
</template>
<script>
export default {
name: "ZhiDingYiZhiLing",
data() {
return {
}
},
directives: {
//自定义指令,
focus: {
// 会像组件一样有钩子函数
inserted(el) {
//表示被绑定的元素插入父节点的时候调用,bind/update...
/*
el:指令所绑定的元素
binding:对象,包含属性:name:指令名,value:指令绑定值....
* */
el.focus();//获取焦点
}
}
}
}
</script>
2、全局注册
在main.js中编写代码
Vue.directive(“指令名字”,“对象数据也可以是一个指令函数”)
Vue.directive("focus", {
// 会像组件一样有钩子函数
inserted(el) {
//表示被绑定的元素插入父节点的时候调用,bind/update...
/* el:指令所绑定的元素
binding:对象,包含属性:name:指令名,value:指令绑定值....*/
el.focus();//获取焦点
}
})