什么是vue、vue特性、双向数据绑定和单向数据绑定以及插件安装、MVVM原理

Vue-devtools插件安装地址：

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

插件配置：

​

 ​

 1.什么是vue?

官方给出的概念: Vue (读音/vju:/,类似于view)是一套用于构建用户界面的前端框架。

2.vue的特性

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

① 数据驱动视图

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

​

好处：当页面数据发生变化时，页面会自动重新渲染! 

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

② 双向数据绑定

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

​

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

相当于：js数据的变化，会被自动渲染到页面上；页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

3.MVVM

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

​

 在MVVM概念中:

Model表示当前页面渲染时所依赖的数据源。

View表示当前页面所渲染的DOM结构。

ViewModel表示vue的实例，它是MVVM的核心。

3.1 MVVM的工作原理

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

​

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

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

注意:数据驱动视图和双向数据绑定的底层原理是MVVM (Mode 数据源、View 视图、ViewModel 就是vue的实例)