当前位置:首页 > 资讯 > 开源软件 > 正文

学习使用MVVM模式的VUE框架(一)

发表于: 2015-06-03   作者:90后爱国   来源:转载   浏览次数:
摘要: MVVM简介MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成,结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。图1MVVM模式架构图使用MVVM模式有几大好处:1.低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View

MVVM简介

  MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成,结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。

  

学习使用MVVM模式的VUE框架(一)
图1 MVVM模式架构图

使用MVVM模式有几大好处:

  1. 低耦合。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

  2. 可重用性。可以把一些视图的逻辑放在ViewModel里面,让很多View重用这段视图逻辑。

  3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

  4. 可测试性。可以针对ViewModel来对界面(View)进行测试

模型、视图、视图模型的分工

  1. 视图(View)

  视图负责界面和显示。它通过DataContext(数据上下文)和ViewModel进行数据绑定,不直接与Model交互。 可以绑定Behavior/Comand来调用ViewModel的方法,Command是View到ViewModel的单向通行

 2. 视图模型(ViewModel)

  视图模型主要包括界面逻辑和模型数据封装,Behavior/Command事件响应处理,绑定属性定义和集合等。它是View和Model的桥梁,是对Model的抽象,比如:Model中数据格式是“年月日”,可以在ViewModel中转换Model的数据为“日月年”供View显示。

 View的代码隐藏(Code-Behind)部分可能包含界面逻辑或者应用逻辑的代码,这些代码会很难进行单元测试,应根据具体情况尽量避免。

  

学习使用MVVM模式的VUE框架(一)

  图2 View、ViewModel和Model的交互图

 Mediator模式

  对不同View、ViewModel之间的参数传递,一般通过事件实现数据传递,也可以定义全局静态变量来进行数据共享,在MVVM里,我们可以使用Mediator模式(中介者模式)进行跟优雅的处理。可以简单得理解为不同的ViewModel或者View需要进行了操作之后,需要其他ViewModel或者View进行相应的其他操作或者数据更新,而中介类可以准确得将更新准确得通知到正确的ViewModel,同时中介者并不关心ViewModel或者View的任何操作或者数据更新。

  

学习使用MVVM模式的VUE框架(一)

  图3 ViewModel通过Mediator模式与其他ViewModel的交互图

 3. 模型(Model)

  Model与MVC模式一样,Model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。它具有对数据直接访问的权利,例如对数据库的访问,Model不依赖于View和ViewModel,也就是说,模型不关心会被如何显示或是如何被操作,模型也不能包含任何用户使用的与界面相关的逻辑。Model在实际开发中根据实际情况可以进行细分。

学习使用MVVM模式的VUE框架(一)

  图4 Model的细分层次关系

学习VUE.js

Vue.js 是用于构建交互式的 Web  界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架,Vue.js 更容易上手。

html

<div id="demo">
  {{message}}
  <input v-model="message">
</div>

javascript

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})


学习使用MVVM模式的VUE框架(一)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
从Prism中学习设计模式之MVVM 模式(一)--简述MVVM 在学习Prism中涉及的MVVM之前,我想有必要分别把M
主要是为了总结学习RAC的过程中,遇到的一些困惑点,一些阅读的参考资料,文笔也不是很好。建议大家
MVVM模式是Model、View、ViewModel的简称,最早出现在WPF,现在Silverlight中也使用该模式,MVVM模
编辑器加载中...MVVM模式是Model、View、ViewModel的简称,最早出现在WPF,现在Silverlight中也使用
本章节,主要是介绍avalon.config方法,通过它来制定一些更贴心的功能。 一般情况下,我们在使用ms-
为了验证avalon的可用性与高效性,我用它重新实现jQuery ui。打造过程如下,直接到jQuery ui官网,
使用SilverLight、WPF也有很长时间了,但是知道Binding、Command的基本用法,对于原理性的东西,一
在上一讲中介绍了MVVM的核心概念,运用MVVM模式可以分离视图、视图逻辑和模型,提高可测试性和可维
MVVM MVVM 是 Model-View-ViewModel 的简写,MVVM 模式和 MVC 模式一样,主要目的是分离视图(View
avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终。其
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号