对Mvvm模式的理解及框架介绍

       使用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/