Vue.js从入门到精通教程第3讲聚焦核心基础，系统讲解模板语法与数据绑定，内容涵盖插值表达式、指令系统（如v-bind、v-model、v-if、v-for、v-on），通过实例演示数据与视图的联动逻辑，深入理解单向绑定与双向绑定的应用场景及响应式原理基础，本讲强调实战操作，帮助学员掌握数据驱动视图的核心思想，为后续组件开发与复杂功能实现筑牢根基，是Vue入门阶段的关键衔接。
Vue.js 从入门到精通教程第3讲：核心概念——数据绑定与事件处理
在前两讲中,我们已经成功搭建了 Vue.js 的开发环境，并亲手创建了第一个“Hello World”应用，从本讲开始，我们将深入探索 Vue.js 的核心概念。数据绑定 与 事件处理 是 Vue 实现响应式数据驱动视图和构建用户交互体验的基石，也是后续学习组件化、路由等高级功能的必备基础，本讲将结合理论讲解与丰富的代码示例，助您彻底掌握这两大核心功能。
数据绑定：让数据与视图“同步呼吸”
Vue.js 的核心哲学在于 “数据驱动视图” (Data-Driven View)，这意味着当应用程序中的数据发生变化时，与之关联的视图（UI）会自动、高效地更新，而无需开发者手动操作 DOM（文档对象模型），这种“数据”与“视图”之间的自动同步机制，正是通过 Vue 强大的 数据绑定 系统实现的，Vue 提供了多种灵活的数据绑定方式，以适应不同的开发场景。
插值表达式：基础数据渲染
插值表达式是 Vue 中最基础、最直观的数据绑定方式，用于在 HTML 模板中直接输出数据，其语法为使用双大括号包裹表达式：`{{ }}`，Vue 会自动将 `{{ }}` 中的表达式替换为 Vue 实例中对应属性的值，并支持在括号内执行简单的 JavaScript 运算。
示例：插值表达式的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js 第3讲：插值表达式示例</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>当前时间：{{ currentTime }}</p> <!-- 注意：此时间在初始渲染后不会自动更新 -->
<p>计算结果：{{ 10 + 20 }}</p>
<p>是否显示：{{ isVisible ? '是' : '否' }}</p>
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Vue.js 数据绑定示例",
currentTime: new Date().toLocaleString(), // 初始时间
isVisible: true
}
}
}).mount('#app');
</script>
</body>
</html>
说明：
{{ message }}：直接输出 `data()` 函数返回对象中 `message` 属性的字符串值。{{ currentTime }}：输出动态时间戳。**重要提示**：此值仅在组件首次渲染时计算一次，后续时间变化不会自动更新视图，若需实时更新，需使用计算属性（Computed Property）或侦听器（Watcher）。{{ 10 + 20 }}：支持在插值表达式中执行简单的 JavaScript 表达式，如基本运算、三元运算符等。- 核心限制：插值表达式 `{{ }}` 仅用于渲染文本内容。**不能直接用于绑定 HTML 属性**（如 `class`, `style`, `src`, `href` 等），属性绑定需使用 `v-bind` 指令。
v-bind：动态绑定 HTML 属性
当需要根据数据动态绑定或更新 HTML 元素的属性（如 `class`, `style`, `src`, `href`, `disabled`, `title` 等）时，必须使用 Vue 的 `v-bind` 指令，其语法为 `v-bind:属性名`，在 Vue 中提供了一种更简洁的写法：**以冒号 `:` 开头**，即 `:属性名`。
示例：动态绑定 `class`, `style` 和 `src`
<div id="app">
<!-- 动态绑定 class：对象语法 -->
<p :class="{ active: isActive, 'text-danger': isError }">文本样式示例</p>
<!-- 动态绑定 style：对象语法 -->
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">字体样式示例</p>
<!-- 动态绑定图片 src -->
<img :src="imageUrl" alt="示例图片">
</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
isActive: true, // 控制是否添加 'active' 类
isError: false, // 控制是否添加 'text-danger' 类
textColor: 'blue', // 动态设置文本颜色
fontSize: 16, // 动态设置字体大小（单位px）
imageUrl: 'https://vuejs.org/images/logo.png' // 动态设置图片路径
}
}
}).mount('#app');
</script>
