自定义指令，经常用于组件的复用和抽象，还有的情况是对普通 DOM 元素进行底层操作。例如：
聚焦输入框
常用钩子函数：
- 初始化的时候调用一次
bind(el指令所绑定的元素, 属性对象binding, Vue编译生成的虚拟节点vNode)- 当被绑定的元素插入到 DOM 中时调用一次
inserted(el, binding, vNode)- 所在组件的 VNode 更新时调用
update(el, binding, vNode)
#实现页面初始化时，聚焦输入框
<template>
<div id="app">
<!-- 使用自定义组件v-focus -->
<input type="text" v-focus />
</div>
</template>
<script>
export default {
name: "App",
// 注册自定义指令
directives: {
// 声明自定义指令v-focus
focus: {
// v-foucs指令的钩子函数
inserted: function (el, binding){
el.focus();
},
},
},
};
</script>
网友评论