VUE

• Vue ：數(shù)據(jù)驅(qū)動(dòng)的M V Vm框架

• m ：model（后臺(tái)提供數(shù)據(jù)），v ：view（頁面），vM（模板）

• 流程

  • m-》vm-》v
  • m與vm之間通過ajax axios實(shí)現(xiàn)數(shù)據(jù)交互（前后端數(shù)據(jù)交互）
  • vm（前端拿到數(shù)據(jù)后，對數(shù)據(jù)進(jìn)行處理）
  • v（數(shù)據(jù)改變后，頁面改變）

• 兼容

  • ie9及其以上（Vue使用Es5）
  • ie8用的是es3

• 注意

  • 不要將body、html作為掛載點(diǎn)
  • 新建一個(gè)div作為掛載點(diǎn)
  • 一個(gè)頁面中盡量只有一個(gè)掛載點(diǎn)
  • 插值等同{{}}（{{}}，只能與標(biāo)簽內(nèi)使用）
  • 等同于innerHTML，innerTEXT
  • 慎用innerHTML（會(huì)執(zhí)行之內(nèi)的代碼->xxs攻擊）
  • 指令需要放在標(biāo)簽的屬性中使用
  • 指令中的雙引號會(huì)提供一個(gè)js運(yùn)行環(huán)境（"變量、簡單運(yùn)算"）雙大括號{{}}具有相同的功能
  • v-text插入的變量作為字符串處理
  • v-html除非是信任的內(nèi)容不然不要使用

• v-show控制元素的顯示隱藏

  • 初始開銷較大，dom一直存在與結(jié)構(gòu)中 如果是需要經(jīng)常切換的dom 推薦使用該指令
  • v-show只是css級別的顯示隱藏=》display：none
  • 在vue中想要顯示或隱藏
    • 給data中添加一個(gè)屬性，其值為布爾類型
    • 將對應(yīng)值添加個(gè)v-show指令
    • 控制這個(gè)布爾值，以達(dá)到控制顯示隱藏的目的
    • true==顯示，flse==隱藏

• v-if

  • 切換開銷較大 false情況下 dom不會(huì)被渲染
  • v-if是html結(jié)構(gòu)級別的隱藏，直接將對應(yīng)標(biāo)簽刪除
  • v-if、v-else-if、v-else和js中的if else else if一樣的（只能滿足一級要求，其后不再執(zhí)行）

• v-for

  • 用于遍歷數(shù)組或?qū)ο?/li>
  • v-for="item in items"
  • v-for="item,index in items" 項(xiàng)+索引 數(shù)組
  • v-for="value in items" 值 對象
  • v-for="value,key in items" 鍵+值 對象
  • v-for="value,key,index in items" 鍵+值+索引 對象
  • v-for="自定義名字 數(shù)組名"
  • v-for可以遍歷出index
  • 對象遍歷（不常用）
    • v-for="value in 對象名"
    • v-for="(value,key) in 對象名"
    • v-for="(value，key，index) in 對象名"
  • 要遍歷那個(gè)標(biāo)簽就將指令寫給那個(gè)標(biāo)簽
  • 建議所有使用v-for指令的標(biāo)簽都添加上：key="惟一值"(后期使用，不建議使用index（雖然也是唯一的）)
  • key vue渲染原理 復(fù)用元素 沒有key的話 當(dāng)數(shù)據(jù)順序發(fā)生變化時(shí) 如果沒有綁定key 只會(huì)更新數(shù)據(jù)（元素不會(huì)更新，dom復(fù)用）
  • 不建議同時(shí)使用v-for和v-if v-for擁有更高的優(yōu)先級

• v-bind：綁定

  • 根據(jù)數(shù)據(jù)改變標(biāo)簽的屬性（src，href）
  • 將標(biāo)簽的屬性與data中的變量綁定
  • v-bind：src="data中的變量名"（將src與data中對應(yīng)的變量名綁定，當(dāng)數(shù)據(jù)改變時(shí)，src中的值也隨之改變）
  • 使用非常廣泛=》簡寫成為:屬性名="data中的變量"
  • 如果要修改標(biāo)簽中的所有屬性，可以綁定data中的對象，對象中的屬性名，與標(biāo)簽中的屬性一一對應(yīng)（也可以添加其他屬性）（可以更方便快捷的改變標(biāo)簽中的多個(gè)屬性，或添加屬性）
  • :style=""->改變標(biāo)簽css樣式
    • 闊以是對象，但是值必須加引號（指令雙引號間為js執(zhí)行環(huán)境）
  • :class=""->添加類名
    • :class="[box,box1,{box2:flag}]"
    • :class="{class:flag}"
    • 綁定類名可以與普通class屬性共存
      • <span class="class1" :class="{class2:flag1}"></span>

• v-model：雙向綁定

  • 上述方法只能實(shí)現(xiàn)，數(shù)據(jù)改變之后，頁面內(nèi)容隨之改變，但數(shù)據(jù)不會(huì)在頁面內(nèi)容改變之后隨之改變（即單項(xiàng)綁定）
  • 頁面內(nèi)容改變是（form表單元素），Vue數(shù)據(jù)改變

    <input type="radio" v-model="" v-bind:value="0">
  

  • 將input中的值value綁定為數(shù)字0，（指令中的雙引號間為js運(yùn)行環(huán)境），再將input與Vue中的數(shù)據(jù)，雙向綁定，其后可以得到值為數(shù)字Number類型

• v-on：綁定事件

  • v-on后跟事件名，等于函數(shù)名（methods對象中的方法），有實(shí)參加括號，無實(shí)參可省略括號
  • 可以通過this.data中的屬性名，獲取對應(yīng)的數(shù)據(jù)
  • v-on:click=""，雙引號中可直接對data中的數(shù)據(jù)進(jìn)行修改
  • v-on:click="methods方法名"，由于使用較多，所以向v-bind一樣具有縮寫，@click="函數(shù)名（實(shí)參）"

• 修飾符

  • v-on:click="methods中的方法名"==@click="methods中的方法名"
  • 事件觸發(fā)具有冒泡機(jī)制，如何禁止-》修飾符
  • @click.stop=""=>阻止冒泡
  • @click.prevent=""=>阻止瀏覽器默認(rèn)行為

三了解

• v-pre：跳過標(biāo)簽編譯過程，提升性能

  `<pre>`
    內(nèi)部代碼
    回車
    瀏覽器編譯后
    就是回車
  `</pre>`
  

• v-clock

  ```<style>
    [v-clock] {
      display:none
    }
  </style>
  ```
  

  • 加載完成之前，具有v-clock的標(biāo)簽隱藏
  • Vue編譯完成之后，自動(dòng)清楚v-clock

• v-once

  • 只在頁面第一次渲染是調(diào)用數(shù)據(jù)
  • 之后不會(huì)在跟隨數(shù)據(jù)發(fā)生變化

生命周期

四大生命周期

• 順序（鉤子函數(shù)的執(zhí)行順序，與data同級）
  • 創(chuàng)建-create
    • beforeCreate：創(chuàng)建前（無data中的數(shù)據(jù),只有該階段無法訪問到data中的數(shù)據(jù)）（數(shù)據(jù)于創(chuàng)建完成之后進(jìn)行初始化）
    • created：創(chuàng)建完成后
  • 掛載-mount（app.$mount("")）(不用el："#app"掛載的話，可以用$mount掛載)
    • beforeMount：掛載之前
    • mounted：掛載之后
  • 更新-update（數(shù)據(jù)發(fā)生改變）
    • beforeUpdate：更新之前
    • updated：更新之后
  • 銷毀-destroy
    • beforeDestroy：銷毀之前（app.$destroy()強(qiáng)制銷毀）
    • destroyed：銷毀之后
• 注意
  • 創(chuàng)建和掛載的四個(gè)鉤子函數(shù)只會(huì)調(diào)用一次
  • 更新周期對應(yīng)的兩個(gè)鉤子函數(shù)，只要數(shù)據(jù)發(fā)生改變就會(huì)觸發(fā)
• data
  • vue中的數(shù)據(jù)時(shí)響應(yīng)式的 所以需要在初始化Vue是將需要響應(yīng)的變量提前聲明
• Object.freeze()
  • 屬性放進(jìn)去，vue不會(huì)對其進(jìn)行追蹤變化了
• v-once
  • 執(zhí)行一次性的插值 數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不在更行

計(jì)算屬性-computed（對象與data同級）

• 當(dāng)遇到比較復(fù)雜的語句時(shí)，可將其寫在computed中
• computed中的函數(shù)不可以調(diào)用，而是將其函數(shù)名寫在{{中}}，將其作為data中的屬性名
• 創(chuàng)建時(shí)與methods一致，用法與data中的數(shù)據(jù)一致，對象！！！！
• 實(shí)質(zhì)：將computed計(jì)算的結(jié)果return到頁面中**
• 當(dāng)多次調(diào)用同一個(gè)computed方法時(shí)，會(huì)存在緩存問題**，當(dāng)需要實(shí)時(shí)更新數(shù)據(jù)時(shí)，可以使用methods（避免緩存）

監(jiān)聽-watch(對象與data同級)

• watch：{要監(jiān)聽的值的名字（）{},要監(jiān)聽的值的名字：{handler（）{}，deep：true，//可以監(jiān)聽對象內(nèi)部屬性的改變 immediate：true//頁面加載后立馬執(zhí)行第一次監(jiān)聽函數(shù)}}

  data:{

  },
  watch:{
    //第一種方法（無法監(jiān)聽到對象內(nèi)部數(shù)據(jù)變化）
    msg(newValue,oldValue){
      //data中的屬性名+（）+{}，如果msg是對象的話，無法監(jiān)聽對象內(nèi)屬性的變化
      //監(jiān)聽函數(shù)有兩個(gè)參數(shù)，分別為新值和舊值
      console.log(newValue,oldValue)
      //該方法無法監(jiān)聽到對象中的數(shù)據(jù)，只能在變量內(nèi)存儲(chǔ)的地址發(fā)生改變時(shí)觸發(fā)（引用類型，棧中存放的是指針，堆中的地址）
    }
    //第二種方法（第一種方法的變形）
    msg：{
      handler（newValue,oldValue）{
        console.log(newValue,oldValue)//data中的非對象數(shù)據(jù)，能夠監(jiān)聽變化，并且存在兩個(gè)數(shù)據(jù)，即新數(shù)據(jù)，舊數(shù)據(jù)
        //仍然監(jiān)聽不到對象中數(shù)據(jù)的變化
      }
    }
    //第三種方法（添加對應(yīng)參數(shù)）
    msg：{
      handler（）{
        console.log("發(fā)生了變化")
      },
      deep:true,  //是否監(jiān)聽對象內(nèi)部數(shù)據(jù)的變化
      immediate:true  //是否與數(shù)據(jù)初始化之前設(shè)置監(jiān)聽函數(shù)
    }
  }
  (詳見)[https://cn.vuejs.org/v2/guide/list.html]
  /* 
    由于 JavaScript 的限制，Vue 不能檢測以下數(shù)組的變動(dòng)：

    當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
    當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength
    ----vm.items[indexOfItem] = newValue
    // Vue.set
      Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
      vm.items.splice(indexOfItem, 1, newValue)
    
    Vue 不能檢測對象屬性的添加或刪除
      
   */

過濾器-filters（對象，data同級）

過濾器的應(yīng)用范圍

• 雙花括號插值和v-bind表達(dá)式
• 過濾器的作用是，對對應(yīng)的值進(jìn)行處理-{{數(shù)據(jù) | 過濾器名}}
• v-bind可以添加，{{可以添加}}，v-text不可以添加
• 過濾器函數(shù)中的參數(shù)就是 | 之前的對應(yīng)的數(shù)據(jù)，過濾器函數(shù)中需要返回新的內(nèi)容才能顯示在頁面中（即，過濾器函數(shù)中需要存在return）
• 過濾器可以用多個(gè){{數(shù)據(jù) | 過濾器1 | 過濾器2 | 過濾器n}}--（過濾器的添加順序不同（對數(shù)據(jù)的處理順序不同，可能造成，處理后數(shù)據(jù)結(jié)果不同））

組件

• 創(chuàng)建
  • complate組件模板
  • vue組件分為兩種，一種為全局組件，一種為局部組件，組件需要注冊才能使用
  • 注冊：Vue.component("組件名",組件配置對象)---》一般將 組件配置對象提取出來，外部配置
• 使用組件
  • 要在父組件的組件模板中使用對應(yīng)的組件標(biāo)簽
  • <組件名></組件名>
• 局部注冊
  • 局部注冊需要在對應(yīng)組件中添加components屬性

    const 組件名={
      template:"",
      components:{
        局部組件名：組件配置對象//這個(gè)組件就只能在當(dāng)前組件的模板中使用
        //相當(dāng)與在對應(yīng)父元素組件中實(shí)現(xiàn)注冊，為局部組件，只能在該組件中調(diào)用，否則報(bào)錯(cuò)
      }
    }

• 注意
  • 組件模板中只能有一個(gè)根節(jié)點(diǎn)
  • 組建的配置對象，一定、一定、一定要放在其注冊之前
  • 組件中可以寫出el對象外的幾乎所有屬性
  • 組件中的data為函數(shù)，需要將數(shù)據(jù)return出去，然后可以正常使用，其他無異常
  • 可以通過將組件標(biāo)簽，添加到其父組件的complate中，實(shí)現(xiàn)
  • 往組件中添加數(shù)據(jù)，只能在其對應(yīng)的complate中添加,在html結(jié)構(gòu)標(biāo)簽中無法添加內(nèi)容&&將其添加到其父元素的complate中后無法修改其數(shù)據(jù)
  • 因?yàn)镠TML不區(qū)分大小寫，所以在HTMl模板中，標(biāo)簽需要寫成純小寫，駝峰命名變成-連字符連接

通信方式

• 父子通信

  • 父->子

    • 父子組件通信基本步驟

      1. 在子組件中添加props(對象)
         配置對應(yīng)prop的名字
      2. 找到對應(yīng)父組件模板中的子組件標(biāo)簽
         在標(biāo)簽上添加對應(yīng)prop的名字作為屬性 后邊跟著要傳遞的值

      第二步可以傳遞靜態(tài)值（固定值） 也可以傳遞動(dòng)態(tài)值，data中的值
      區(qū)別就在于加不加v-bind

      • 注意

        • props:["prop名1","prop名2",……]---》第一種寫法，可以有多個(gè)prop，即數(shù)據(jù)通路

        • props:{prop名字:String}/props:{prop名字:[String,Number]}-->即允許傳輸?shù)臄?shù)據(jù)類型，可以有多個(gè)

        • props:

          {prop名字:{type:允許類型,default:默認(rèn)值,validator(value){驗(yàn)證數(shù)據(jù)，true//驗(yàn)證通過，否則報(bào)錯(cuò)},required:true}}---->type（允許傳輸?shù)臄?shù)據(jù)類型），default（無傳輸數(shù)據(jù)時(shí)的默認(rèn)值），validator（驗(yàn)證傳輸數(shù)據(jù)是否滿足條件），required：true（true，則該項(xiàng)為必須傳輸項(xiàng)目）（與default有沖突，有默認(rèn)項(xiàng)時(shí)，即使無數(shù)據(jù)傳輸，默認(rèn)值將作為數(shù)據(jù)，是否必填無關(guān)緊要）
          

    • props中的prop名，可以直接當(dāng)做data中屬性（數(shù)據(jù)）使用

    • 遍歷數(shù)組時(shí)，需要添加：key="惟一值即可"

  • 子->父

• 非父子通信

  main.js中 空vue載體
  Vue.prototype.$bus=new Vue()
      在所有的 Vue 實(shí)例中可用了，甚至在實(shí)例被創(chuàng)建之前就可以
       $ 是在 Vue 所有實(shí)例中都可用的屬性的一個(gè)簡單約定。這樣做會(huì)避免和已被定義的數(shù)據(jù)、方法、計(jì)算屬性產(chǎn)生沖突。
       通過 $ 為實(shí)例屬性設(shè)置作用域來避免這種事情發(fā)生。你還可以根據(jù)你的喜好使用自己的約定，諸如 $_appName 或 ΩappName，來避免和插件或未來的插件相沖突。
  
   需要進(jìn)行通信的組件
   import $bus from '../../../main';
  
   this.$bus.$on('upload',payload=>{ do somthing })  //先監(jiān)聽
  
   this.$bus.$emit('getPayload',payload)  //后觸發(fā)
  

修飾符

• 事件修飾符，為v-on提供了事件修飾符
  • stop
    • 阻止冒泡
  • prevent
    • 阻止默認(rèn)行為
  • capture
    • 捕獲階段執(zhí)行？？
  • self
    • event.target 當(dāng)前元素自身觸發(fā)時(shí)執(zhí)行函數(shù)
  • once
    • 只執(zhí)行一次
  • passive
    • addEventListener(type,handler,useCapture)-->addEventListener(type,handler,{capture:false,passive:false,once:false})-->是否捕獲，是否'順從'???，是否只執(zhí)行一次監(jiān)聽（之后自動(dòng)removeEventListener）
    • passive提高流暢性能
    • 調(diào)用preventDefault（）無效
• 按鍵修飾符，為v-on在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符
  • enter .13
  • tab
  • delete
  • esc
  • space
  • up
  • down
  • left
  • right
  • 可以通過全局config.keyCode對象自定義按鍵修飾符別名
• 系統(tǒng)修飾鍵,盡在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器
  • ctrl
  • alt
  • shift
  • meta
• exact修飾符允許你控制由精確的系統(tǒng)修飾符組合出發(fā)的事件，ctrl+shift等組合鍵
• 鼠標(biāo)按鈕修飾符
  • left
  • right
  • middle

路由router

• 前后端都能夠?qū)崿F(xiàn)根據(jù)url的不同，跳轉(zhuǎn)至指定頁面，但實(shí)現(xiàn)原理不同
• 四步驟
  • 一 創(chuàng)建組件配置對象
  • 二 創(chuàng)建routes配置對象(必須是routes，否則雖然不報(bào)錯(cuò)，但是也不會(huì)有效果)
  • 三 創(chuàng)建router實(shí)例（new VueRouter）
  • 四 將router添加進(jìn)Vue中
• <router-view></router-view>(url對應(yīng)的組件，將替換掉該組件，即該組件不會(huì)顯示到頁面中)
  • <router-link to="/" tag="li">,該標(biāo)簽渲染到頁面中時(shí)會(huì)被a標(biāo)簽替換，to中將會(huì)是替換后的url，tag可以改變渲染后router-link的結(jié)果（可以改變成為其他標(biāo)簽，通過js實(shí)現(xiàn)相應(yīng)的鏈接跳轉(zhuǎn)），激活狀態(tài)的鏈接會(huì)具有router-link-active(該類名不夠精確)---》推薦使用router-link-exact-active來為激活狀態(tài)的標(biāo)簽添加對應(yīng)的類名
  • linkExactActiveClass:'active',通過該全局配置，實(shí)現(xiàn)類名的替換var router=new VueRouter({//new VueRouter大括號中為全局配置 linkExactActiveClass})
  • 點(diǎn)擊對應(yīng)router-link標(biāo)簽，to到新的url后，顯示對應(yīng)的組件，實(shí)現(xiàn)頁面的跳轉(zhuǎn)（數(shù)據(jù)的改變）但域名不會(huì)改變

動(dòng)態(tài)路由

• 1. 配置路由時(shí)可以使用動(dòng)態(tài)路由{path:"/a/:id"}
  • 通過$route.params.id來獲取對應(yīng)的id，根據(jù)id獲取數(shù)據(jù)，并改變顯示內(nèi)容
  • 通過為$route設(shè)置監(jiān)聽函數(shù)，來實(shí)現(xiàn)當(dāng)url改變時(shí)，發(fā)送新的請求，獲取數(shù)據(jù)后渲染到頁面的操作，可以為其添加immediate屬性，實(shí)現(xiàn)頁面首次加載就發(fā)出請求
  • 如果動(dòng)態(tài)路由想要使用a標(biāo)簽跳轉(zhuǎn)，必須給路由添加一個(gè)name屬性并使用名字進(jìn)行跳轉(zhuǎn)
    • <router-link :to="{path: '/demo', params: {id: 1}}">鏈接</router-link>
• 2. 使用？id=xx的形式--query
  • 配置路由時(shí)使用基本配置方式
  • 將query值添加到路由的最后使用？xx=值的形式添加？xx=值&xx=值
  • 通過$route.query.xx來獲取

動(dòng)態(tài)路由與靜態(tài)路由的區(qū)別

• 二者無實(shí)質(zhì)區(qū)別（都是根據(jù)url不同，獲取數(shù)據(jù)渲染到頁面中）
• 獲取方式的差別
  • 動(dòng)態(tài)路由獲取--$route.params.xxx與配置對象中routes[{path:"/:xxx"}]--只需要xxx一致即可---當(dāng)使用router-link :to="{name:'',params:{xxx:''}",只需要v-bind:to即可，否則獲取到的是字符串--（需要使用name）
  • 靜態(tài)路由--$route.query.xxx與鏈接中router-link to="/?xxx=xx"

原理

• 通過切換url，獲取數(shù)據(jù)，更換div中的內(nèi)容
• 后端為主--原始模式
  1. 查找dns服務(wù)器，dns服務(wù)器返回對應(yīng)的ip地址
  2. 根據(jù)ip地址找到服務(wù)器
  3. 服務(wù)器后臺(tái)根據(jù)url提取數(shù)據(jù)
  4. 根據(jù)提取的數(shù)據(jù)去數(shù)據(jù)庫中查找數(shù)據(jù)
  5. 將數(shù)據(jù)渲染到模板中的頁面
  6. 返回瀏覽器
  • 前端只負(fù)責(zé)提供靜態(tài)頁面模板，供后端渲染數(shù)據(jù)
• 前端為主--Vue--M、V、VM
  1. 查找 dns服務(wù)器，dns服務(wù)器返回對應(yīng)的ip地址
  2. 根據(jù)ip地址找到服務(wù)器
  3. Vue根據(jù)傳來的url提取數(shù)據(jù)
  4. Vue根據(jù)數(shù)據(jù)發(fā)送請求（ajax請求），將查詢數(shù)據(jù)發(fā)送給后臺(tái)
  5. 后臺(tái)接受到數(shù)據(jù)后，查詢數(shù)據(jù)，返回查詢到的數(shù)據(jù)
  6. Vue接收到數(shù)據(jù)后，渲染到模板中
  7. 瀏覽器顯示
• 優(yōu)缺點(diǎn)
  • 前端渲染
    • 速度快，減輕服務(wù)器壓力，交互較好（loading等），不借助某些技術(shù)無法進(jìn)行seo優(yōu)化
  • 后端渲染
    • 便于seo優(yōu)化，訪問到的內(nèi)容都在頁面中

動(dòng)態(tài)路由

• 動(dòng)態(tài)路由獲取
  • 模板中
    • $route.params.x
  • js
    • this.$route.params.x
  • watch
    • to.params.x
• 重定向
  • a跳轉(zhuǎn)到b
    • 給a設(shè)置redirect--》b的路由
• 別名
  • 當(dāng)訪問/a時(shí)，實(shí)際訪問到的內(nèi)容為b時(shí)，url顯示為/a
    • 應(yīng)該給/b加alias"/a"
• 命名視圖
  • 同級展示多個(gè)視圖，而不是嵌套展示，可以使用命名視圖
  • 一個(gè)視圖使用一個(gè)組件渲染，因此對于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件

路由組件傳參

• 在組件中使用$route會(huì)使之與對應(yīng)路由形成高度耦合，從而使組件只能在某些特定的url上使用，限制了靈活性，可使用props將組件和路由解耦
• { path: '/user/:id', component: User, props: true }routes中設(shè)置props為true時(shí)，默認(rèn)傳遞$route.params
  • 組件配置對象中，可直接添加props屬性，為其添加所需prop即可（如：id、tab等）
• 你可以創(chuàng)建一個(gè)函數(shù)返回 props。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等等。
  • { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  • 該返回對象將作為屬性，傳遞給對應(yīng)組件

HTML5 History模式

• 使用history模式，可以使得URL像正常url（去掉#號）

導(dǎo)航守衛(wèi)--》路由導(dǎo)航守衛(wèi)--》路由鉤子函數(shù)

• 所有的路由都會(huì)經(jīng)過全局導(dǎo)航守衛(wèi)，所以在網(wǎng)頁需要登錄等操作才能訪問時(shí)使用**
• this.$route.query.xxx---->js函數(shù)中通過，獲取url中查詢字符串信息，此處為跳轉(zhuǎn)至該頁面的源頁面
• 通過this.$router.push(url)---->實(shí)現(xiàn)跳轉(zhuǎn)至來時(shí)頁面---》即登錄過后跳轉(zhuǎn)至頁面
• router.beforeEach((to,from,next)=>{})，（from來源，to去向，next守衛(wèi)）,to.fullPath(其中存放著url路徑及查詢字符串)
• meta屬性routes中添加對應(yīng)屬性，to.matched其中存放著當(dāng)前網(wǎng)頁的路徑，以及其祖先url信息，可在其中找到對應(yīng)的meta，運(yùn)用數(shù)組some方法（存在該meta，即需要驗(yàn)證的頁面）

全局解析守衛(wèi)

• beforeEach**
• 類似router.beforeEach
• 區(qū)別，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用

全局后置鉤子

• afterEach((to,from)=>{})
• 只有to,from**，不接受next函數(shù)，也不會(huì)改變導(dǎo)航本身

路由獨(dú)享守衛(wèi)

• beforeEnter**
• 在路由配置（routes）上直接定義
• 與全局前置守衛(wèi)的方法參數(shù)一樣

組件內(nèi)守衛(wèi)

• beforeRouteEnter
  • 在渲染該組件的對應(yīng)路由被confirm前調(diào)用
  • ！不能 ！獲取組件實(shí)例this----可以通過beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined console.log(to, '組件獨(dú)享守衛(wèi)beforeRouteEnter第一個(gè)參數(shù)'); console.log(from, '組件獨(dú)享守衛(wèi)beforeRouteEnter第二個(gè)參數(shù)'); console.log(next, '組件獨(dú)享守衛(wèi)beforeRouteEnter第三個(gè)參數(shù)'); next(vm => { //因?yàn)楫?dāng)鉤子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建 // vm 就是當(dāng)前組件的實(shí)例相當(dāng)于上面的 this，所以在 next 方法里你就可以把 vm 當(dāng) this 來用了。 console.log(vm);//當(dāng)前組件的實(shí)例 }); }---vm---vue官方使用--vue的實(shí)例---間接使用this
• beforeRouteUpdate--2.2新增
  • 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用--即雖然路由改變，但訪問的仍然是同一個(gè)頁面
  • 舉例來說，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
  • // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
  • 可以訪問組件實(shí)例 this
• beforeRouteLeave
  • 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
  • 可以訪問組件實(shí)例this

完整的導(dǎo)航解析流程--官方（并非所有步驟都會(huì)執(zhí)行）

1. 導(dǎo)航被觸發(fā)
2. 在失活的組件里調(diào)用離開守衛(wèi)
3. 調(diào)用全局的beforeEach守衛(wèi)
4. 在重用的組件里調(diào)用veforeRouteUpdate
5. 在路由配置里調(diào)用beforeEnter
6. 解析異步路由組件
7. 在被激活的組件里調(diào)用beforeRouteEnter
8. 調(diào)用全局的beforeResolve守衛(wèi)
9. 導(dǎo)航被確認(rèn)
10. 調(diào)用全局的afterEach鉤子
11. 觸發(fā)DOM更新
12. 用創(chuàng)建好的實(shí)例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)

守衛(wèi)與生命周期鉤子函數(shù)的執(zhí)行順序

• 全局 3
  • beforeEach
  • beforeResolve
  • afterEach
• 路由獨(dú)享 1
  • beforeEnter
• 組件內(nèi) 3
  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

• 導(dǎo)航守衛(wèi)和聲明周期鉤子函數(shù)的執(zhí)行先后順序
  • 訪問路由時(shí)
    • 全局守衛(wèi)beforeEach先執(zhí)行
    • 路由獨(dú)享守衛(wèi)beforeEnter執(zhí)行
    • 組件內(nèi)守衛(wèi)beforeRouteEnter執(zhí)行
    • 全局解析守衛(wèi)beforeResolve執(zhí)行
    • 最后全局后置守衛(wèi)afterEach執(zhí)行
    • 聲明周期鉤子函數(shù)執(zhí)行

• 切換路由時(shí)，如果路由是動(dòng)態(tài)路由

  • 全局守衛(wèi)beforeEach調(diào)用
  • 組件內(nèi)守衛(wèi)beforeRouteUpdate調(diào)用
  • beforeResolve調(diào)用
  • afterEach
  • // 如果數(shù)據(jù)也發(fā)生了變化，在路由結(jié)束后觸發(fā)
  • beforeUpdate
  • updated

• 切換路由時(shí)，路由不同

  • from befreRouteLeave
  • beforeEach
  • to 路由獨(dú)享守衛(wèi)beforeEnter
  • to 組件內(nèi)守衛(wèi) beforeRouteEnter
  • 全局解析守衛(wèi)beforeResolve
  • 全局后置守衛(wèi) afterEach
  • to 組件生命周期鉤子，知道to組件創(chuàng)建完成
  • 銷毀from的組件
  • to 組件掛載

• 當(dāng)組件切換時(shí)，先創(chuàng)建新組件，當(dāng)新組件beforeMount（生命周期鉤子函數(shù)-掛載前）之后，才銷毀舊組件，舊組件銷毀后，新組件被掛載

• 生命周期鉤子函數(shù)永遠(yuǎn)在路由afterEach之后執(zhí)行

過渡動(dòng)效

• 過渡動(dòng)效
  • 為router-view標(biāo)簽，添加transition標(biāo)簽
• 單個(gè)路由的過渡
  • 給路由組件設(shè)置過渡效果，路由組件內(nèi)使用transition，并設(shè)置不同的name屬性
• 基于路由的動(dòng)態(tài)過渡
  • 基于當(dāng)前路由與目標(biāo)路由的變化關(guān)系，動(dòng)態(tài)設(shè)置過渡效果
  • 基于路由變化使用對應(yīng)的name值，實(shí)現(xiàn)路由不同，過渡效果的不同
• Vue在插入、更新或則移除DOM時(shí)**，提供多種不同方式的過渡效果
  • 在css過渡和動(dòng)畫中自動(dòng)應(yīng)用class
  • 配合使用第三方css動(dòng)畫庫，如Animate.css
  • 在過渡鉤子函數(shù)中使用JavaScript直接操作DOM
  • 配合使用第三方JavaScript動(dòng)畫庫，如Velocity.js
• 單元素/組件的過渡
  • 條件渲染（使用v-if）
  • 條件展示（使用v-show）
  • 動(dòng)態(tài)組件
  • 組件根節(jié)點(diǎn)

• 當(dāng)插入或刪除包含在transition組件中的元素時(shí)
  1. 自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了css過渡或動(dòng)畫，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除css類名
  2. 如果過渡組件提供了JavaScript鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用
  3. 如果沒有找到JavaScript鉤子并且也沒有檢測到css過渡/動(dòng)畫，DOM操作（插入/刪除）在下一幀中立即執(zhí)行。（注意：此指瀏覽器逐幀動(dòng)畫機(jī)制，和Vue的nextTick概念不同）
• 類名-六個(gè)class
  1. v-enter:定義過渡的開始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除
  2. v-enter-active:定義進(jìn)入過渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過渡的階段中應(yīng)用,在元素被插入之前生效，在過渡/動(dòng)畫完成之后移除，這個(gè)類可以被用來定義進(jìn)入過渡的過程時(shí)間，延遲和曲線函數(shù)
  3. v-enter-to:2.1.8版及以上定義進(jìn)入過渡的結(jié)束狀態(tài)，在元素被插入之后下一幀生效（于此同時(shí)v-enter被移除），在過渡/動(dòng)畫完成之后移除
  4. v-leave:定義離開過渡的開始狀態(tài)，在離開過渡被觸發(fā)時(shí)立刻生效，下一幀被移除
  5. v-leave-active:定義離開過渡生效時(shí)的狀態(tài)。在整個(gè)離開過渡的階段中應(yīng)用，在離開過渡被觸發(fā)時(shí)立刻生效，在過渡/動(dòng)畫完成之后移除。這個(gè)類可以被用來定義離開過渡的過程時(shí)間，延遲和曲線函數(shù)
  6. v-leave-to:2.1.8版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效（與此同時(shí)v-leave被刪除），在過渡/動(dòng)畫完成之后移除
  • 對于這些過渡中切換的類名來說，如果使用一個(gè)沒有名字的<transition>，則v-是這些類名的默認(rèn)前綴。如果使用了<transition name="my-transition">,那么v-enter會(huì)替換為my-transition-enter，即替換為transition標(biāo)簽中的name屬性的值
• 自定義過渡的類名
  • enter-class === v-enter
  • enter-active-class === v-enter-active
  • enter-to-class === v-enter-to
  • leave-class === v-leave
  • leave-active-class === v-leave-active
  • leave-to-class === v-leave-to
  • 添加到transition標(biāo)簽中，修改對應(yīng)類名
  • 他們的優(yōu)先級高于普通的類名，這對于Vue的過渡系統(tǒng)和其他第三方css動(dòng)畫庫，如Animate.css結(jié)合使用十分有效
  • 不再需要為transition標(biāo)簽添加name屬性
• 同時(shí)使用過渡和動(dòng)畫

  • Vue 為了知道過渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽器。它可以是 transitionend 或 animationend ，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種，Vue 能自動(dòng)識(shí)別類型并設(shè)置監(jiān)聽。

  • 但是，在一些場景中，你需要給同一個(gè)元素同時(shí)設(shè)置兩種過渡動(dòng)效，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒結(jié)束。在這種情況中，你就需要使用 type 特性并設(shè)置 animation 或 transition 來明確聲明你需要 Vue 監(jiān)聽的類型

Vueg插件

• 為webApp提供轉(zhuǎn)場特效的開源Vue插件
• Vueg

Vuex-狀態(tài)管理模式

• 借鑒The Elm Architecture、Redux、Flux,與其他模式不同的是，Vuex是專門為Vue.js設(shè)計(jì)的狀態(tài)管理庫，以利用Vue.js的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來進(jìn)行高效的狀態(tài)更新

• 什么情況下使用Vuex

  • 如果不開發(fā)大型單頁應(yīng)用，使用Vuex可能是繁瑣冗余的
  • 如果應(yīng)用夠簡單，最好不要使用Vuex，簡單的store模式足夠了

• Vuex與單純的全局對象的區(qū)別

  1. Vuex的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng)Vuex組件從store中讀取狀態(tài)的時(shí)候，若store中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)的得到高效更新
  2. 不能直接改變store中的狀態(tài)，改變store中的狀態(tài)的唯一途徑就是顯示的提交（commit）mutation，這樣使得我們方便的追蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好的了解我們的應(yīng)用

• State

  • 可以在需要使用store中數(shù)據(jù)的組件的computed中新建對應(yīng)state中數(shù)據(jù)的方法，將state中的數(shù)據(jù)返回即可直接使用computed:{msg(){return this.$store.state.xxx}}
  • mapState-輔助函數(shù)
    • 當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余，使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性
    • computed:mapState({count:state=>state.count,countAlias:"count"})-->使用箭頭函數(shù)可使代碼更簡練，但有時(shí)為能使用this獲取局部狀態(tài)，必須使用常規(guī)函數(shù)--但是這種寫發(fā)造成非store相關(guān)數(shù)據(jù)無法寫入
    • 對象展開運(yùn)算符
      • 使用對象展開運(yùn)算符將此對象混入到外部對象中computed:{localComputed(){},...mapState({})}

• Getter

  • 從store的state中派生出一些狀態(tài)
  • getter接收state作為第一個(gè)參數(shù)，也可以接收其他getter作為第二個(gè)參數(shù)
  • 通過讓getter返回一個(gè)函數(shù)，實(shí)現(xiàn)getter傳參，getter在通過方法訪問時(shí)，每次都會(huì)進(jìn)行調(diào)用，而不會(huì)緩存結(jié)果

• Mutation--提交

  • 更改Vuex的store中的狀態(tài)的位移方法是提交mutation。Vuex中的mutation非常類似于事件，每個(gè)mutation都有一個(gè)字符串的事件類型（type）和一個(gè)回調(diào)函數(shù)（handler）。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且會(huì)接受state作為第一個(gè)參數(shù)
    • 觸發(fā)。this.$store.commit('xx')
    • 提交載荷（payload）。mutations:{xxx(state,n){}}--state作為第一個(gè)參數(shù)，第二個(gè)參數(shù)為載荷，大多數(shù)情況下載荷應(yīng)該是一個(gè)對象
    • 對象風(fēng)格的提交。this.$store.commit({type:'xxx',cs:xx})--type即為mutations中的事件名，其他均為參數(shù)
  • Mutation需遵守Vue的響應(yīng)規(guī)則
    1. 最好提前在store中初始化所有所需屬性
    2. 當(dāng)需要在對象上添加新屬性時(shí)，應(yīng)該：
       • 使用Vue.set(obj,'newProp',123),或者
       • 以新對象替換老對象。state.obj={...state.obj,newProp:123}
  • 使用常量替代Mutation事件類型
    • 使用常量替代mutation事件類型在各種Flux實(shí)現(xiàn)中是很常見的模式。這樣可以使linter之類的工具發(fā)揮作用，同時(shí)把這些常量放在單獨(dú)的文件中可以讓你的代碼合作者對整個(gè)app包含的mutation一目了然 ，--即將mutation中的事件名作為一個(gè)對象的屬性存入對象中[obj.name]作為mutation中的事件名，可以更直觀的了解各事件的功能
  • Mutation必須是同步函數(shù)
  • 在Vuex中，mutation都是同步事物

• Action--分發(fā)

  • Action類似于mutation，不同之處在于：
    1. Action提交的是mutation，而不是直接變更狀態(tài)
    2. Action可以包含任意一步操作
  • actions:{xxx(context){context.commit('xxx')}}--actions中處理的都是異步操作，改變數(shù)據(jù)時(shí)最后一步都是調(diào)用mtation即context.commit()
  • 使用參數(shù)解構(gòu)/解構(gòu)賦值來簡化代碼（特別是需要調(diào)用commit很多次的時(shí)候）--actions:{xxx({commit}){commit('xxx')}}--通過結(jié)構(gòu)復(fù)制直接得到context中的commit調(diào)用mutation中對應(yīng)的事件處理
  • 觸發(fā)
    • this.$store.dispath('xxx')
  • 因?yàn)閙utation中只能執(zhí)行同步操作，所以只能通過actions內(nèi)部執(zhí)行異步操作后調(diào)用mutation--actions:{xx({commit}){setTimeout(()=>{commit('xxx')},1000)}}--一秒后調(diào)用commit('xx')執(zhí)行mutation中的對應(yīng)處理事件
  • Actions支持同樣的載荷方式和對象方式進(jìn)行分發(fā)

• module

  • 模塊中有自己的state，將其放入store的modules中后，其state會(huì)變成rootState（最外層store中的state）
    • this.$store.state.模塊名 //這就是對應(yīng)模塊中的state對象
  • getters最終會(huì)變成root中的getters
    • module={getters:{getter名字（state,getters,rootState,rootGetter）{}}}--state是當(dāng)前模塊的狀態(tài)，rootState是根store的state
    • 如果沒有namespaced:true屬性那么getter就是rootstore的getter，如果有該屬性getters就是模塊中的getter，第四個(gè)參數(shù)rootGetter才是全局中全部的getter
    • this.$store.getters.getter名字
    • 如果給模塊添加namespaced:true那么對應(yīng)的getter，mutation，action都會(huì)變成“對應(yīng)模塊名/對應(yīng)名字”--區(qū)分rootstore與模塊中的getter，mutation，action
    • 如果模塊中有namespaced屬性，那么commit('mutation')只能觸發(fā)模塊內(nèi)的mutation
      • 如果在commit第三個(gè)參數(shù)中添加{root：true}-則觸發(fā)的是全局的mutation--commit('mutation名字',payload,{root:true})--dispatch同理
    • 模塊創(chuàng)建
      • new Vuex.Store({modules:{模塊名：{}}})
      • 分開--const module={} new Vuex.Store({modules:{模塊名：module}})
      • 模塊中也有state,getters,mutations,actions,modules
      • 單個(gè)模塊當(dāng)做一個(gè)store即可
        • state
          • this.$store.state
            • 模塊中的state
              • this.$store.state.模塊名
        • getters,actions,mutations--直接會(huì)添加到rootstore中的對應(yīng)位置
        • 如果給模塊添加namespaced:true
          • name對應(yīng)的getters,mutations,actions會(huì)變成 模塊名/名字 的形式，并且可以與rootstore中的姓名重合，因?yàn)槊种皫в懈髯阅K名
            • 同時(shí)，直接在模塊中commit('mutation')/dispatch('action')，默認(rèn)提交/分發(fā)的是模塊中的mutation/action
            • 想要調(diào)用全局，需要在之后加上{root:true}
              • commit('mutation',payload,{root:true})
              • dispatch('action',payload,{root:true})
        • 輔助函數(shù)如果想要使用命名空間模塊中的內(nèi)容
          • mapState({msg:state=>state.模塊名.msg})
          • mapState('模塊名',['msg'])

• 代碼

  var store = new Vuex.Store({
    state:{

    },
    mutations:{

    },
    getters:{

    },
    actions:{

    }
  })
  this.$store.state.xx  //獲取state中存儲(chǔ)的數(shù)據(jù)

• input v-model處理方法**
  • 詳見Vuex-表單處理
  • 當(dāng)頁面中存在input等表單元素時(shí)，需要使用v-model,但store中state無法與computed直接修改
  • 所以將computed的書寫格式寫成computed:{msg:{get(){//獲得state中的數(shù)據(jù)},set(value){//value 當(dāng)頁面中form表單中的數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)，值即為修改后的數(shù)據(jù) 可在此提交mutation修改state中的對應(yīng)數(shù)據(jù) this.$store.commit('setMsg',value)}}}
  • computed對象中的get方法用來獲取store里state中的數(shù)據(jù)，顯示到頁面，而set方法中的value則為頁面中表單數(shù)據(jù)發(fā)生變化后的值，可在觸發(fā)后將值作為載荷提交mutation修改state中的數(shù)據(jù)
• axios攔截器**
  • 在請求或響應(yīng)被then或catch處理前攔截它們
  • 對發(fā)送前數(shù)據(jù)添加token，或設(shè)置請求頭，驗(yàn)證等
  • 對響應(yīng)數(shù)據(jù)做處理，剝離外層結(jié)構(gòu)等

    //添加請求攔截器
    axios.interceptors.request.use(function(config){
      //在發(fā)送請求之前做些什么
      return config;
    },function(error){
      //對請求錯(cuò)誤做些什么
      return Promise.reject(error);
    });
          // axios.interceptors.request.use(config=>config,error=>Promise.reject(error))
    //添加響應(yīng)攔截器
    axios.interceptors.response.use(function(response){
      //對響應(yīng)數(shù)據(jù)做點(diǎn)什么
      return response;
    },function(error){
      //對響應(yīng)錯(cuò)誤做點(diǎn)什么
      return Promise.reject(error);
    })
          /*
            axios.interceptors.response.use(response=>response,error=>Promise.reject(error))
          */

keep-alive

• 切換組件外層添加<keep-alive></keep-alive>可以緩存組件的狀態(tài)，當(dāng)再次切換后顯示之前的狀態(tài)--默認(rèn)情況下組件被v-if隱藏后經(jīng)歷destroy周期，再次顯示時(shí)觸發(fā)create，mount周期，不會(huì)保留之前的訪問狀態(tài)
• 屬性
  • include 符合條件的組件會(huì)被緩存
    • 字符串
      • 逗號隔開組件
    • 正則
      • 符合比正則表達(dá)式的會(huì)被緩存--v-bind:include
    • 數(shù)組
      • ['組件名','組件名']
      • v-bind:include
  • exclude與include相仿，符合條件的不會(huì)被緩存
• Props:
  • include-字符串或正則表達(dá)式，只有匹配的組件會(huì)被緩存
  • exclude-字符串或正則表達(dá)式，任何匹配的組件都不會(huì)被緩存
• 用法
  • <keep-alive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和<transition>相似，<keep-alive>是一個(gè)抽象的組件：它自身不會(huì)渲染一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中。當(dāng)組件在<keep-alive>內(nèi)被切換，它的activated和deactivated這兩個(gè)聲明周期鉤子函數(shù)將會(huì)被對應(yīng)的執(zhí)行
  • 主要用于保留組件狀態(tài)或避免重新渲染
  • include、exclude--匹配檢查先檢查組件自身的name選項(xiàng)，如果name選項(xiàng)不可用，則匹配他的局部注冊名稱（父組件components選項(xiàng)的鍵值）。匿名組件不能被匹配
  • activated--keep-alive組件激活時(shí)調(diào)用
  • deactivated--keep-alive組件停用時(shí)調(diào)用
  • 由于keep-alive的組件緩存，切換組件時(shí)不會(huì)觸發(fā)對應(yīng)的destroy，create，mount周期函數(shù)

ref

• ref可以添加在組件或者h(yuǎn)tml標(biāo)簽上
• 可以通過this.$refs.自定義名字獲取
• created生命周期中無法獲取DOM，因?yàn)閏reated時(shí)頁面還沒有渲染
• ref加在html標(biāo)簽上，得到對應(yīng)的DOM對象
• ref加載組件標(biāo)簽上，得到的是對應(yīng)組件的組件對象

nextTick

• this.$nextTick(()=>{//這里的代碼會(huì)在每次更新后，頁面DOM更新后才會(huì)觸發(fā)})

對象操作

• 如果對象某個(gè)值不存在，先要添加新的值，并試數(shù)據(jù)響應(yīng)--不能使用app.對象.新屬性=值
• 需要使用Vue.set方法
  • Vue.set(對象,'屬性','值')
  • app.$set(對象,'屬性','值')
  • Vue.delete(對象,'屬性')
  • Vue.$delete(對象,'屬性')

自定義指令

• 想要對DOM元素進(jìn)行原生操作時(shí)，可以使用自定義指令
• Vue.directive('指令名(不加v-)',{})
• 自定義指令共5個(gè)鉤子函數(shù)
  • bind
  • inserted
  • update
  • componentUpdated
  • unbind
• 參數(shù)
  • el 指令綁定的元素的DOM對象可以直接操作DOM
  • binding
    • name 指令名
    • value 指令后等于的值 v-指令名='value'
    • oldValue 僅在update和componentUpdated中存在
    • expression 指令表達(dá)
    • arg 參數(shù) v-on:click click就是參數(shù)
    • modifiers v-on：click.stop stop就是修飾符
      • 修飾符可以有多個(gè)，所以修飾符是一個(gè)對象
    • vnode Vue 產(chǎn)生的虛擬節(jié)點(diǎn)
    • oldVnode 上一個(gè)虛擬節(jié)點(diǎn)

slot插槽

• 正常情況下template中，標(biāo)簽中的內(nèi)容會(huì)被忽略，而slot標(biāo)簽相當(dāng)于，預(yù)留的插槽，可以實(shí)現(xiàn)內(nèi)容的正常顯示
• 在兩slot標(biāo)簽中的內(nèi)容會(huì)被當(dāng)做默認(rèn)值，即當(dāng)后期不插入內(nèi)容時(shí)，顯示默認(rèn)值
• 優(yōu)點(diǎn)：方便后期組件使用，和更改對應(yīng)信息

具名插槽-name屬性

• 當(dāng)slot標(biāo)簽有多個(gè)時(shí)，為避免混亂，可以為其添加name屬性
• 當(dāng)使用時(shí)，可以在標(biāo)簽中添加slot屬性，其值為對應(yīng)slot名-（造成多余標(biāo)簽）
• 可以通過<template slot="slotname"></template>來實(shí)現(xiàn)，該標(biāo)簽不會(huì)顯示在頁面中

默認(rèn)內(nèi)容

• 當(dāng)在slot標(biāo)簽之間填寫內(nèi)容時(shí)，會(huì)被當(dāng)做默認(rèn)內(nèi)容，當(dāng)不在組件標(biāo)簽之間填寫內(nèi)容時(shí)，顯示默認(rèn)內(nèi)容，填寫則覆蓋默認(rèn)值
• 具名標(biāo)簽slot標(biāo)簽之間添加默認(rèn)內(nèi)容無效
• 具名插槽會(huì)與具有slot屬性的標(biāo)簽一一對應(yīng)，多余的內(nèi)容會(huì)在不具名slot中統(tǒng)一顯示，如果不存在該標(biāo)簽，則內(nèi)容舍棄

作用域插槽（flot-scope="自定義名字"）

• 改變從子組件獲取的數(shù)據(jù)結(jié)構(gòu)？？？

• 創(chuàng)建組件時(shí)

  • 在slot標(biāo)簽上添加的屬性
  • <slot 數(shù)據(jù)名="值" 數(shù)據(jù)名2="值2"></slot>
  • 使用組件時(shí)，會(huì)出現(xiàn)在組件標(biāo)簽內(nèi)部的slot-scope上
    <組件標(biāo)簽>
    • div slot-scope="自定義名字"">
    • // 自定義名字就是一個(gè)對象，對象上包含了所有的slot標(biāo)簽上的屬性
    • /div>
    • </組件標(biāo)簽>

• 作用域插槽的意義

  • 將數(shù)據(jù)給對應(yīng)的組件，讓使用組件的人可以自定義組件的模板

@click==v-on:click

• 寫在template中的v-on:click（click事件）可以正常觸發(fā)
• 但是，當(dāng)寫在組件標(biāo)簽中時(shí)，會(huì)被當(dāng)做是監(jiān)聽（自定義事件名）**
• 所以**，如果想要在組件標(biāo)簽中寫@click事件，可以使用修飾符.native--》聲明該click為原生click事件
• 或者在template中，為@click添加自定義事件，即子到父通信，可傳遞數(shù)據(jù)，否則無法觸發(fā)click事件**

Element UI-》組件庫

• Element UI

vue-cli

• 命令行工具
  • Vue 提供了一個(gè)官方的 CLI，為單頁面應(yīng)用快速搭建 (SPA) 繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時(shí)間就可以運(yùn)行起來并帶有熱重載、保存時(shí) lint 校驗(yàn)，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。更多詳情可查閱 Vue CLI 的文檔。
  • 安裝步驟
    • cnpm install -g vue-cli--(全局安裝vue-cli)
    • vue init list name path--(初始化 vue init list（模板類型-通過vue-list查看） name（項(xiàng)目名） path（不寫，默認(rèn)為當(dāng)前路徑）)
    • vue init webpack + 項(xiàng)目名稱（不能包含大寫）
  • 創(chuàng)建

    • ? Project name 輸入項(xiàng)目名稱

    • ? Project description 輸入項(xiàng)目描述

    • ? Author 作者

    • ? Vue build 打包方式，回車就好了

    • ? Install vue-router? 選擇 Y 使用 vue-router，輸入 N 不使用

    • ? Use ESLint to lint your code? 代碼規(guī)范，推薦 N

    • ? Setup unit tests with Karma + Mocha? 單元測試，推薦 N

    • ? Setup e2e tests with Nightwatch? E2E測試，N

  • 運(yùn)行
    • 進(jìn)入對應(yīng)文件，路徑
    • cnpm install--（安裝所需組件）
    • npm start/npm run dev
  • 編寫
    • sc--快捷生成template script style結(jié)構(gòu)
  • 插件
    • Vetur