Vue.JS基礎- 外掛、模組化

vue補充

獲取DOM元素

• 救命稻草, document.querySelector

• 1: 在template中標識元素 ref="xxxx"

• 2: 在要獲取的時候, this.$refs.xxxx 獲取元素

  • 建立元件,裝載DOM,使用者點選按鈕

• ref在DOM上獲取的是原生DOM物件

• ref在元件上獲取的是元件物件

  • $el 是拿其DOM

  • 這個物件就相當於我們平時玩的this,也可以直接呼叫函式

 

路由

---

路由原理

• 傳統開發方式 url改變後 立刻發起請求，響應整個頁面，渲染整個頁面

• SPA 錨點值改變後 不會發起請求,發起ajax請求,區域性改變頁面資料

  • 頁面不跳轉 使用者體驗更好

SPA

• single page application(單頁應用程式)

• 前端路由

  • 錨點值監視

  • ajax獲取動態資料

  • 核心點是錨點值

• 前端框架 Vue/angular/react都很適合開發單頁應用

基本使用

• vue-router

• 其是vue的核心外掛

• 1:下載 npm i vue-router -S

• 1.2(重要):安裝外掛Vue.use(VueRouter);

• 2:在main.js中引入vue-router物件 import VueRouter form './x.js';

• 3:建立路由物件 var router = new VueRouter();

• 4:配置路由規則 router.addRoutes([路由物件]);

  • 路由物件{path:'錨點值',component:要(填坑)顯示的元件}

• 5:將配置好的路由物件交給Vue

  • 在options中傳遞-> key叫做 router

• 6:留坑(使用元件) <router-view></router-view>

router-link

• to

• 幫助我們生成a標籤的href

• 錨點值程式碼維護不方便，如果需要改變錨點值名稱

  • 則需要改變 [使用次數 + 1（配置規則）] 個地方的程式碼

命名路由

• 1:給路由物件一個名稱 { name:'home',path:'/home',component:Home}

• 2:在router-link的to屬性中描述這個規則

  • <router-link :to="{name:'home'}></router-link>"

  • 通過名稱找路由物件，獲取其path，生成自己的href

• 大大降低維護成本，錨點值改變只用在main.js中改變path屬性即可

階段總結

• vue-router使用步驟 : 1:引入 2:安裝外掛 3:建立路由例項 4:配置路由規則 5:將路由物件關聯vue 6:留坑

• router-link to="/xxx" 命名路由

  • 1. 在路由規則物件中 加入name屬性

    2. 在router-link中 :to="{ name:"xxx'} "

• 生僻API梳理:

  • 1. Vue.use(外掛物件); // 過程中會註冊一些全域性元件,及給vm或者元件物件掛在屬性

    2. 給vm及元件物件掛在的方式 : Object.defineProperty(Vue.prototype,'$router',{

       get:function () { return 自己的router物件;

       }

       })

引數router-link,

• Vue.prototype.xxx = {add:fn}

• 所有元件中，使用this.xxx就能拿到這個物件

• 查詢字串

  • 1:配置:to="{name:'detail',query:{id:hero.id} }"

  • 2:規則 {name:'detail',path:'/detail',component:Detail}

  • 3:獲取 this.$route.query.id

  • 4:生成 <a href="/detail?id=1">

• path方式

  • 4:生成 <a href="/detail/1">

  • 1:配置 :to="{name:'detail',params:{id:hero.id} }"

  • 2:規則 { name:'detail',path:'/detail/:id'}

  • 3:獲取 this.$route.params.id

• 查詢字串配置引數

  • router-link一次

  • 獲取的時候一次

• path方式配置引數

  • router-link一次

  • 規則配置的時候宣告位置

  • 獲取的時候一次

• 總結書寫程式碼注意事項

  • path方式需要在路由規則中宣告位置

vue-router中的物件

• $route 路由資訊物件,只讀物件

• $router 路由操作物件,只寫物件

巢狀路由

• 市面上所謂的用單頁應用框架開發多頁應用

  • 巢狀路由

• 案例

  • 進入我的主頁顯示：電影、歌曲

• 程式碼思想

  • 1:router-view的細分

    • router-view第一層中，包含一個router-view

  • 2:每一個坑挖好了，要對應單獨的元件

• 使用須知: 1:router-view包含router-view 2:路由children路由

知識點介紹

• 路由meta後設資料 -> meta是對於路由規則是否需要驗證許可權的配置

  • 路由物件中 和name屬性同級 { meta:{ isChecked:true } }

• 路由鉤子 -> 許可權控制的函式執行時期

  • 每次路由匹配後, 渲染元件到router-view之前

  • router.beforeEach(function(to,from,next) { } )

練習

• 1: 使用koa 編寫一個伺服器...

  • a. /login的請求.. ctx.body = { msg:'ok'} 前端用jq傳送ajax請求

• 2: 客戶端接收響應以後.如果是ok. localStroage中儲存該值

• 3: 在全域性路由守衛中,區分/login 不驗證(meta), /show 要驗證, 驗證條件就是從localStorage中獲取

程式設計導航

• 1: 跳到指定的錨點,並顯示頁面 this.$router.push({ name:'xxx',query:{id:1},params:{name:'abc'} });

• 2: 配置規則 {name:'xxx',path:'/xxx/:name'}

• 3: 根據歷史記錄.前進或後退

  • this.$router.go(-1|1);

  • 1代表進一步,-1是退一步

axios

基本使用

Axios.method('url',[,..data],options)
.then(function(res){  })
.catch(function(err) { } )

合併請求

• this.$axios.all([請求1,請求2])
  .then(  this.$axios.spread(function(res1,res2){  
           
           })
  )

攔截器

• 單請求配置options: axios.post(url,data,options);

• 全域性配置defaults: this.$axios.defaults

• config : 請求攔截器中的引數

• response.config 響應攔截器中的引數

• options

  • baseURL 基礎URL路徑

  • params 查詢字串（物件）

  • transformRequest 轉換請求體資料

  • transformResponse 轉換響應體資料

  • headers 頭資訊

  • data 請求體資料

  • timeout 請求超時，請求多久以後沒有響應算是超時（毫秒）

模組化

• webpack命令 npm init -y npm install webpack@3.6.0 --save-dev --registry https://registry.npm.taobao.org

• package.json檔案 "scripts": { "test": "webpack ./main.js ./build.js" },

• 命令列執行 npm run test

ES6模組

• 匯入和匯出只能存在頂級作用域

• require引入是程式碼執行的時候才載入

• import 和export 都是提前載入 ，載入在程式碼執行之前

箭頭函式和function

• 一方面箭頭函式是種簡寫形式

• 應用場景: 由於箭頭函式本身沒有this和arguments，通常用在事件類的回撥函式上，讓其向上級function繫結this，而非事件物件

• 箭頭函式不可以作為建構函式

ES6函式簡寫

• 用在物件的屬性中

  fn3() { //幹掉了:function,用在物件的屬性中
  ​
                  console.log(this);
  ​
          },
  ​