知識點

• axios數(shù)據(jù)請求
• MVVM/MVC
• Vue和MVVM的曖昧關(guān)系
• 補充內(nèi)容

axios數(shù)據(jù)請求 {:&.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 的縮寫，就是 模型-視圖-控制器 , 也就是說一個標(biāo)準(zhǔn)的Web 應(yīng)用程序是由這三部分組成.
• View 用來把數(shù)據(jù)以某種方式呈現(xiàn)給用戶。Model 其實就是數(shù)據(jù)。Controller 接收并處理來自用戶的請求，并將 Model 返回給用戶。

• 中間的過渡過程
  • MVC 架構(gòu)模式對于簡單的應(yīng)用來看起是OK 的，也符合軟件架構(gòu)的分層思想。 但實際上，隨著H5 的不斷發(fā)展，人們更希望使用H5 開發(fā)的應(yīng)用能和Native 媲美，或者接近于原生App 的體驗效果，于是前端應(yīng)用的復(fù)雜程度已不同往日，今非昔比。這時前端開發(fā)就暴露出了三個痛點問題
    • 開發(fā)者在代碼中大量調(diào)用相同的 DOM API, 處理繁瑣 ，操作冗余，使得代碼難以維護(hù)。
    • 大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。
    • 當(dāng) Model 頻繁發(fā)生變化，開發(fā)者需要主動更新到View ；當(dāng)用戶的操作導(dǎo)致 Model 發(fā)生變化，開發(fā)者同樣需要將變化的數(shù)據(jù)同步到

MVVM

• MVVM 由 Model,View,ViewModel 三部分構(gòu)成，Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來，ViewModel 是一個同步View 和 Model的對象
• ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM,

Vue和MVVM的曖昧關(guān)系

• Vue.js 可以說是MVVM 架構(gòu)的很好實踐，專注于 MVVM 中的 ViewMode(只需關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM)
  [圖片上傳失敗...(image-4149a-1516350102775)]

補充內(nèi)容

• 實例屬性 ref
  • ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例
• $mount()

        // 可以使用 vm.$mount() 手動地掛載一個未掛載的實例。
        let vm=new Vue({
            data:{
                a:101
            }
        }).$mount('#box');
  

• v-pre

  • v-pre 跳過這個元素和它的子元素的編譯過程?？梢杂脕盹@示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點會加快編譯。

• v-cloak

  • 解決閃爍問題
    • 第一css設(shè)置

      <style>
          [v-cloak] {
            display: none;
          }
      </style>
      

    • 第二指令

• 自定義指令

  • 全局定義
  • 局部定義