使用WPF+Mvvm开发一年多,期间由于对Mvvm模式的理解不足,遇到了很多问题,也绕了很多弯子;网上提供的Mvvm的示例比较简单,实际项目中的需求也各种各样。
不过经过几个项目,也有了一些对Mvvm模式的理解:
1. Mvvm是什么,Mvvm是怎么来的?
Mvvm模式广泛应用在WPF项目开发中,使用此模式可以把UI和业务逻辑分离开,使UI设计人员和业务逻辑人员能够分工明确。
Mvvm模式是根据MVP模式来的,可以简单的说,Mvvm模式就是WPF版的MVP模式。MVP模式,MVC模式,这几个模式都是为了抽离出UI逻辑和业务逻辑。
2. 使用Mvvm模式可以参考的主流框架及简单介绍。
主流开源框架:Simple Mvvm,Mvvm Light和Prism。
Simple Mvvm和Mvvm Light基本一致,都是对Mvvm模式的基础封装,并加入了一些不错的功能,消息传输机制,依赖注入等等。开发中小项目推荐使用这两个的其中一个。
Prism是微软给出的一个Mvvm框架,不过它的关注点不仅仅是Mvvm模式,我觉得主要是模块的思想更多一些。大项目的话才推荐使用这个框架,比如一个系统需要分为N个团队进行不同模块的开发,然后再组织成一个系统。
3. 使用Mvvm模式的思想分析问题。
现在有一个功能:用户填入姓名,年龄,选择最喜欢的颜色,然后点击确定按钮提交。就是这样简单的一个调查表。
a.首先设计UI,UI看起来可能是这样的:
b.根据UI去设计对应的ViewModel层需要那些属性,数据和命令:
Name:string Age:int FavoriteColor:string Submit:Command
c.在ViewModel层的SubmitCommand命令中,调用Model层的Submit方法进行逻辑处理。Model层看起来可能是这样的:
public string Name { get; set; } public int Age { get; set; } public string FavoriteColor { get; set; } public void Submit() { ... }
4. 看到的一些对Mvvm模式的看法,觉得不太正确。
a.Code-Behind文件要保证绝对干净。
这个说法有些太绝对了,理想状态下,View层的Code-Behind文件中只有在构造函数中调用初始UI元素的一行代码及设置View层的DataContext为对于的ViewModel层。
其实,Code-Behind中还可以些一些UI的逻辑的,比如一些丰富的动画效果,或者直接设置某个元素的样式等。
不过,Code-Behind中确实是不可以写业务逻辑的。
b.ViewModel层不能是Model层的简单封装,ViewModel层也不能是View层的简单映射。ViewModel层和View层要绝对分离,ViewModel层要和View层一样去面向需求设计。
我觉得这样做有点太过了。
Mvvm的目的只是为了UI逻辑和业务逻辑的分离,你说业务逻辑和数据要写在哪一层呢?没错,Model层。
ViewModel层的主要责任是表现逻辑和状态,即ViewModel层是连接View层和Model层的。Model层的一些业务逻辑的状态是需要通过ViewModel层暴露给View层来反映给软件使用者的。
5.我对WPF+Mvvm模式开发的一些经验。
a.WPF的几个重要概念要熟练理解和运用:模板,依赖属性,数据绑定。和Mvvm模式的结合使用,能发挥出很好的效果。
b.团队中的成员最好能够对Mvvm模式有统一的理解和认识。
c.Mvvm模式只是一个模式而已,不是有了Mvvm模式就能写出优美的代码,涉及到具体的业务逻辑,还是需要你以及你的团队有足够强的设计能力。
6.vue.js介绍
vue的核心:修改数据(model),html节点就会自动更新
(1)绑定数据:
- var vm;
- var count=1;
- $(function () {
- vm=new Vue({
- el: '#demo',
- data: {
- message: 'Hello World!',
- number: 2,
- ok:true,
- name:'whuang'
- }
- });
- vm.$watch('data', function (newVal, oldVal) {
- console.log('$watch');
- })
- });
html代码:
- <div id="demo">
- {{ message }}<br>
- {{ number + 1 }}<br>
- {{ ok ? 'YES' : 'NO' }}<br>
- {{ message.split('').reverse().join('') }}<br>
- {{ name | uppercase }}
- <hr>
- <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
- </div>
(2)动态更新数据
- var updateData2= function () {
- vm.$data.message="更新后的数据"+(count++);
- vm.$data.ok=false;
- };
如何获取vue的data?
注意:data前面要加$
(3)vue表达式
- {{ number + 1 }}<br>
- {{ ok ? 'YES' : 'NO' }}<br>
- {{ message.split('').reverse().join('') }}<br>
- {{ name | uppercase }}
动态修改样式:
- <input type="button" class="{{ ok ? 'cls1' : 'cls2' }}" value="更新数据" onclick="updateData2()" >
在js方法中修改ok的值即可
(4)vue计算属性
- var vm = new Vue({
- el: '#example',
- data: {
- a: 1
- },
- computed: {
- // 一个计算属性的 getter
- b: function () {
- // `this` 指向 vm 实例
- return this.a + 1
- },
- upper: function () {
- return "<span style='color:red' >school</span>".toUpperCase();
- },
- haha: function () {
- return 'iloveyou'.split('');
- }
- }
- })
html代码:
- <div id="example">
- a={{ a }}, b={{ b }}<br>
- {{{ upper }}}<br>
- {{ haha }}<br>
- </div>
(5)监听数据的变化
执行结果:
new:更新后的数据1;old:Hello World!
(6)如何获取vue的节点和数据
节点:vm.$el
数据:vm.$data
各位大牛如有不同的观点可以一起讨论下。作者:backslash112 出处:http://sirkevin.cnblogs.com/
相关推荐
对MVVM的理解? MVVM是什么? MVVM 模式,顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ,前端最早的 MVVM 框架 knockout 在2010年发布。 Model 层: 对应数据层的...
MVVM是Model-View-ViewModel的简写。...MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性
用style框架 实现MVVM模式开发,逻辑清晰、便于理解,对于学习MVP模式有很大帮助!开发基于 vs2015 IDE
对初学者推荐一个易入门的 WPF 例子。 这个例子是一个简单的待办事项列表应用程序,它展示了 WPF 的核心概念和语法。这个应用程序有一个主窗口,在其中用户可以添加、编辑和删除待办事项。通过这个例子,学习者可以...
现在市场很多前端开发的招聘岗位都或多或少的要求你要掌握vue,可以说vue在国内是非常的火爆的,下面我给大家介绍一下vue框架吧! vue是渐进式框架 vue的核心是一个视图模板引擎,但是这并不能说明vue不是一个框架...
说起这个MVVM模型,就不得不说MVC框架。将整个前端页面分成View,Controller,Modal,视图上发生变化,通过Controller(控件)将响应传入到Model(数据源),由数据源改变View上面的数据。整个过程看起来是行云流水...
MVC,MVP 和 MVVM 模式如何选择? 你真的理解了MVC, MVP, MVVM吗? 其中第一篇文章是比较偏理论的分析, 第二篇文章中,在介绍时,包含了一些实际的案例 看完这两篇文章,可以总结如下: 1.1 MVC 1.1.1 类图 1.1.2. 活动...
第一次认识到关于MVVM的一些错误理解是通过介绍文章,大家可以仔细阅读这篇文章。 随着对架构的逐步深入认识,对MVVM的概念又逐渐模糊起来。在Android开发中,到底什么是MVVM架构? 数据驱动UI? ViewModel
由于本人项目经验有限,关于架构设计方面的东西理解有限,我个人对MVVM的理解主要是借鉴于之前的用过的MVC的Web框架~在学校的时候用过ThinkPHP框架,和SSH框架,都是MVC的架构模式,今天MVVM与传统的MVC可谓是极为...
我的理解DataBinding是一个实现数据和UI绑定的框架,只是一个实现MVVM模式的工具。ViewModel和View可以通过DataBinding来实现单向绑定和双向绑定,这套UI和数据之间的动态监听和动态更新的框架Google已经帮我们做好...
MVVM模式到底是什么呢?要说到MVVM这种模式,则必须要提及另一种大多数开发者都能耳熟能详的模式,就是MVC模式。 什么是MVC? 在前几年,前后端完全分离开之前,很多很火的后端框架都会说自己是支持MVC模式,像JAVA...
MVVM 简单模拟框架实作tags: JavaScript , Vuejs , MVVM背景某天闲来无事时,刚好搜寻到一篇介绍MVVM 的好文,仔细阅读后觉得收获颇多,决定将一些想法跟理解记录下来所诞生。概要将该篇文章所讲的主要概念转为我...
为了更深入的理解Jetpack中各个组件,在前段时间基于Jetpack MVVM又实现了一版WanAndroid 。相比上一版的MVP增加了夜间模式状语从句:音乐播放器,器播放界面仿照网易云音乐。 App中也先上图look一波先附上github: ...
1. 请介绍一下你对 VUE 的理解? VUE 是一个基于 MVVM 架构的前端渐进式框架,能够轻松地构建交互式的 Web 界面。它的核心思想是数据驱动视图,通过监听数据的变化来自动更新页面,从而简化了页面的开发流程。 2. ...
vue.js 是一种流行的 mvvm 模式的框架,其核心思想是 数据驱动 和 组件化,相比于 Angular.js , vue.js 提供了更加简洁,更易理解的API, 使我们能够快速上手开发。 1、主要难点在于vuex状态管理,对于首次运用...
特点: MVVM 模式;代码简洁体积小,运行效率高,适合移动PC端开发;本身只关注 UI (和 react 相似),可以轻松引入 Vue 插件或其他的第三方库进行开发。 思考一下自己所说的那些点,自己都非常清楚明白吗? 下面呢...
本项目利用DMSkin搭建无边界的页面,利用MVVM搭建框架,松耦合,帮助理解MVVM设计模式.
现在一边查资料,并结合自己的理解,来谈一下对于这三种模式思想的理解,以及它们的区别。欢迎各位高手拍砖。 阅读目录: 代码如下:一. MVC, MVP, MVVM诞生的需求? 二. 一段典型的耦合代码 三. MVC模式 3.1 主动...