C42. Vue 基础函数

2.1. ref 函数创建任意响应式数据

ref 是 Vue 中最基础的响应式函数，可创建任意类型（数字、字符串、布尔值等）的响应式数据。

🔮 使用步骤：

导入 ref：
javascript
```
import { ref } from 'vue';
```
1

创建响应式数据：

javascript

const count = ref(0);      // 初始值为 0 的数字
const message = ref('');   // 初始值为空字符串
const isReady = ref(false); // 初始值为布尔值

在模板中使用：

vue

<template>
  <p>当前计数：{{ count }}</p>
  <button @click="count.value++">+1</button>
</template>

WARNING

必须通过 .value 访问/修改值，如 count.value 而非直接 count。
基础类型使用 ref 可避免 Vue 的代理机制复杂性。

2.2. 模板中使用双大括号包裹显示内容

双大括号 是 Vue 模板中渲染数据的语法糖，支持表达式计算。

📝 示例：

vue

<template>
  <!-- 显示 ref 数据 -->
  <p>计数器值：{{ count }}</p>

  <!-- 简单计算 -->
  <p>双倍计数：{{ count * 2 }}</p>

  <!-- 条件判断 -->
  <p v-if="isReady">已准备好！</p>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const isReady = ref(true);
</script>

TIP

支持任意 JavaScript 表达式（如 arr.length、user.name）。
避免复杂逻辑，建议在 computed 中处理。

2.3. 表单 v-model 指令进行双向绑定

v-model 是 Vue 的双向绑定指令，自动同步表单元素值与响应式数据。

🔄 基础用法：

vue

<template>
  <!-- 输入框双向绑定 -->
  <input v-model="message" placeholder="输入内容..." />

  <!-- 显示输入值 -->
  <p>输入内容：{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue';
const message = ref('');
</script>

🔧 进阶技巧：

数字类型自动转换：

vue

<input v-model.number="age" type="number" />  <!-- 自动转为 Number -->

复选框绑定布尔值：

vue

<input type="checkbox" v-model="isChecked" /> 同意条款

多选绑定数组：

vue

<select v-model="selected">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
</select>

WARNING

避免直接绑定基础类型（如 v-model="count" 需确保 count 是 ref）。
数组/对象需通过 reactive 或 ref 包裹。

2.4. v-bind 指令对属性进行单项绑定

v-bind 用于动态绑定元素属性（如 class、style、src），是单向绑定。

🎯 常见场景：

绑定静态属性：

vue

<img v-bind:src="imageUrl" alt="图片" />
<!-- 简写：直接写 `:src` -->
<img :src="imageUrl" alt="图片" />

动态绑定类名：

vue

<div :class="{ active: isActive }">动态类名</div>

内联样式：

vue

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
  样式动态变化
</div>

TIP

简写语法：v-bind:attr → :attr。
支持对象语法和数组语法（如多个类名）。

2.5. v-on 指令处理组件事件

v-on 用于监听 DOM 事件或组件自定义事件，触发 JavaScript 方法。

🎵 基础用法：

vue

<template>
  <!-- 监听点击事件 -->
  <button @click="handleClick">点击我</button>

  <!-- 监听键盘事件 -->
  <input @keydown.enter="handleEnter" placeholder="按回车触发" />
</template>

<script setup>
import { ref } from 'vue';

const handleClick = () => {
  alert('按钮被点击了！');
};

const handleEnter = () => {
  alert('回车键被按下！');
};
</script>

🌪️ 事件修饰符：

vue

<!-- 阻止默认行为 -->
<form @submit.prevent="handleSubmit">
  <button type="submit">提交</button>
</form>

<!-- 防止事件冒泡 -->
<div @click="handleOuter">
  <button @click.stop="handleInner">阻止冒泡</button>
</div>

2.6. reactive 函数创建数组和对象的响应式数据

reactive 用于创建复杂对象或数组的响应式数据，适合结构化的数据管理。

🧩 使用步骤：

javascript

import { reactive } from 'vue';

// 创建响应式对象
const user = reactive({
  name: '张三',
  age: 25,
  hobbies: ['阅读', '编程']
});

// 创建响应式数组
const list = reactive([1, 2, 3]);

🛠️ 访问与修改：

vue

<template>
  <p>姓名：{{ user.name }}</p>
  <button @click="user.age++">增长年龄</button>
  <p>爱好：{{ user.hobbies.join(', ') }}</p>
</template>

<script setup>
import { reactive } from 'vue';

const user = reactive({
  name: '张三',
  age: 25,
  hobbies: ['阅读', '编程']
});
</script>

WARNING

无需 .value，直接通过 . 访问属性。
仅支持对象/数组，基础类型需用 ref。

2.7. computed 函数创建计算得出的响应式数据

computed 用于声明计算属性，依赖的数据变化时自动更新，避免重复计算。

🔄 基础用法：

vue

<template>
  <p>姓名：{{ fullName }}</p>
  <p>购物车总价：{{ totalPrice }}</p>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('张');
const lastName = ref('三');
const items = ref([{ price: 100 }, { price: 200 }]);

// 计算全名
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`;
});

// 计算总价
const totalPrice = computed(() => {
  return items.value.reduce((sum, item) => sum + item.price, 0);
});
</script>

🔄 特性：

惰性求值：仅在依赖数据变化时重新计算。
缓存结果：多次访问不重复计算。

TIP

可写入计算属性（通过 set 方法），但需谨慎使用。

知识回顾

基础响应式数据：
- ref：创建任意类型数据，需 .value 访问。
- reactive：创建对象/数组，直接通过 . 访问。
模板指令：
- ：渲染表达式。
- v-model：双向绑定表单。
- v-bind/:：单向绑定属性。
- v-on/@：监听事件。
高级功能：
- computed：声明式计算属性，自动响应依赖变化。

课后练习

单选题： Vue 中 v-model 的作用是？
- A. 单向绑定属性
- B. 双向绑定表单
- C. 监听事件
- D. 声明计算属性
填空题：使用 reactive 创建响应式数组时，应通过______（方法名）导入，并通过______（语法）访问数组元素。

代码纠错：修复以下代码中的响应式问题：

vue

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <p>当前计数：{{ count }}</p>
  <button @click="count = count + 1">+1</button>
</template>

操作题：创建一个 Vue 组件，包含以下功能：
- 输入框通过 v-model 绑定 message。
- 显示 message 的字符数（通过 computed 计算）。
扩展题：使用 reactive 和 computed 实现一个购物车组件：
- 商品列表（对象数组，含 name 和 price）。
- 显示总金额（所有商品价格之和）。

🧱 A1. HTML 入门

🎨 A2. CSS 入门

⚡ A3. JavaScript 入门

🌐 B1. Web 通识及工具

🧱 B2. HTML 进阶

🎨 B3. CSS 进阶

⚡ B4. JavaScript 初级

⚡ C1. JavaScript 进阶

📦 C2. 环境搭建与网页部署

🛡️ C3. TypeScript 基础

🔧 C4. Vue 基础

🎨 C5. CSS 高级

💡 D1. 算法基础

🛡️ D2. Typescript 进阶

🔧 D3. Vue 进阶

⚙️ D4. 前端原理

☁️ E1. 服务器基础

☁️ E2. Express.js 基础

C42. Vue 基础函数

2.1. ref 函数创建任意响应式数据

🔮 使用步骤：

2.2. 模板中使用双大括号包裹显示内容

📝 示例：

2.3. 表单 v-model 指令进行双向绑定

🔄 基础用法：

🔧 进阶技巧：

2.4. v-bind 指令对属性进行单项绑定

🎯 常见场景：

2.5. v-on 指令处理组件事件

🎵 基础用法：

🌪️ 事件修饰符：

2.6. reactive 函数创建数组和对象的响应式数据

🧩 使用步骤：

🛠️ 访问与修改：

2.7. computed 函数创建计算得出的响应式数据

🔄 基础用法：

🔄 特性：

知识回顾

课后练习

C42. Vue 基础函数 ​

2.1. ref 函数创建任意响应式数据 ​

🔮 使用步骤： ​

2.2. 模板中使用双大括号包裹显示内容 ​

📝 示例： ​

2.3. 表单 v-model 指令进行双向绑定 ​

🔄 基础用法： ​

🔧 进阶技巧： ​

2.4. v-bind 指令对属性进行单项绑定 ​

🎯 常见场景： ​

2.5. v-on 指令处理组件事件 ​

🎵 基础用法： ​

🌪️ 事件修饰符： ​

2.6. reactive 函数创建数组和对象的响应式数据 ​

🧩 使用步骤： ​

🛠️ 访问与修改： ​

2.7. computed 函数创建计算得出的响应式数据 ​

🔄 基础用法： ​

🔄 特性： ​

知识回顾 ​

课后练习 ​

C42. Vue 基础函数

2.1. ref 函数创建任意响应式数据

🔮 使用步骤：

2.2. 模板中使用双大括号包裹显示内容

📝 示例：

2.3. 表单 v-model 指令进行双向绑定

🔄 基础用法：

🔧 进阶技巧：

2.4. v-bind 指令对属性进行单项绑定

🎯 常见场景：

2.5. v-on 指令处理组件事件

🎵 基础用法：

🌪️ 事件修饰符：

2.6. reactive 函数创建数组和对象的响应式数据

🧩 使用步骤：

🛠️ 访问与修改：

2.7. computed 函数创建计算得出的响应式数据

🔄 基础用法：

🔄 特性：

知识回顾

课后练习