Vue學習第三天

複習

• 路由操做的基本步驟

引入對象
import VueRouter from 'vue-router';
安裝插件
Vue.use(VueRouter);   掛載屬性的行爲
建立路由對象
let router = new VueRouter({
    routes:[
        { name:'xxx',path:'/xxx',組件  }
    ]
});
將路由對象放入到options中new Vue()
new Vue({
    router
})

• 套路

  • 1: 去哪裏 <router-link :to="{name:'bj'}"></router-link>
  • 2: 導航(配置路由規則) {name:'bj',path:'/beijing',組件A}

  • 3: 去了幹嗎(在組件A內幹什麼)

    • 在created事件函數中，獲取路由參數
    • 發起請求，把數據掛載上去

• 參數

  • 查詢字符串（#/beijing?id=1&age=2）

    • 1: 去哪裏 <router-link :to="{name:'bj',query:{id:1,age:2} }"></router-link>
    • 2: 導航(配置路由規則) {name:'bj',path:'/beijing',組件A}

    • 3: 去了幹嗎(在組件A內幹什麼)

      • this.$route.query.id||age

  • path(#/beijing/1/2)

    • 1: 去哪裏 <router-link :to="{name:'bj',params:{id:1,age:2} }"></router-link>
    • 2: 導航(配置路由規則) {name:'bj',path:'/beijing/:id/:age',組件A}

    • 3: 去了幹嗎(在組件A內幹什麼)

      • this.$route.params.id||age

• 編程導航

  • 一個獲取信息的只讀對象($route)
  • 一個具有功能函數的對象($router)
  • 根據瀏覽器歷史記錄前進和後臺 this.$router.go(1|-1);
  • 跳轉到指定路由 this.$router.push({ name:'bj' });

• 嵌套路由

  • 讓變化的視圖(router-view)產生包含關係(router-view)
  • 讓路由與router-view關聯，而且也產生父子關係

• 多視圖

  • 讓視圖更爲靈活，之前一個一放，如今能夠放多個，經過配置能夠去修改

• axios:

  • 開始:

    • 跨域 + 默認的頭是由於你的數據是對象，因此content-type:application/json
    • 有OPTIONS預檢請求（瀏覽器自動發起）

  • 最終:

    • 當咱們調整爲字符串數據，引發content-type變爲了www鍵值對
    • 沒有那個OPTIONS預檢請求
  • 總結： 跨域 + application/json 會引發OPTIONS預檢請求，而且自定義一個頭(提示服務器，此次的content-type較爲特殊)，content-type的值
  • 服務器認爲這個是一次請求，而沒有容許content-type的頭，
  • 瀏覽器就認爲服務器不必定能處理掉這個特殊的頭的數據
  • 拋出異常
  • 在node服務器 response.setHeader("Access-Control-Allow-Headers","content-type,多個");
  • formdata的樣子: key=value&key=value

• axios屬性關係

  • options: headers、baseURL、params
    例如：

    axios.defaults.baseURL='http://www.baidu.com/'

  • 默認全局設置(你們都是這麼用)

    • Axios.defaults-> options對象
  • 針對個別請求來附加options
  • axios.get(url,options)
  • axios.post(url,data,options)

今日重點

• axios
• watch
• 計算屬性
• 項目

axios

• 合併請求
• axios.all([請求1,請求2])
• 分發響應 axios.spread(fn)
• fn:對應參數(res)和請求的順序一致

• 應用場景:

  • 必須保證兩次請求都成功，好比，分頭獲取省、市的數據
• 執行特色: 只要有一次失敗就算失敗，不然成功

攔截器

• 過濾，在每一次請求與響應中、添油加醋
• axios.interceptors.request.use(fn) 在請求以前
• function(config){ config.headers = { xxx }} config 至關於options對象
• 默認設置 defaults 範圍廣、權利小
• 單個請求的設置options get(url,options) 範圍小、權利中
• 攔截器 範圍廣、權利大

token(擴展)

• cookie 和session的機制，cookie自動帶一個字符串
• cookie只在瀏覽器
• 移動端原生應用，也可使用http協議，1:能夠加自定義的頭、原生應用沒有cookie
• 對於三端來說，token能夠做爲相似cookie的使用，而且能夠通用
• 攔截器能夠用在添加token上

攔截器操做loadding

• 在請求發起前open，在響應回來後close

監視

• watch 能夠對（單個）變量進行監視，也能夠深度監視
• 若是需求是對於10個變量進行監視？
• 計算屬性computed 能夠監視多個值，而且指定返回數據，而且能夠顯示在頁面

• 都是options中的根屬性

  • watch監視單個
  • computed能夠監視多個this相關屬性值的改變,若是和原值同樣
  • 不會觸發函數的調用，而且能夠返回對象

相關命令

npm i mint-ui vue-preview axios vue-router monent vue - S;
npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - loader babel - core babel - preset - es2015 babel - plugin - transform - runtime url - loader file - loader vue - loader vue - template - compiler webpack-dev-server - D