「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」。

1. 一些内置指令

1. v-text

v-text用来向其所在的节点中渲染文本内容。

与插值语法{{xxx}}不同的是，v-text会替换掉节点中原来的内容。

<div v-text="name"></div>
复制代码

2. v-html

v-html用来向其所在的节点中渲染包含HTML结构的内容。

与插值语法{{xxx}}不同的是，v-html会替换掉节点中原来的内容，并且v-html可以识别HTML结构。

v-html有安全性问题，动态渲染HTML结构非常危险，要在可信的内容上使用v-html。

3. v-cloak

v-cloak是一个特殊属性，没有值，Vue 实例创建完毕并接管容器后，会删掉v-cloak属性。

[v-cloak] {
    display: none;
}
复制代码

<div v-cloak>
    {{ message }}
</div>
复制代码

如上使用时，未被编译的标签，不会被显示。

4. v-once

v-once所在节点在初次动态渲染后，就视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

例如，如下代码，在n第一次被渲染后，后面的数据变化不会影响到这个标签了。

<h2 v-once>n值是:{{n}}</h2>
复制代码

5. v-pre

Vue 会跳过具有v-pre指令的标签的编译，可以优化性能。

例如，如下标签会在编译是被跳过。

<h2 v-pre>Hello World!</h2>
复制代码

2. 自定义指令

1. 定义

定义一个局部自定义指令，一个指令定义对象可以提供如下几个钩子函数：

bind
inserted
update

new Vue({
    directives: {
        fbind: {
            // 只调用一次，指令第一次绑定到元素时调用
            bind(element, binding) {
                console.log(element, binding);
                element.value = binding.value;
            },
            // 指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus();
            },
            // 指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value;
            },
        },
    },
});
复制代码

每个钩子函数依次接收以下参数：

el：指令所绑定的元素，真实 DOM，可直接操作。
binding：一个对象，包含以下属性：
- name：指令名，不包括v-前缀。
- value：指令的绑定值。
- oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。
- arg：传给指令的参数，可选。
- modifiers：一个包含修饰符的对象。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update和componentUpdated钩子中可用。

注意，定义指令时，指令名称不用加v-，但使用时需要加v-。

另外，指令命名要用小写、短横线隔开形式。

2. 使用

使用定义的自定义指令：

<button @click="n++">add</button>
<input type="text" v-fbind:value="n" />
复制代码

3. 定义的简写方式

在很多时候，bind和update触发相同行为，不关心其它的钩子。可以简写为一个函数：

new Vue({
    directives: {
        fbind(element, binding) {
            element.value = binding.value;
        },
    },
});
复制代码

4. 全局自定义指令

Vue.directive('fbind', {
    bind(element, binding) {
        element.value = binding.value;
    },
    inserted(element, binding) {
        element.focus();
    },
    update(element, binding) {
        element.value = binding.value;
    },
});
复制代码

Vue 学习笔记 —— 一些内置指令与自定义指令（六）