【Vue2 ✨】Vue2 入门之旅（一）：初识 Vue2
本系列文章将带你从零开始理解 Vue2 的核心知识点，不会直接堆砌 API，而是通过问题切入、实例讲解，帮你逐步掌握 Vue2 的思维方式。
目录
- 为什么要学 Vue2？
- Vue 的核心思想：MVVM
- 第一个 Vue 示例
- 小结
为什么要学 Vue2？
在没有框架的年代，前端开发需要手动操作 DOM：
- 想修改一段文字 →
document.querySelector(...).innerText = ... - 想动态插入元素 →
createElement+appendChild - 想更新多个地方的状态 → 每个 DOM 都得自己管理
这就像要给房子刷漆，得一个房间一个房间刷，费时又容易漏掉。
Vue 出现的意义，就是帮我们 声明式地描述界面：
- 我只要说"我想让页面显示这个数据"
- Vue 就会自动把数据和 DOM 同步
- 当数据变化时，界面自动更新
Vue 的核心思想：MVVM
Vue2 基于 MVVM 模型（Model-View-ViewModel）：
- Model：数据（JS 对象/变量）
- View：界面（HTML 模板）
- ViewModel：Vue 框架做的事情，帮我们把数据和界面连接起来
你只需要关心数据，界面会自动跟着变。
第一个 Vue 示例
我们来写一个最简单的例子，体会 Vue 的声明式渲染。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Vue2 入门之旅</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><button @click="changeMessage">点我修改</button></div><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {changeMessage: function () {this.message = '你点击了按钮！'}}})</script>
</body>
</html>
运行结果：
- 页面初始显示 Hello Vue!
- 点击按钮后，文字变成 你点击了按钮！
这里你只操作了数据 message，但页面就自动更新了。
小结
- Vue2 的目标是：让数据驱动视图。
- 开发者只需要管理数据，不必直接操作 DOM。
- 通过
new Vue({...})就能创建一个最简单的应用。
📕下一篇文章，我们将进入 模板语法，讲讲 Vue2 中{{}}、v-bind、v-if 等常用指令的用法。