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的核心
3.MVVM的工作原理
ViewModel是MVVM的核心,是它把当前页面的数据源(Model)和页面的结构(DOM)连接在了一起
- 当数据源发生变化时,会将ViewModel监听到,VM会根据最新的数据源自动更新DOM结构
- 当表单元素的值发生变化时,也会被VM监听到,VM会将变化过后最新的值自动同步到Model数据源中