axios数据请求/MVVM/MVC

知识点

• axios数据请求
• MVVM/MVC
• Vue和MVVM的暧昧关系
• 补充内容

axios数据请求 {:&.flexbox.vleft}

• 概念
  • 基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用
  • github地址
• 基本例子

axios.get('http://api.openweathermap.org/data/2.5/forecast/daily?q=Beijing&appid=7c5219469d1d3aa869d2599559d26fc1&lang=zh_cn')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

MVVM/MVC

MVC

• 概述
  • MVC 即 Model-View-Controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成.
• View 用来把数据以某种方式呈现给用户。Model 其实就是数据。Controller 接收并处理来自用户的请求，并将 Model 返回给用户。

• 中间的过渡过程
  • MVC 架构模式对于简单的应用来看起是OK 的，也符合软件架构的分层思想。 但实际上，随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题
    • 开发者在代码中大量调用相同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以维护。
    • 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
    • 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到

MVVM

• MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象
• ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM,

Vue和MVVM的暧昧关系

• Vue.js 可以说是MVVM 架构的很好实践，专注于 MVVM 中的 ViewMode(只需关注业务逻辑，不需要手动操作DOM)
  [图片上传失败...(image-4149a-1516350102775)]

补充内容

• 实例属性 ref
  • ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例
• $mount()

        // 可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
        let vm=new Vue({
            data:{
                a:101
            }
        }).$mount('#box');
  

• v-pre

  • v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

• v-cloak

  • 解决闪烁问题
    • 第一css设置

    • 第二指令

• 自定义指令

  • 全局定义
  • 局部定义