【Vue】常用指令

1、简介

• Vue.js中的指令是Vue模板的组成部分，它们以v-为前缀，用于在模板中声明式地将DOM与Vue实例的数据绑定起来。
• 这些指令在编译阶段会被Vue编译器解析成相应的JavaScript代码，并在运行时执行相应的DOM操作。

2、常用指令

• v-bind
  • 功能：动态地绑定一个或多个HTML属性，或一个组件prop到表达式。
  • 缩写：:（例如，v-bind:src 可以缩写为 :src）
  • 示例：<img :src="imageSrc" alt="Vue logo">
• v-model
  • 功能：在表单输入和应用状态之间创建双向数据绑定。
  • 示例：<input v-model="message" placeholder="edit me">
  • 修饰符：.lazy（在change事件中同步）、.number（将输入转换为数值类型）、.trim（自动过滤首尾空格）
• v-if
  • 功能：根据表达式的真假值条件性地渲染元素。
  • 注意事项：如果条件为假，则元素及其子元素不会被渲染到DOM中。
  • 示例：<p v-if="seen">现在你看到我了</p>
• v-else-if
  • 功能：作为v-if的“else if”块，可以链式使用。
  • 注意事项：必须紧跟在v-if或v-else-if元素后。
  • 示例：与v-if一起使用，实现条件分支。
• v-else
  • 功能：为v-if/v-else-if提供“else”块。
  • 注意事项：必须紧跟在v-if或v-else-if元素后。
  • 示例：<p v-else>现在你没有看到我</p>
• v-for
  • 功能：基于源数据多次渲染元素或模板块。
  • 语法：v-for="(item, index) in items"
  • 示例：<div v-for="(item, index) in items">{{ item.text }}</div>
  • 注意事项：v-for优先级高于v-if（在Vue 3中有所不同）。
• v-on
  • 功能：监听DOM事件，并在触发时运行一些JavaScript代码。
  • 缩写：@（例如，v-on:click 可以缩写为 @click）
  • 修饰符：.stop（阻止事件冒泡）、.prevent（阻止默认行为）、.capture（使用事件捕获模式）、.self（只当事件在该元素本身触发时触发回调）等。
  • 示例：<button @click="doSomething">点击我</button>
• v-text
  • 功能：更新元素的textContent。
  • 示例：<span v-text="msg"></span>
  • 注意：与双大括号插值（{{}}）的区别在于，v-text会替换元素的所有内容，而插值会替换元素的文本内容，但不会移除元素的其他子节点。
• v-html
  • 功能：更新元素的innerHTML。
  • 示例：<div v-html="rawHtml"></div>
  • 警告：由于这可能导致XSS攻击，因此应谨慎使用。
• v-show
  • 功能：根据表达式之真假值，切换元素的display CSS 属性。
  • 示例：<p v-show="ok">Hello</p>
  • 与v-if的区别：v-show只是简单地切换元素的CSS属性，而v-if是条件性地渲染和销毁元素。因此，对于频繁切换的场景，v-show性能更好；对于运行时条件不太可能改变的场景，v-if更合适。
• v-pre
  • 功能：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。
  • 示例：<span v-pre>{{ this will not be compiled }}</span>