什么是 Vue

Vue（读音 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

框架定位

在讨论 Vue 之前，我们先搞清楚它到底解决了什么问题。

前端开发的核心任务是将数据展示给用户，并响应用户的操作。在传统的开发模式下，我们需要：

1. 手动获取 DOM 元素
2. 手动设置元素的值
3. 手动绑定事件
4. 手动更新界面

这种方式在小型项目中还算可控，但随着项目规模增长，代码会变得难以维护。

var count = 0
var countEl = document.getElementById('count')
var btnEl = document.getElementById('btn')

countEl.textContent = count

btnEl.addEventListener('click', function() {
  count++
  countEl.textContent = count
})

Vue 的解决方案是：让数据和视图自动同步。你只需要关注数据的变化，视图会自动更新。

MVVM 模式

Vue 的设计灵感来自 MVVM（Model-View-ViewModel）模式：

┌─────────────┐        ┌─────────────┐        ┌─────────────┐
│    Model    │◄──────►│  ViewModel  │◄──────►│    View     │
│   (数据)    │        │   (Vue)     │        │   (视图)    │
└─────────────┘        └─────────────┘        └─────────────┘

• Model：数据层，对应 Vue 实例中的 data
• View：视图层，对应 DOM 模板
• ViewModel：Vue 实例，负责数据绑定和 DOM 监听

在 Vue 中，ViewModel 是核心。它通过数据绑定将 Model 的变化自动反映到 View，通过DOM 监听将 View 的变化自动更新到 Model。

一个简单的例子

<div id="app">
  <input type="text" v-model="message">
  <p>你输入的是：{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  }
})
</script>

这个例子展示了 Vue 的核心功能：

1. v-model 指令实现了输入框和数据的双向绑定
2. {{ message }} 插值表达式将数据显示在页面上
3. 当输入框内容改变时，message 自动更新，页面显示也随之更新

Vue 不是什么

了解 Vue 不是什么，同样重要：

Vue 不是完整的 MVC 框架

Vue 只关注视图层，不提供路由、状态管理、HTTP 请求等功能。这些功能由官方维护的配套库（Vue Router、Vuex、axios）提供。

Vue 不是 jQuery 的替代品

jQuery 是一个 DOM 操作库，Vue 是一个构建界面的框架。它们解决的问题不同，可以在同一个项目中使用（虽然不推荐）。

Vue 不是 React

React 是一个库，Vue 是一个框架。React 更灵活，Vue 更开箱即用。选择哪一个取决于团队偏好和项目需求。

Vue 的适用场景

适合

• 单页应用（SPA）
• 管理后台
• 移动端 Web 应用
• 渐进式增强传统页面
• 嵌入第三方系统的组件

不太适合

• 简单的静态页面（杀鸡用牛刀）
• 对性能要求极高的场景（虚拟 DOM 有开销）
• 需要兼容 IE8 及以下的项目（Vue 只支持 IE9+）

版本说明

本教程基于 Vue 2.x 版本。Vue 2 和 Vue 3 的主要区别：

虽然 Vue 3 已经发布，但 Vue 2 仍然被广泛使用，很多现有项目仍在 Vue 2 上运行。学习 Vue 2 的知识对于维护这些项目非常重要。

小结

Vue 是一个渐进式 JavaScript 框架，核心特性是响应式数据绑定和组件化。它让开发者可以专注于业务逻辑，而不是手动操作 DOM。在接下来的章节中，我们将深入学习 Vue 的各项功能。