Vue的指令集合

1. 数据绑定指令 v-bind（简写：:）

作用：单向数据绑定

用法：

<!-- 完整语法 -->
<div v-bind:href="url">...</div>

<!-- 简写语法 -->
<div :href="url">...</div>

v-bind 指令用于动态绑定HTML属性到Vue实例的数据属性上。例如，在上面的例子中，当 url 数据属性发生变化时，href 属性值也会相应更新。

2. 文本插值指令 {{ }}

用法：

<p>{{ message }}</p>

双大括号内的内容会实时解析为Vue实例对应的数据属性值。在此例中，当 message 数据发生变化时，文本内容会自动更新。

3. 表达式指令 v-on（简写：@）

作用：绑定事件监听

用法：

<!-- 完整语法 -->
<button v-on:click="handleClick">点击我</button>

<!-- 简写语法 -->
<button @click="handleClick">点击我</button>

说明：v-on 指令用于监听并处理DOM事件。如上述示例所示，当按钮被点击时，Vue实例中的 handleClick 方法会被调用。

4. 条件渲染指令 v-if 和 v-else-if、v-else

作用：动态控制节点是否存存在

用法：

<div v-if="seen">现在你看到了我</div>
<div v-else-if="hidden">但是你现在看不到我</div>
<div v-else>原来你一直都能看到我</div>

说明：这些条件指令控制元素是否渲染。v-if 在表达式的值为真时渲染元素；v-else-if 提供额外的条件分支；v-else 则表示前面条件都不满足时的备用情况。

5. 列表渲染指令 v-for

用法：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

v-for 指令用于遍历数组或对象，根据每个项目生成重复的DOM元素。在这个例子中，当 items 数组发生变化时，列表项将会随之更新。

详细说明移步Vue中v-for指令的详细应用与遍历数据说明-CSDN博客

6. 计算属性指令 v-model

作用：双向数据绑定

用法：

<input v-model="message">

v-model 是双向数据绑定的核心指令，通常用于表单元素，它可以轻松地在视图（input标签）与数据模型之间同步值。

7. 组件指令 v-slot（以前是 slot 和 slot-scope）

用法：

<child-component v-slot="{ prop1, prop2 }">
  {{ prop1 }} - {{ prop2 }}
</child-component>

v-slot 指令用于定义或接收组件的插槽内容及其作用域插槽变量。在以上示例中，父组件可以访问子组件传递过来的 prop1 和 prop2 属性。

其他指令

• v-text指令：

  作用：向其所在的节点中渲染文本内容。

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

• v-html指令：

  作用：向指定节点中渲染包含html结构的文本。 与插值语法的区别：

  1. v-html会替换掉节点中所有的内容，{{xx}}则不会。

  2. v-html可以识别html结构。

  3. 备注：v-html存在一些安全性问题，因为结构中很有可能包含恶意脚本。

• v-once指令：

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

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

• v-pre指令：

  跳过这个元素和它的子元素的编译过程，一般用在大量不使用Vue语法的结构中。

• v-cloak指令（没有值）:

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

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