Vue学习--02＜mvvm框架＞

vscode的一些快捷键

!+tab键:快速生成html框架

ctrl+/:快速注释括号

注意事项:

1.在vscode中的额vue的"v"记得要大写

2.记得导入js包的路径不要出错

3.使用v-clock:解决表达式插入闪烁的问题

4.<!-- v-text会覆盖元素中原来的内容,但是差值表示,只会替换自己的这个字符,不会把

        整个元素的内容清空 -->

v-bind

用于vue中,提共用于绑定属性的指令

可以被简写成:要绑定的属性

v-on

事假绑定机制

总结

一句话总结：vm层（视图模型层）通过接口从后台m层（model层）请求数据，vm层继而和v（view层）实现数据的双向绑定。

只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。

后端：我们这里的业务逻辑和数据处理会非常复杂！
前端：关我屁事！

后端业务处理再复杂跟我们前端也没有半毛钱关系，只要后端保证对外接口足够简单就行了，我请求api，你把数据返出来，咱俩就这点关系，其他都扯淡。

所以我这边开发也是同样的，前端就负责请求api就好，别的都不需要。

mvc和mvvm的关系？

改进版

数据分离

视图模型层

c（控制层）被换成了vm（viewmodel）层

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

mvvm层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可）

MVVM框架编码实例

Vue 实例来说明 MVVM 的具体表现。

Vue 的 View 模板：

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>
 

Vue 的 ViewModel 层（下面是伪代码）：

var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;
 
        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})
 

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}
 

前端框架MVVM出现的最大意义是什么？

开发效率

前后端 业务逻辑 分离

接口

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。

MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系。

MVVM在感觉上要比mvc模式前后端要分的更开

Model–View–ViewModel(MVVM) 是一个软件架构设计模式，由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。

MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

组成部分

简单画了一张图来说明 MVVM 的各个组成部分：