Vue.js 入门到实战基础语法篇之数据绑定的基本实现和代码分析

从 MVVM 聊起

Vue.js 是一个简单、小巧的渐进式 JavaScript 框架，提供了现代 Web 开发中常用的高级功能：

• 解耦视图和数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟 DOM

接下来，将围绕这些功能来给大家介绍 Vue.js 的基本语法和使用。

Vue.js 是一个典型的 MVVM（Model-View-ViewModel）模型框架，MVVM 由 MVC 演化而来（）：View 的变动，会自动更新到 ViewModel，反之亦然，这种机制叫做双向绑定。

这也是 Vue.js 相较于传统 JavaScript 的优势，通过这种数据双向绑定，我们可以轻松实现视图与数据的解耦：

接下来，我们就从数据绑定开始，探索 Vue.js 框架的使用。

注：本系列教程依然基于 Vue 2.x，使用的代码编辑器是 IntelliJ IDEA，你可以按照自己的喜好选择代码编辑器，比如 WebStorm、PhpStorm、VS Code、Sublime Text 等。IntelliJ IDEA 和 PhpStorm 都集成了 WebStorm 的所有功能，并且 IntelliJ IDEA 还可以通过插件集成 PhpStorm、GoLand、PyCharm 的所有功能，所以 IntelliJ IDEA 是 JetBrains 全家桶里面的全能王࿰