指令

数据绑定 v-bind 及其简写、事件处理 v-on 及其简写@都是 Vue 指令的一部分。

常用内置指令

1.v-text : 更新元素的 textContent

与插值语法的区别：v-text 会替换节点中的内容，{{x}}不会

2.v-html : 更新元素的 innerHTML

与插值语法的区别：

v-html 会替换掉节点中所有内容，{{x}}不会。v-html 可以识别 html 结构。

严重注意：v-html 有安全性问题！

在网站上动态渲染任意 html 是非常危险的，容易导致 XSS 攻击。

一定要在可信的内容上使用 v-html，不要用在用户提交的内容上。

3.v-if : 如果为 true, 当前标签才会输出到页面

4.v-else: 如果为 false, 当前标签才会输出到页面

5.v-show : 通过控制 display 样式来控制显示/隐藏

6.v-for : 遍历数组/对象

7.v-on : 绑定事件监听, 一般简写为@

8.v-bind : 绑定解析表达式, 可以省略 v-bind

9.v-model : 双向数据绑定

10.v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }（在 CSS 中写）

1.本质是一个特殊属性，Vue 实例创建完毕接管容器后，会删掉 v-cloak 属性。

2.使用 css 配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题。

11.v-once：初次动态渲染后视为静态内容

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

12.v-pre：跳过其所在节点的编译过程

可利用该指令跳过没有使用指令语法、没有使用插值语法的节点，加快编译。

自定义指令

例：v-big：指令与元素成功绑定时/指令所在的模板被重新解析时。

1.在 directives 属性中写入 big(element, binding){} 函数，随页面渲染自动调用。

2.绑入多个元素，元素都重新解析更新，函数会重复调用。

自定义指令写为对象形式，可插入三个函数方法：bind、inserted、update。分别在指令与元素成功绑定时、指令所在元素被插入页面时、指令所在模板被重新解析时触发。

语法

（1）局部指令：new Vue({ directives: { 指令明： 配置对象}}) 或 new Vue({ directives() { } })

（2）全局指令：Vue.directive(指令名，配置对象) 或 Vue.directive(指令名，回调函数)

回调

bind：指令与元素成功绑定时调用

inserted：指令所在元素被插入页面时调用

update：指令所在模板结构重新解析时调用

备注

1.指令定义时不加 v-，但使用时要加 v-

2.指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 camelCase 命名。

以下为 v-directive 代码示例，click 点击后绑定了 v-color 的元素字体变红切换

<template>
  <div id="app">
    <button @click="onclick">Hello</button>
    <div v-color="color">哈哈哈</div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      color: null,
    };
  },
  methods: {
    onclick() {
      this.color = this.color ? null : "red";
    },
  },
  directives: {
    color: {
      inserted(el) {
        el.style.display = "block";
      },
      update(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
};
</script>