vue(一)特性、MVVM

一、vue 的特性

vue 框架的特性，主要体现在如下两方面：

        ① 数据驱动视图

         ② 双向数据绑定

1、数据驱动视图

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

当页面数据发生变化时，页面会自动重新渲染！  

注意：数据驱动视图是 单向的数据绑定 

2、双向数据绑定 

        在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内

容同步到数据源中。示意图如下：

 开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！

二、MVVM  

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

 MVVM 的工作原理

        ViewModel 作为 MVVM 的核心 ，是它把当前页面的 数据源 （Model）和 页面的结构 （View）

连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构。

当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中。