Vue.js 2.x笔记：指令（4）

Z时代
2024-01-10
分类：综合

vue

　　指令是Vue.js 中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM 行为。

　　Vue.js 本身提供了大量的内置指令来进行对DOM 的操作，同时可以开发自定义指令。

2. 自定义指令

　　在 Vue 2.0 中，代码重用和抽象(reuse and abstraction)的主要是以组件的形式。

　　但是，可能某些情况下，还是需要对普通元素进行一些底层 DOM 访问，这是自定义指令的使用场景之处。

2.1 注册指令

2.1.1 全局自定义指令

　　Vue.directive(id, definition) ：注册全局自定义指令，接收参数id和定义对象。

　　其中，

　　　　id ：指令的唯一标识

　　　　定义对象：指令的相关属性及钩子函数。

<div id="app">
    <input v-focus />
</div>
<script>
    // 注册一个名为 `v-focus` 的全局自定义指令
    Vue.directive('focus', {
        // 当绑定的元素插入到 DOM 时调用此函数……
        inserted: function (el) {
            // 元素调用 focus 获取焦点
            el.focus()
        }
    });
    var vm = new Vue({
        el: "#app"
    });
</script>

2.1.2 局部指令

　　注册局部指令：通过设置组件的 directives 选项。

<div id="app">
    <input v-focus />
</div>
<script>
    var vm = new Vue({
        el: "#app",
        directives: {
            // 注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        }
    });
</script>