Vue3 基础语法全解析：从入门到实战的核心指南

对于前端开发者来说，Vue3 凭借更优的性能、更灵活的组合式 API 成为主流框架之一。而掌握其基础语法，是搭建高效 Vue 应用的第一步。本文将系统梳理 Vue3 核心基础语法，结合实用案例，帮你快速上手

一、模板语法：数据与 DOM 的桥梁

模板语法是 Vue3 中连接响应式数据与页面 DOM 的核心方式，主要包含三类常用操作：

1. 文本插值

通过双大括号实现数据渲染，支持直接写JavaScript表达式（但仅限单个表达式，不能写语句）

<!-- 基础数据渲染 -->
<div>{{ message }}</div>
<div>姓名：{{ name }}</div><!-- JavaScript 表达式支持 -->
<div>{{ number + 1 }}</div> <!-- 运算 -->
<div>{{ ok ? 'YES' : 'NO' }}</div> <!-- 三元判断 -->
<div>{{ message.split('').reverse().join('') }}</div> <!-- 方法调用 -->

2. 原始 HTML 渲染

若需要渲染包含 HTML 标签的字符串（如后端返回的富文本），需用 v-html 指令，避免 XSS 风险（确保内容来源可信）

<div v-html="rawHtml"></div>

3.属性绑定

数据若需渲染到标签属性（如 id、src、disabled），需用 v-bind 指令，简写为 :，这是区别于文本插值的关键场景

<!-- 完整语法与简写 -->
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div> <!-- 推荐简写 --><!-- 实用案例：图片 src 绑定 -->
<!-- 方式1：组件内直接导入本地图片 -->
<img src="../assets/img/山水.jpg" alt=""><!-- 方式2：JS 中动态导入（更灵活，支持条件切换） -->
<script setup>
import imgurl2 from "@/assets/img/山水.jpg"; // 别名路径
import imgurl3 from "../assets/img/山水.jpg"; // 相对路径
const imgurl1 = "https://ts1.tc.mm.bing.net/th/id/R-C..."; // 网络图片
</script>
<img :src="imgurl1" alt="">
<img :src="imgurl2" alt="">

使用技巧：数据在标签“中间”使用差值（{{ }}），在标签“属性”中绑定（：属性名）

二、Class 与 Style 绑定：动态样式控制

Vue3 支持通过指令动态切换 CSS 类和内联样式，灵活应对页面交互场景

1.Class绑定

（1）对象语法：根据条件切换类名

适合单个或多个类的 “开关式” 控制，键为类名，值为布尔值（true 生效，false 失效）

<!-- 直接写对象 -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div><!-- 绑定计算属性（更简洁，适合复杂逻辑） -->
<script setup>
import { ref, computed } from "vue";
const isActive = ref(true);
const hasError = ref(false);
const classObject = computed(() => ({active: isActive.value,"text-danger": hasError.value
}));
</script>
<div :class="classObject"></div>

（2）数组语法，批量绑定类名

适合直接指定多个固定类名，或混合条件判断

<!-- 固定多个类 -->
<div :class="[activeClass, errorClass]"></div><!-- 数组中嵌套对象（条件+固定） -->
<div :class="[{ active: isActive }, errorClass]"></div><!-- 三元表达式（二选一） -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>

2.Style绑定

直接通过数据控制内联样式，语法与 Class 绑定类似

<!-- 直接写样式对象 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><!-- 绑定样式对象（推荐，更清晰） -->
<script setup>
const styleObject = ref({color: "red",fontSize: "16px"
});
</script>
<div :style="styleObject"></div><!-- 数组语法：合并多个样式对象 -->
<div :style="[baseStyles, overridingStyles]"></div>

三、条件渲染：按需展示DOM

根据数据条件决定是否渲染元素，核心指令为 v-if 系列和 v-show

1. v-if / v-else-if / v-else

真正的条件渲染：满足条件时渲染元素，不满足时销毁元素（DOM 中不存在），支持多分支判断

<!-- 多分支示例 -->
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>Not A/B</div><!-- 模板包装：渲染多个元素但不额外生成父标签 -->
<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p>
</template>

2.v-show

简单的显示隐藏：始终渲染元素，仅通过切换 CSS 的 display 属性控制显示（DOM 中始终存在）

<h1 v-show="ok">Hello!</h1>

3. 核心区别：v-if vs v-show

① v-if：适合 “不常切换” 的场景（如权限控制、初始化渲染），性能消耗在 “销毁 / 重建”

② v-show：适合 “频繁切换” 的场景（如 tabs 切换、按钮显示隐藏），性能消耗在 “CSS 切换”

四、列表渲染：高效遍历数据

通过 v-for 指令遍历数组、对象等可迭代数据，生成重复 DOM 元素，核心是绑定唯一 key

1. v-for 基本用法

（1）遍历数组

支持获取 “元素” 和 “索引”（索引可选）

<!-- 仅遍历元素 -->
<ul><li v-for="item in items" :key="item.id">{{ item.message }}</li>
</ul><!-- 遍历元素+索引 -->
<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.message }}</li>
</ul>

（2）遍历对象

支持获取 “值”“键名” 和 “索引”（键名和索引可选）

<!-- 仅遍历值 -->
<ul><li v-for="value in object" :key="value">{{ value }}</li>
</ul><!-- 遍历值+键名+索引 -->
<ul><li v-for="(value, name, index) in object" :key="name">{{ index }}. {{ name }}: {{ value }}</li>
</ul>

2. key 的重要性

key 是 Vue 识别列表元素唯一性的标识，必须绑定，且有明确规范：

• 推荐：用数据的唯一标识（如 id、uuid）作为 key，确保元素身份稳定
• 不推荐：用索引（index）作为 key，若列表有增删改操作，会导致 DOM 复用错误

<!-- 正确示例 -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div><!-- 错误示例（增删列表时慎用） -->
<div v-for="(item, index) in items" :key="index">{{ item.name }}</div>

五、事件处理：响应用户交互

通过 v-on 指令（简写 @）绑定事件，支持方法调用、内联逻辑，配合修饰符简化操作

1.基本事件监听

<!-- 方法处理器（调用组件内方法） -->
<button @click="greet">Greet</button>
<button v-on:click="greet">Greet</button> <!-- 完整语法 --><!-- 内联事件处理器（直接写逻辑） -->
<button @click="count++">Add 1</button>
<button @click="say('hello')">Say hello</button><!-- 访问原生事件对象 $event -->
<button @click="warn('Form cannot be submitted yet.', $event)">Submit
</button>

2.事件修饰符

通过 “.+ 修饰符” 简化常见操作（如阻止默认行为、阻止冒泡），无需手写 e.preventDefault()

<!-- 阻止默认行为（如表单提交、a标签跳转） -->
<form @submit.prevent="onSubmit"></form><!-- 阻止事件冒泡 -->
<a @click.stop="doThis"></a><!-- 修饰符串联（先阻止冒泡，再阻止默认） -->
<a @click.stop.prevent="doThat"></a><!-- 只触发一次（后续点击无效） -->
<a @click.once="doThis"></a><!-- 只在元素本身触发（排除子元素） -->
<div @click.self="doThat">...</div>

实用场景：阻止表单默认提交的3中方式：

①设置按钮 type="button"（非 submit 类型）

②表单标签加 @submit.prevent="onSubmit"

③方法内写 e.preventDefault()

3.按键修饰符

监听键盘事件时，通过修饰符指定具体按键（如 Enter、Ctrl）

<!-- 按下 Enter 键触发 -->
<input @keyup.enter="submit"><!-- 按下 Ctrl+C 触发 -->
<input @keyup.ctrl.67="copy"> <!-- 67 是 C 的 ASCII 码 --><!-- 按下 Ctrl 点击触发 -->
<div @click.ctrl="doSomething">Do something</div>

4.常用事件类型汇总

事件类别	常用事件	触发时机
鼠标事件	click	点击元素
	dblclick	双击元素
	mouseover/mouseout	鼠标移入 / 移出
键盘事件	keydown/keyup	按键按下 / 释放
表单事件	input	输入框内容变化
	change	元素值改变且失焦
	focus/blur	元素获得 / 失去焦点
窗口事件	resize	浏览器窗口大小变化
	scroll	页面滚动

六、表单输入绑定：双向数据同步

通过 v-model 指令实现 “表单输入” 与 “响应式数据” 的双向绑定，无需手动监听 input 事件更新数据

1.v-model基础用法

覆盖所有常见表单元素：

<!-- 文本输入（单行） -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p><!-- 多行文本 -->
<textarea v-model="message"></textarea><!-- 单个复选框（绑定布尔值） -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label><!-- 多个复选框（绑定数组，值为 checkbox 的 value） -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames"><!-- 单选按钮（绑定选中的 value） -->
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked"><!-- 下拉选择框 -->
<select v-model="selected"><option disabled value="">Please select one</option><option>A</option><option>B</option><option>C</option>
</select>

2.v-model修饰符

通过修饰符优化数据同步逻辑：

① .lazy：从 “input 事件同步” 改为 “change 事件同步”（失焦后更新数据）

② .number：自动将输入值转为数字（适合数字输入框）

③ .trim：自动过滤输入值的首尾空白字符

<input v-model.lazy="msg">
<input v-model.number="age" type="number">
<input v-model.trim="msg">

七、组合式API实战示例

将上述语法整合到一个完整的 Vue3 组件中，使用组合式 API（script setup）编写：

<template><div class="demo-container"><!-- 文本插值 --><h1>{{ title }}</h1><!-- Class 绑定 --><div :class="{ active: isActive, error: hasError }" class="status-box">动态样式演示</div><!-- 条件渲染 --><p v-if="showMessage">这是一条条件渲染的消息</p><!-- 列表渲染 --><ul class="item-list"><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul><!-- 事件处理 --><button @click="handleClick" class="btn">点击切换样式</button><!-- 表单绑定 --><input v-model="inputValue" placeholder="输入内容" class="input-demo"><p>你输入的是：{{ inputValue }}</p></div>
</template><script setup>
// 导入 Vue 响应式 API
import { ref, reactive } from "vue";// 响应式数据（基础类型用 ref，引用类型用 reactive）
const title = ref("Vue3 基础语法实战");
const isActive = ref(true);
const hasError = ref(false);
const showMessage = ref(true);
const inputValue = ref("");
const items = reactive([{ id: 1, name: "语法1：模板插值" },{ id: 2, name: "语法2：Class 绑定" },{ id: 3, name: "语法3：列表渲染" }
]);// 事件处理方法
const handleClick = () => {console.log("按钮被点击");isActive.value = !isActive.value; // ref 数据需通过 .value 访问hasError.value = !hasError.value;
};
</script><style scoped>
/* 简单样式（scoped 确保样式仅作用于当前组件） */
.demo-container { padding: 20px; }
.status-box { padding: 10px; margin: 10px 0; }
.active { background: #42b983; color: white; }
.error { border: 1px solid #ff4444; }
.item-list { margin: 10px 0; padding-left: 20px; }
.btn { padding: 8px 16px; background: #2c3e50; color: white; border: none; cursor: pointer; }
.input-demo { margin: 10px 0; padding: 8px; width: 300px; }
</style>