vue的常用指令

Vue.js 提供了一套简洁的指令来嵌入逻辑到模板中。以下是一些Vue常用的指令：

1. v-bind (或 :)

   • 用于动态地绑定一个或多个属性到表达式。
   • 示例：v-bind:src="imageSrc" 或 :src="imageSrc"，其中imageSrc是绑定的表达式。

2. v-model

   • 创建双向数据绑定，通常用于表单输入元素。
   • 示例：v-model="message"，其中message将随着输入框内容的变化而更新。

3. v-for

   • 用于遍历数组、对象或字符串，生成重复的内容。
   • 示例：v-for="item in items"，items是遍历的数组。

4. v-if 和 v-else-if/v-else

   • 根据表达式的真假来条件性地渲染元素。
   • 示例：v-if="seen"，当seen为真时，元素会渲染；v-else-if和v-else用于多条件渲染。

5. v-show

   • 根据表达式的真假切换元素的CSS display属性。
   • 示例：v-show="isShow"，元素始终在DOM中，只是通过CSS的display属性控制显示和隐藏。

6. v-on (或 @)

   • 用于监听原生DOM事件，如click、change等。
   • 示例：@click="doSomething"，当元素被点击时，会执行doSomething方法。

7. v-once

   • 指令用于声明子节点只渲染一次，且无需追踪变化。
   • 示例：v-once，适用于初始化数据后不需要再变化的场景。

8. v-pre

   • 显示原始内容，忽略指令和插值。
   • 示例：v-pre，使用在不需要Vue处理的内容上。

9. v-text

   • 用于向元素内填充文本内容，它会替换掉元素的所有内容。
   • 示例：v-text="message"，将message的值填充到元素中。

10. v-html

    • 用于将绑定值视为HTML并插入到元素中。
    • 示例：v-html="htmlContent"，将htmlContent的HTML插入到元素中。

11. v-slot (或 #)

    • 用于定义插槽，特别是在使用组件时。
    • 示例：在子组件上使用v-slot:header来定义一个插槽，然后在父组件中使用v-slot="slotProps"来插入内容。