Vue学习笔记-基础语法与响应式数据（ref、reactive、v-model）-优快云博客

📝 作者：一名 Vue 的学习者

🕒 记录时间：2025年12月

💡 目标：熟悉Vue基础语法，实现如下的效果图

在前两篇笔记中，我完成了 环境搭建 和 项目结构分析。这篇笔记我将正式开始写页面，学习 Vue 的基础语法和响应式数据，这是开发任何 Vue 页面都必须掌握的核心内容。

详细语法参考Vue官方文档：https://cn.vuejs.org/guide/essentials/application.html

1. setup() 的基本使用

Vue3 引入了 Composition API，所有的逻辑大多写在 setup() 函数里，这里我们再Home页展示一段文字hello vue3！：

<template>
  <h1>{{ message }}</h1>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue3!')
</script>

setup() 在组件创建前执行
可以直接定义响应式数据、方法和计算属性
模板中可以直接使用 setup 内定义的变量和方法

2. 响应式基础：ref 与 reactive

2.1 ref

ref 用于管理基本类型（字符串、数字、布尔值），我们来实现一个简单的计数：

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>
<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

注意：访问和修改 ref 类型需要加 .value。

2.2 reactive

reactive 用于管理对象和数组，这里展示用户的名称和年龄：

<template>
  <div>
    <p>{{ user.name }} - {{ user.age }} 岁</p>
    <button @click="increaseAge">增加年龄</button>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({
  name: 'Alice',
  age: 20
})
function increaseAge() {
  user.age++
}
</script>

小提示：reactive 解构会失去响应性，直接使用对象即可。

3. 模板绑定

3.1 插值表达式

<p>{{ message }}</p>

3.2 属性绑定

<img :src="imageUrl" alt="图片">

3.3 事件绑定

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

@click 等价于 v-on:click
Vue 中事件绑定非常灵活，支持原生事件和自定义事件

4. 条件渲染与循环渲染

4.1 条件渲染

<p v-if="count > 0">计数大于0</p>
<p v-else>计数为0</p>

v-if 完全添加/移除 DOM
v-show 通过 CSS display 控制显示隐藏

4.2 循环渲染

<script setup>
import { ref } from 'vue'
const todos = ref([
  { id: 1, text: '学习 Vue3' },
  { id: 2, text: '写博客' }
])
</script>
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
  </ul>
</template>

v-for 循环必须加 :key，避免渲染异常。

5. 双向绑定 v-model

v-model 可以把表单元素的值与变量绑定，实现双向同步：

<script setup>
import { ref } from 'vue'
const inputText = ref('')
</script>
<template>
  <input type="text" v-model="inputText" placeholder="请输入内容">
  <p>输入内容：{{ inputText }}</p>
</template>

也可以在自定义组件里使用 v-model（本篇先不展开）

6. 小实践：简单 Todo List

把上面学到的内容整合成一个小 Demo：

<script setup>
import { ref } from 'vue'
const todos = ref([])
const newTodo = ref('')
function addTodo() {
  if (!newTodo.value) return
  todos.value.push({ id: Date.now(), text: newTodo.value })
  newTodo.value = ''
}
function removeTodo(id) {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>
<template>
  <h2>我的 Todo List</h2>
  <input type="text" v-model="newTodo" placeholder="新任务">
  <button @click="addTodo">添加</button>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo.id)">删除</button>
    </li>
  </ul>
  <p v-if="todos.length === 0">暂无任务</p>
</template>