当前位置: 首页 > Web前端 > vue.js

我的vue学习之03:MVVM

时间:2023-03-31 14:29:09 vue.js

Vue中的MVVM框架MVVM是ModelViewViewModel的缩写。这种模式的好处是:改变js中的数据,dom结构会随之改变,不需要手动修改dom。Model是数据,View是dom,ViewModel用于Model和View之间的通信。MVVM的设计思想是:关注Model的变化,让MVVM框架自动更新DOM,从而将开发者从操作DOM的繁琐步骤中解放出来!VUE中的MVVMview和model不能直接通信。他们通过viewModel进行通信。viewModel做了两件事:数据绑定:将date中定义的数据绑定到dom中监听view的事件,从js函数中回调相应的执行。思考:在上一讲计数器的情况下,谁是view,谁是model,谁又是viewModel?计数器源码如下:

当前计数:{{counter}}

+-
在这个反例中,dom就是view,model就是我们写在data属性中的值,这是一个对象。为了让这个模型的展示更加直观清晰,我们把数据单独提取出来,写:我们创建的vue实例newVue()就是ViewModel,它允许Model和View进行通信。