Vue基础篇-自定义指令

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>