1.指令介绍
(a)方便执行某种逻辑关系;
(b)初始化的有些操作使用自定义指令执行不错;
(c)自定义指令一定避免自带指令的名称;
(d)与组件类似,自定义指令也分全局指令&局部指令,可根据上一篇进行理解;
2.基本写法
注册指令:Vue.directive( 指令名称 ,配置项)
使用指令:<input v-指令名称 />
3.全局组件&局部组件
//全局自定义指令
<div id="app">
<p>页面载入自动获取焦点:</p>
<input v-focus>
</div>
<script>
Vue.directive('focus', { // 注册一个全局自定义指令 v-focus
inserted: function (el) { // 当绑定元素插入到 DOM 中。
el.focus()
}
})
new Vue({
el: '#app'
})
</script>
//局部自定义指令
<div id="app">
<p>页面载入自动获取焦点:</p>
<input v-focus>
</div>
<script>
new Vue({
el: '#app',
directives: { // 注册一个局部的自定义指令 v-focus
focus: {
inserted: function (el) {
el.focus()
}
}
}
})
</script>