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设置
        
        
      • 第二指令
  • 自定义指令

    • 全局定义
    • 局部定义

你可能感兴趣的:(axios数据请求/MVVM/MVC)