vue简介

1.vue特性

vue框架有两个特性

• 数据驱动视图
• 双向数据绑定

1.1 数据驱动视图

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

• 好处：当数据发生变化，页面会重新进行渲染
• 注意：数据驱动视图是单向数据绑定。

1.2 双向数据绑定

在填写表单时，双向数据绑定可以让开发者在不操作DOM的前提下，自动将用户所填写的最新的数据同步到数据源中。

• 好处：开发者可以不操作DOM，来获取表单元素的值

• js数据的变化，会自动渲染到页面上

• 页面上数据的变化，会被vue自动同步到js数据中。

2.MVVM

MVVM是数据驱动视图和双向数据绑定的原理。MVVM指的是Model、View、ViewModel，它把每个HTML页面拆分了三个部分

• Model是页面渲染时所依赖的数据源
• View是指页面渲染的DOM结构
• ViewModel是指vue的实例，它是MVVM的核心

28.png

3.MVVM的工作原理

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

• 当数据源发生变化时，会将ViewModel监听到，VM会根据最新的数据源自动更新DOM结构
• 当表单元素的值发生变化时，也会被VM监听到，VM会将变化过后最新的值自动同步到Model数据源中

29.png

4.总结

vue的简介.png