【前端 14】Vue常见指令

Vue常见指令

Vue.js 是一个构建用户界面的渐进式框架，它通过一系列简洁的指令（Directives）来增强HTML的功能，使得开发者能够更加方便地构建出响应式的Web应用。本文将详细讲解Vue中的几个核心指令：v-bind、v-model、v-on以及条件渲染指令v-if、v-else-if、v-else和v-show，还有列表渲染指令v-for。

v-bind

v-bind 指令用于为HTML标签动态地绑定属性值。这意味着当Vue实例中的数据发生变化时，绑定了这些数据的HTML标签的属性值也会相应地更新。v-bind 可以简写为 :。

示例：

<a v-bind:href="url">链接</a>  
<!-- 或者简写为 -->  
<a :href="url">链接</a>

在这个例子中，<a> 标签的 href 属性被绑定到了Vue实例的 url 数据属性上。如果 url 的值发生变化，<a> 标签的 href 属性也会自动更新。

v-model

v-model 指令在表单元素上创建双向数据绑定。这意味着，当Vue实例中的数据变化时，视图中的表单元素也会自动更新，反之亦然。v-model 主要用于<input>、<textarea>、<select>等表单元素。

示例：

<input v-model="message" placeholder="编辑我">  
<p>Message is: {{ message }}</p>

在这个例子中，<input> 标签的 value 与Vue实例的 message 数据属性双向绑定。在输入框中输入文本时，message 的值会实时更新，并反映在 <p> 标签中。

v-on

v-on 指令用于给HTML标签绑定事件监听器。事件处理函数应当定义在Vue实例的 methods 中。与原生JavaScript事件名不同的是，使用 v-on 时不需要添加 on 前缀。

示例：

<button v-on:click="greet">点击我</button>  
<!-- 或者简写为 -->  
<button @click="greet">点击我</button>
new Vue({  
  el: '#app',  
  methods: {  
    greet: function () {  
      alert('Hello Vue!');  
    }  
  }  
})

在这个例子中，<button> 标签的点击事件被绑定到了Vue实例的 greet 方法上。点击按钮时，会弹出“Hello Vue!”的警告框。

条件渲染指令

Vue提供了几个条件渲染指令，用于根据条件渲染不同的HTML元素。

• v-if：当条件为 true 时渲染元素，否则不渲染。
• v-else-if：v-if 的“else if”块。
• v-else：v-if 和 v-else-if 的“else”块。
• v-show：根据条件展示或隐藏元素，但会保留在DOM中，只是切换CSS的 display 属性。

示例：

<div v-if="type === 'A'">A</div>  
<div v-else-if="type === 'B'">B</div>  
<div v-else>Not A/B</div>  
  
<div v-show="show">始终渲染，但根据条件显示/隐藏</div>

v-for

v-for 指令用于基于一个数组或对象来渲染一个列表。它可以用 in、of 关键字来遍历数据。

遍历数组：

<ul>  
  <li v-for="item in items">{{ item.text }}</li>  
</ul>

遍历数组并获取索引：

<ul>  
  <li v-for="(item, index) in items">{{ index }} - {{ item.text }}</li>  
</ul>

v-for 还可以遍历对象的键、值或同时遍历键和值。

通过学习这些Vue指令，你可以更加高效地构建出动态、响应式的Web应用。