Vue简介

前言

vue2官方文档：https://cn.vuejs.org/ (opens new window)

Vue 是一款用于构建用户界面的渐进式框架，具有以:下主要特性：

• 数据驱动视图：Vue 通过响应式的数据绑定机制，实现了数据变化自动驱动视图更新。
• 双向数据绑定：通过 v-model 指令，Vue 实现了表单元素与数据的双向绑定。

2. 数据驱动视图

在使用 Vue 的页面中，Vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

数据驱动视图的好处在于，当页面数据发生变化时，页面会自动重新渲染。这意味着开发者不需要手动操作 DOM 来更新视图，Vue 会自动处理这一切。然而，数据驱动视图是单向的数据绑定。

3. 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：

双向数据绑定的好处是开发者不再需要手动操作 DOM 元素来获取表单元素的最新值。

4. MVVM

MVVM 是 Vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分，如图所示：

• Model：数据模型，表示数据层。
• View：视图层，表示用户界面。
• ViewModel：视图模型层，是 MVVM 的核心，负责连接 Model 和 View。

5. MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构View)连接在了一起：

• 数据变化：当数据源（Model）发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构（View）。
• 表单变化：当表单元素的值发生变化时，也会被 ViewModel 监听到，VM 会把变化后的最新值自动同步到 Model 数据源中。

6. 框架对比