Vue中的MVVM【第三篇】

大纲

        MVVM图示

  一、MVVM简介 

        简单来说MVVMM-VM-M一种更好的UI模式解决方案MVVM通过数据双向绑定让数据自动地双向同步。

M(Model)Model数据模型json格式数据

V(View)View视图jsp、html

VM(ViewModel)ViewModel视图模型

   二、MVVM详解

       我以MVVM图示来进行详解View为Dom层Model相当于对应的数据(js)ViewModel相当于Vue实例Data Bindings(绑定事件)DOM Listeners(DOM监听)。

    ❓  第一个问题(question)若View和Model之间想要进行通信怎么处理呢

 answer

        首先我们要知道 View 和 Model 它们俩是不能直接进行通信的需要通过ViewModelViewModel帮助我们做了2件事。

  ️ 会将我们 (Mode) data 中定义的数据绑定到 View(真实的Dom上) 中我们只需编写ViewModel 固定的语法即可至于里面具体什么数据都会由ViewModel进行解析解析完成更新到界面上。

  ❗️ 提示

        Model 是响应式的数据一旦发生改变它会自动监测到这个数据的改变把最新的数据重新绑定到View界面上故View上面显示的永远都是Model中最新的数据。

  ️ 它实现了DOM Listener(DOM监听)当DOM发生一些事件如点击、滚动、touch[触摸]事件等时可以监听到并在需要的情况下改变对应的Data。

  三、MVVM案例

在我第二篇的计数器案例中就有严格的MVVM思想。

 ⭐ View依然是我们的DOM
 ⭐ Model就是data中的数据
 ⭐ ViewModel就是我们创建的Vue对象实例

❓  第二个问题(question)它们之间如何工作呢 ?
  answer

        首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
        其次ViewModel通过DOM Listener来监听DOM事件并且通过methods中的操作来改变obj中的数据。

四、MVVM总结

 View层:

     1、视图层 (在我们前端开发中通常就是DOM层)
    主要的作用给用户展示各种信息。
 Model层:
     2、数据层
    数据可能是我们固定的死数据更多的是来自我们服务器从网络上请求下来的数据。 ViewModel层:
       3、视图模型层
       视图模型层是 View和Model 沟通的桥梁。
一方面它实现了Data Binding也就是数据绑定将Model的改变实时的反应到View中
另一方面它实现了DOM Listener也就是DOM监听当DOM发生一些事件(点击、滚动、touch等)时可以监听到并在需要的情况下改变对应的Data。