vue的常用指令及详解

Vue.js 是一个用于构建用户界面的渐进式框架，它提供了许多内置指令来帮助我们更高效地操作 DOM 和处理数据。以下是一些 Vue.js 的常用指令及其详解：

1. v-text：

   • 用途：设置元素的文本内容。
   • 详解：它会替换元素的 textContent。如果你想替换元素的指定内容，可以使用插值表达式 {{ }}。v-text 的缩写形式也是 {{ }}。
   • 示例：<div v-text="message"></div>，当 message 的值为 "Hello" 时，该 div 的内容将会是 "Hello"。

2. v-html：

   • 用途：更新元素的 innerHTML。
   • 详解：与 v-text 不同，v-html 会解析内容中的 HTML 结构。这意味着你可以插入带有标签的 HTML 内容。
   • 示例：<div v-html="htmlContent"></div>，当 htmlContent 的值为 "<h1>Hello</h1>" 时，该 div 会显示一个标题为 "Hello" 的 H1 标签。

3. v-on：

   • 用途：为元素绑定事件。
   • 详解：你可以使用 v-on 来监听 DOM 事件，并在触发时执行一些 JavaScript 代码。事件名不需要写 on 前缀，例如 v-on:click 可以简写为 @click。
   • 示例：<button @click="handleClick">Click me</button>，当按钮被点击时，会调用 handleClick 方法。

4. v-show：

   • 用途：根据条件切换元素的显示状态。
   • 详解：v-show 会根据表达式的真假来切换元素的 display 属性。当表达式的值为 true 时，元素显示；为 false 时，元素隐藏。
   • 示例：<div v-show="isVisible">I'm visible</div>，当 isVisible 为 true 时，div 显示；为 false 时，div 隐藏。

5. v-if：

   • 用途：根据条件切换元素的渲染。
   • 详解：与 v-show 不同，v-if 是真正地添加或移除元素。当表达式的值为 true 时，元素会被渲染到 DOM 中；为 false 时，元素会被销毁。
   • 示例：<div v-if="isRendered">I'm rendered</div>，当 isRendered 为 true 时，div 会被渲染；为 false 时，div 不会被渲染。

6. v-else：

   • 用途：与 v-if 或 v-else-if 一起使用，表示条件不满足时的备选内容。
   • 详解：v-else 必须紧跟在 v-if 或 v-else-if 后面，并且不能单独使用。
   • 示例：

     html`<div>  
       <div v-if="score > 90">优秀</div>  
       <div v-else-if="score > 60">及格</div>  
       <div v-else>不及格</div>  
     </div>`

     7.v-for：

     • 用途：基于数据源渲染一个列表。
     • 详解：v-for 可以遍历数组、对象、数字或字符串，并为每个元素生成一个模板。
     • 示例：<ul><li v-for="item in items">{{ item }}</li></ul>，当 items 是一个数组时，会为数组中的每个元素生成一个 li 标签。