ViewModel是Model 和 View之间通信的桥梁
当有数据需要展示时,ViewModel会自动将Model上的数据绑定到View上;当View上有一些事件或一些操作时,它也是通过ViewModel改变Model的
解析
View对应DOM
Model对应数据:网络请求来的或JS定义的数据
ViewModel相当于:Vue实例
ViewModel帮助我们做了两件事情:
- 数据绑定:Model中的数据绑定到View中
- VIew中只需要写Model中对应的语法,到时候ViewModel会将Model中的真实数据解析绑定到View的DOM上
- 响应式的,Model中的数据一旦改变ViewModel会自动检测到数据的改变,将Model中最新的数据返回到View上
- 当view上有一些事件或者有一些操作时(一些指令:是Vue实例定义的),ViewModel的模型Vue实例定义的指令会将事件响应相关的东西绑定到Model上,ViewModel也会对View进行监听;Model中会写一些JS,当事件发生时进行一些操作;当View中的事件发生时,ViewModel会监听到View中的响应,然后回调Model中定义的一些函数
计数器中的MVVM:
数据绑定:
通过Vue实例的Mustache语法(双大括号)
事件监听:
Vue实例是定义了一些指令的,指令让对应DOM绑定相应的事件。例如v-on指令绑定click事件,这个button就有了click事件,ViewModel就可以监听这个事件
Model上则会写一些处理对应事件的操作,这里是一个回调函数
这些指令也是ViewModel:Vue实例在解析
当button上的click事件发生时,ViewModel会监听到事件发生,然后调用Model中对应的回调函数进行处理
Vuejs是一个标准的MVVM框架