Vue 指令速查表

一、基础指令

1. v-text：将数据绑定到元素的文本内容。
2. v-html：将包含 HTML 代码的数据绑定到元素。
3. v-show：根据表达式的值控制元素的显示或隐藏。
4. v-if：根据条件动态地渲染元素。
5. v-else：与 v-if 搭配使用，在 v-if 条件不满足时渲染。
6. v-else-if：在多个 v-if 条件之间添加额外的条件判断。

二、属性绑定指令

1. v-bind：动态绑定一个或多个属性值。
2. v-bind:class：动态绑定类名。
3. v-bind:style：动态绑定内联样式。

三、事件处理指令

1. v-on：监听 DOM 事件，并绑定处理函数。
2. v-on:click：监听点击事件。
3. v-on:input：监听输入事件。

四、列表渲染指令

1. v-for：基于数组或对象进行循环渲染。

五、表单输入绑定指令

1. v-model：实现双向数据绑定，常用于表单元素。

六、其他指令

1. v-pre：跳过该元素及其子元素的编译过程。
2. v-cloak：在初始加载时隐藏未编译的元素。

详细解释：

1. v-text：

   • 用法：<element v-text="data"></element>，将 data 的值直接设置为元素的文本内容，会覆盖元素原有的文本。

2. v-html：

   • 用法：<element v-html="htmlData"></element>，将包含 HTML 代码的 htmlData 渲染为元素的内容，需要注意安全问题，防止 XSS 攻击。

3. v-show：

   • 用法：<element v-show="expression"></element>，通过切换元素的 display 属性来控制元素的显示或隐藏，当 expression 为 false 时，元素隐藏，但仍在 DOM 中。

4. v-if：

   • 用法：<element v-if="condition"></element>，根据 condition 的值来决定是否渲染该元素，当 condition 为 false 时，元素不会被渲染到 DOM 中。

5. v-else：

   • 用法：<element v-else></element>，必须紧跟在 v-if 或 v-else-if 之后，在 v-if 条件不满足时渲染该元素。

6. v-else-if：

   • 用法：<element v-else-if="condition"></element>，在多个 v-if 条件之间添加额外的条件判断。

7. v-bind：

   • 用法：<element v-bind:attribute="value"></element>，动态绑定一个或多个属性值，可以使用缩写形式 :attribute。

8. v-bind:class：

   • 用法一：<element v-bind:class="{ active: isActive }"></element>，通过对象形式动态绑定类名，其中键是类名，值是布尔表达式。
   • 用法二：<element v-bind:class="[class1, class2]"></element>，通过数组形式动态绑定多个类名。

9. v-bind:style：

   • 用法一：<element v-bind:style="{ color: 'ed', fontSize: '16px' }"></element>，通过对象形式动态绑定内联样式，其中键是样式属性名，值是属性值。
   • 用法二：<element v-bind:style="[style1, style2]"></element>，通过数组形式动态绑定多个内联样式对象。

10. v-on：

    • 用法：<element v-on:event="handler"></element>，监听 DOM 事件，并绑定处理函数，可以使用缩写形式 @event。

11. v-on:click：

    • 用法：<element v-on:click="clickHandler"></element>，监听点击事件。

12. v-on:input：

    • 用法：<input v-on:input="inputHandler">，监听输入事件。

13. v-for：

    • 用法：<element v-for="(item, index) in items" :key="item.id"></element>，基于数组或对象进行循环渲染，需要指定唯一的 key 属性。

14. v-model：

    • 用法：<input v-model="value">，实现双向数据绑定，常用于表单元素，将元素的值与数据进行同步。

15. v-pre：

    • 用法：<element v-pre></element>，跳过该元素及其子元素的编译过程，显示原始的未编译内容。

16. v-cloak：

    • 用法：<element v-cloak></element>，在初始加载时隐藏未编译的元素，防止闪现未编译的内容。