Vue学习之Vue中的MVVM架构

131 阅读2分钟

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中定义的一些函数 image.png image.png

计数器中的MVVM:

数据绑定:

通过Vue实例的Mustache语法(双大括号) image.png image.png

事件监听:

Vue实例是定义了一些指令的,指令让对应DOM绑定相应的事件。例如v-on指令绑定click事件,这个button就有了click事件,ViewModel就可以监听这个事件 Model上则会写一些处理对应事件的操作,这里是一个回调函数 这些指令也是ViewModel:Vue实例在解析 当button上的click事件发生时,ViewModel会监听到事件发生,然后调用Model中对应的回调函数进行处理 image.png Vuejs是一个标准的MVVM框架 image.png