Vue系列课程一

官方介绍

Vue是一套用于构建用户界面的渐进式框架，与其他的框架不同，vue的设计自底而上逐层应用。

渐进式

框架分层设计，每层都可选，不同的层都可以灵活的接入其他的方案更便捷的协作。 一个一个的放入，放入多少就做多少。

MV* 模式（MVC/MVVM）

MVC设计模式的引入

客户通过浏览器或者app等进行数据的操作，实现这个的有，处理发送请求，业务逻辑处理以及访问数据库，这三个功能我们是可以放到一块使用的，但是如果放在一起，代码便会很臃肿，不利于维护，于是便出现了代码分层思想，把代码按照功能分为三层，即模型层(Model)、显示层(View)、控制层(Controller)，这种代码的组织架构就叫MVC模式。

 

模型层(Model):

• Service层:负责一些业务处理，比如说：获取数据库连接，关闭数据库连接，事务回滚或者一些复杂的逻辑业务处理
• Dao层：负责访问数据库，对数据的操作，获取结果集

Controller层：主要功能是处理用户的请求

 

用户对View操作以后，View会把处理的权利交移给Controller；

Controller会对来自View数据进行预处理、决定调用哪个Model的接口；

然后由Model执行相关的业务逻辑（数据请求）；

当Model变更了以后，会通过观察者模式（Observer Pattern）通知View；

View通过观察者模式收到Model变更的消息以后，会向Model请求最新的数据，然后重新更新界面。 

 

前后端的分手大师-MVVM

核心是 ViewModel 层，它就像是一个中转站，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，

该层向上与视图层进行双向数据绑定，

向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

 

举个栗子：

view层

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

vm层

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"
    }
}

　View的心跳体验

• 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  命令行工具vue cli

• Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。

   npm install -g @vue/cli

   真相只有一个-数据绑定原理