Vue 中常用的指令

Vue 中提供了丰富的指令，用于增强组件和模板的功能。以下列出了一些最常用的指令：

基本指令

v-model：绑定组件数据到 HTML 输入元素。

v-if：根据条件显示或隐藏元素。

v-for：遍历数组或对象并创建重复元素。

v-on：监听事件并调用方法。

v-bind：动态绑定属性值。

修饰符

指令可以搭配修饰符使用，以修改其行为。例如：

.lazy：延迟事件处理。

.prevent：阻止事件的默认行为。

.capture：捕获捕获阶段事件。

.once：事件仅触发一次。

条件性渲染指令

这些指令根据条件渲染元素：

v-if：如果条件为真，渲染元素。

v-else：如果 v-if 条件为假，渲染元素。

v-else-if：如果 v-if 和前面的 v-else-if 条件都为假，渲染元素。

循环指令

这些指令用于遍历数据并创建重复元素：

v-for：遍历数组或对象并创建重复元素。

v-for-in：遍历对象的可枚举属性并创建重复元素。

事件处理指令

这些指令用于监听事件并调用方法：

v-on：监听事件并调用方法。

v-on.click：在元素被点击时调用方法。

v-on.keyup：在用户释放键盘按键时调用方法。

属性绑定指令

这些指令用于动态绑定属性值：

v-bind：动态绑定属性值。

v-bind:class：动态绑定 CSS 类。

v-bind:style：动态绑定 CSS 样式。