跳到主要内容

第5章：Vue 的指令与事件处理

在 Vue.js 中，指令和事件处理是实现动态交互的重要基础。本章将详细介绍 Vue 的常用指令（v-if、v-for、v-show）、事件处理（v-on、事件修饰符）以及表单输入绑定（v-model）。

5.1 常用指令​

指令是 Vue 提供的特殊特性，用于在模板中执行特定的操作。以下是几种最常用的指令：

5.1.1 v-if 和 v-show：条件渲染​

v-if 和 v-show 都用于条件渲染，但它们的实现方式有所不同。

  • v-if：根据条件决定是否渲染元素。如果条件为 false，元素不会被渲染到 DOM 中。
  • v-show：根据条件决定是否显示元素。如果条件为 false，元素仍然存在于 DOM 中，只是设置为 display: none。

示例：​

<template>
  <div>
    <!-- 使用 v-if -->
    <h1 v-if="isShow">我用 v-if 渲染了</h1>
    
    <!-- 使用 v-show -->
    <h1 v-show="isShow">我用 v-show 渲染了</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

应用场景：

  • 如果需要频繁切换显示和隐藏，v-show 更高效，因为 DOM 元素一直存在。
  • 如果条件不常变化，v-if 更适合，因为它不会渲染 DOM。

5.1.2 v-for：循环渲染​

v-for 用于遍历数组或对象，生成多个 DOM 元素。

示例：​

<template>
  <ul>
    <!-- 遍历数组 -->
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    
    <!-- 遍历对象 -->
    <li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' }
      ],
      object: {
        name: 'Alice',
        age: 28
      }
    }
  }
}
</script>

注意事项：

  • 使用 :key 属性为每个循环项提供一个唯一的标识，以优化 Vue 的渲染性能。
  • 当遍历对象时，v-for 默认按对象的属性顺序渲染。

5.2 事件处理​

Vue 提供了 v-on 指令用于绑定事件处理程序。通过事件处理，你可以捕获用户交互行为（如点击、输入、提交等）并触发相应的逻辑。

5.2.1 基本用法​

示例：​

<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了！')
    }
  }
}
</script>

简化写法： 你也可以使用 @ 符号简化 v-on，例如：

<button @click="handleClick">点击我</button>

5.2.2 事件修饰符​

Vue 提供了多种事件修饰符，用于在不编写 JavaScript 的情况下增强事件处理：

常用修饰符：​

  • .stop：阻止事件冒泡
  • .prevent：阻止默认行为
  • .self：只有当事件目标是组件自身时触发
  • .capture：使用捕获 phase 处理事件
  • .once：只触发一次事件

示例：​

<template>
  <div class="container" @click="handleContainerClick">
    <button @click.stop="handleButtonClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleContainerClick() {
      console.log('容器被点击了')
    },
    handleButtonClick() {
      console.log('按钮被点击了')
      // `.stop`修饰符阻止了事件冒泡，因此容器的点击事件不会被触发
    }
  }
}
</script>

5.3 表单输入绑定​

v-model 是 Vue 提供的双向数据绑定指令，用于简化表单输入处理。它能够自动同步表单元素的值与组件的数据。

5.3.1 基本用法​

示例：​

<template>
  <div>
    <input v-model="message" type="text" placeholder="请输入内容">
    <p>你输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

双向绑定的过程：

  • 用户在输入框中输入内容时，message 数据会被实时更新。
  • message 数据发生变化时，输入框的值也会同步更新。

5.3.2 表单元素的绑定​

v-model 可以绑定各种表单元素，包括：

  • 文本输入框：<input type="text">
  • 文本域：<textarea>
  • 单选框：<input type="radio">
  • 复选框：<input type="checkbox">
  • 下拉列表：<select>

示例（单选框和复选框）：​

<template>
  <div>
    <!-- 单选框 -->
    <label>
      <input type="radio" v-model="selected" value="A"> A
    </label>
    <label>
      <input type="radio" v-model="selected" value="B"> B
    </label>
    <p>选中的值是：{{ selected }}</p>

    <!-- 复选框 -->
    <label>
      <input type="checkbox" v-model="checked"> 勾选我
    </label>
    <p>是否勾选：{{ checked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'A',
      checked: false
    }
  }
}
</script>

5.4 总结​

本章介绍了 Vue 的常用指令、事件处理以及表单输入绑定的核心知识。通过 v-if、v-show 和 v-for，你可以实现复杂的条件渲染和循环渲染。通过 v-on 和事件修饰符，你可以捕获用户的交互行为并触发相应的逻辑。最后，v-model 为表单输入提供了简洁的双向数据绑定方式。

掌握这些知识后，你将能够构建更复杂和交互性更强的 Vue 应用。

最后于 更新