概述

除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令

自定义指令分为全局指令和局部指令

下面分别注册全局指令和局部指令，指令功能：在页面加载时，元素获得焦点

全局指令

每个实例都可以使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app" style="margin-left: 444px">
    <p style="color: red">页面加载时,input元素自动获取焦点</p>
    姓名:<input type="text" v-focus>
</div>
<script type="text/javascript">
    Vue.directive('focus', {
        inserted: function (elements) {
            elements.focus();
        }
    })
    new Vue({
        el: '#app'
    })
</script>

局部指令

只能在注册局部指令的实例中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app" style="margin-left: 444px">
    <p style="color: red">页面加载时,input元素自动获取焦点</p>
    姓名:<input type="text" v-focus>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus();
                }
            }
        }
    })
</script>

img