vue學習-進階

1、VUE相關指令

• v-bind:class=“user” : vue屬性系結 ，v-bind: 指令可以縮寫為 : 符號

• v-model=“userName” : vue屬性系結

• v-if=“boolean” : 指令的運算式回傳 true 時才會顯示

  一般用于彈框的顯示與關閉

• v-for : 指令需要以 site in sites 形式的特殊語法， sites 是源資料陣列并且 site 是陣列元素迭代的別名，使用elementui后用處不是很大

• vue變數

  用var命令宣告的變數，是在全域范圍內有效的,且變數可以先使用再進行宣告，針對其中的問題，vue中不推薦使用var 而是提供了let和const

  let: es6新增了let命令，用來宣告變數，它的用法類似于var，但是所宣告的變數，只在let命令所在的代碼塊內有效，
  const:一個只讀的常量，一旦宣告，常量的值就不能改變
  

• computed : 計算屬性在處理一些復雜邏輯時，比如一個欄位需要依賴另一個欄位并進行處理得到的（例如年齡需要依賴出生日期來計算），methods中使用方法也能達到相同的效果，但是computed的性能更好，它是基于依賴項的變化才會進行變化
  

• watch : Vue3 監聽屬性 我們可以通過 watch 來回應資料的變化,如果監聽的物件內部屬性變化則使用deep：true

  1、資料變化時執行異步或開銷較大的操作時

  2、1父多子組件每一個子組件都用父組件的資料，同時子修改父資料，子修改后能確保所有子都能獲取到新的資料 則所有子組件可以使用watch來監聽資料，

  watch和computed區別

• vue事件相關指令 : 我們可以使用 v-on 指令來監聽 DOM 事件，v-on 指令可以縮寫為 @ 符號，

  # 單擊事件
  <a v-on:click="doThis"></a>
  <a @click="doThis"></a>
  <!-- 阻止單擊事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再多載頁面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修飾符可以串聯  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修飾符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件偵聽器時使用事件捕獲模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回呼 -->
  <div v-on:click.self="doThat">...</div>
  <!-- click 事件只能點擊一次 -->
  <a v-on:click.once="doThis"></a>
  
  # onchange事件
  <a v-on:change="doThis"></a>
  <a @change="doThis"></a>
  

2、VUE路由

路由中有三個基本的概念 route, routes, router，

1. route:它是一條路由，指代一個具體的路由頁面

2. routes: 是一組路由，把上面的每一條路由組合起來，形成一個陣列，

3. router: 是一個機制，相當于一個管理者，它來管理路由，

最終都需要使用router-view去進行選擇匹配后的渲染呈現.

2.1、router-link用法

? 組件支持用戶在具有路由功能的應用中（點擊）導航， 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的，作用類似于a標簽

參考例子：

2.2、編程式的導航

除了使用 <router-link> 創建 a 標簽來定義導航鏈接，我們還可以借助 router 的實體方法，通過撰寫代碼來實作，

2.3、hash模式和History模式

? Vue-router 中hash模式和history模式的關系 在vue的路由配置中有mode選項 最直觀的區別就是在url中 hash 帶了一個很丑的 # 而history是沒有#的

• hash —— 即地址欄 URL 中的 # 符號（此 hash 不是密碼學里的散列運算），比如這個 URL：www.abc.com/#/hello的值為 #/hello，它的特點在于：hash 雖然出現在 URL 中，但不會被包括在 HTTP 請求中，對后端完全沒有影響，因此改變 hash 不會重新加載頁面，

• history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，（需要特定瀏覽器支持）這兩個方法應用于瀏覽器的歷史記錄堆疊，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能，只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求，

2.4、路由守衛

? 主要用于在每次路由跳轉程序中通過鉤子函式去動態的改變導航行為，可以用來進行驗證 用戶登錄與否權限控制，

全域, 單個路由獨享, 組件級

每個守衛方法接收三個引數：

• to: Route: 即將要進入的目標 路由物件
• from: Route: 當前導航正要離開的路由
• next: Function: 一定要呼叫該方法來 resolve 這個鉤子，執行效果依賴 next 方法的呼叫引數，
  • next(): 進行管道中的下一個鉤子，如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)，
  • next(false): 中斷當前的導航，如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址，
  • next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址，當前的導航被中斷，然后進行一個新的導航，你可以向 next 傳遞任意位置物件，且允許設定諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項，
  • next(error): (2.4.0+) 如果傳入 next 的引數是一個 Error 實體，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回呼，

2.4.1、全域

? 1. router.beforeEach 注冊一個全域前置守衛，進入路由之前

2. router.beforeResolve 注冊一個全域守衛，這和 router.beforeEach 類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被決議之后，決議守衛就被呼叫，

3. router.afterEach 全域后置鉤子 進入路由之后

2.4.2、路由獨享

router.beforeEnter注冊一個路由獨享的前置守衛，與一個全域前置守衛類似

2.4.3、組件路由

 beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前呼叫
    // 不！能！獲取組件實體 `this`
    // 因為當守衛執行前，組件實體還沒被創建
  },
  beforeRouteUpdate(to, from, next) {
    // 在當前路由改變，但是該組件被復用時呼叫
    // 舉例來說，對于一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由于會渲染同樣的 Foo 組件，因此組件實體會被復用，而這個鉤子就會在這個情況下被呼叫，
    // 可以訪問組件實體 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導航離開該組件的對應路由時呼叫
    // 可以訪問組件實體 `this`
  }

2.5、路由其他用法

2.5.1、嵌套路由

在真是開發場景中，嵌套路由多用于多級選單欄的展示，他的用法如下：

 //#嵌套路由
    {
      path: '/nesting',
      name: 'nesting',
      component: nesting,
      children:[
        {
          // 當 /nesting/home2 匹配成功，
          // home2 會被渲染在 nesting 的 <router-view> 中
          path: 'home2',
          component: home2
        },
        {
          // 當 /nesting/studentManager 匹配成功，
          // StudentManager 會被渲染在 nesting 的 <router-view> 中
          path: 'studentManager',
          component: StudentManager
        },
      ]
    },

http://localhost:8083/#/nesting

2.5.2、路由重定向

 routes: [
    //訪問/home 則請求重定向到/home2對應的vue組件
    { path: '/home', redirect: '/home2' }
  ]

2.5.3、別名

請求 /aliasVue 請求url保持不變訪問是/hom2對應的組件

 { path: '/home2', alias:"/aliasVue" }

3、vue組件

• 組件 (Component) 是用來構成你的 App 的業務模塊，它的目標是 App.vue

• 插件 (Plugin) 是用來增強你的技術堆疊的功能模塊，它的目標是 Vue 本身

簡單來說，插件就是指對Vue的功能的增強或補充，

? 插件通常用來為 Vue 添加全域功能，插件的功能范圍沒有嚴格的限制，可以添加資源、方法屬性等，

插件的實作應該暴露一個 install 方法

  #### 3.1、組件概念

? 將一系列的標簽(html)、樣式(css)、腳本(JS) 統一命名封裝成一個組件一種機制，組件系統讓我們可以用獨立可復用的小組件來構建大型應用，專案中所有后綴為vue局均可以看做組件

? 好處： 降低整個系統的耦合度，提高可維護性，除錯方便

從功能維度區分：業務組件（與業務邏輯耦合比較深的），功能組件（與業務無關 通用組件 比如分頁組件）

  #### 3.2、 組件注冊及使用

1. vue.extend

   //1.使用extend創建組件
   //按照Java的開發思想，創建時采用駝峰命名法，使用的時候每個單詞必須用-隔開
   let extendButton = Vue.extend({
     data: function () {return {count: 0} },
     template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'});
   Vue.component("extend-button",extendButton);
   //注冊為全域組件
   Vue.component('appILS',appILS);
   //使用 vue頁面直接使用即可
   <h1>1、extend-button</h1>
   <extend-button></extend-button>
   

2. vue.component

   注意：全域組件必須寫在vue實體上方，不然渲染不出來，

   //使用component創建組件 并注冊
   Vue.component('appTemplete',{
   template: "<h3>這是不使用extend創建的組件</h3>"
   })
   //使用component創建組件 并注冊
   Vue.component('appTemplete',{
   template: "#compentName"
   })
   //使用 vue頁面直接使用即可
   <h1>2、component組件注冊 模板耦合</h1>
   <normal-button></normal-button>
   

3. 區域注冊

   //在需要專案中匯入
   import partButton from './button-counter'
   export default {
     name: 'myButton',
     components: { partButton },
   }
   //使用
   <h1>4、區域組件</h1>
   <part-button></part-button>
   

4、vue組件通信

4.1、父子組件傳參

4.1.1、props+$emit

父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞，父組件通過 prop 給子組件下發資料，子組件通過事件給父組件發送訊息

父組件

<template>
  <div class="parent">
    <h1>{{ msg }}</h1>
    <p>爸爸的資產:<b>{{money}}</b></p>
    <p>我給兒子起的名字:<b>{{sonName}}</b></p>
    <h1>使用$event引數</h1>
    <children :name="sonName" @updateDemo="money-=$event" @update:name="sonName=$event"/>
    <h1>使用方法接受引數</h1>
    <!--  v-on縮寫@   -->
    <children :name="sonName" v-on:updateDemo="spendMoney" @update:name="sonName=$event" />
    <children :name="sonName" @updateDemo="spendMoney" @update:name="sonName=$event" />
    <h1>使用sync雙向系結</h1>
    <children :name.sync="sonName"  @updateDemo="spendMoney" />
<!-- <children :name="sonName" @update:name="$event" />-->
  </div>
</template>

<script>
import children from "./children.vue";
export default {
  name: 'parent',
  components:{children},
  data () {
    return {
      msg: '父組件',
      money: 100,
      sonName:"狗蛋"
    }
  },
  methods:{
    spendMoney:function (money) {
      debugger
      this.money-=money;

    }
  },
}

子組件

<template>
  <div class="parent">
    <h1>{{ msg }}</h1>
    <p>我爸給我起名為：<b>{{name}}</b></p>
    <button @click="getMoney(10)">我花我爸10塊錢</button>
    <button @click="changeName()">我要改名</button>
  </div>
</template>

<script>
export default {
  name: 'son',
  props:{
    name:{
      type: String,
      required: true
    },
  },
  data () {
    return {
      msg: '子組件',
    }
  },
  created() {
  },
  methods:{
    getMoney:function (money) {
      this.$emit("updateDemo",money);
    },
    changeName:function () {
      this.$emit('update:name',"鐵錘");
    }
  },
}
</script>

4.1.2、$parent

子類可以通過$parent 訪問其中的屬性和方法，例子如下：

changeNameByPro:function () {
  //$parent訪問屬性
  this.$parent.sonName = "鐵錘";
},

changeNameByMethod:function () {
  //$parent訪問方法
  this.$parent.changeSonName("鐵柱");
},

4.1.3 provide+inject

? 對于層級比較復雜的組件，我們可以使用provide+inject父組件通過provide提供資料，其他任何層級的子組件可以使用inject注入資料

• provide 選項應該是一個物件或回傳一個物件的函式，

• inject 選項應該是：一個字串陣列，或一個物件，物件的 key 是本地的系結名，

父組件

provide(){
  return {
    lucykMoney:this.money,
    addSnacks:this.addSnacks,
  }
},

子組件

inject: ["lucykMoney","addSnacks"],

4.2、非父子組件傳參

4.2.1 eventBus

? EventBus 又稱為事件總線，在Vue中可以使用 EventBus 來作為溝通橋梁的概念，可以向 e m i t ( ) 該 中 心 注 冊 發 送 事 件 或 emit()該中心注冊發送事件或 emit()該中心注冊發送事件或on接收事件，類似于一個vue全域快取，用 e m i t ( ) （ < f o n t c o l o r = " r e d " > 注 冊 事 件 < / f o n t > ） 去 寫 數 據 用 emit()（<font color="red">注冊事件</font>）去寫資料用 emit()（<fontcolor="red">注冊事件</font>）去寫數據用on()讀資料(事件監聽)，

**1. 創建eventBus **

/**
 * 創建一個全域的bus
 */
import Vue from 'vue';
const eventBus = new Vue();
// 匯出便于使用
export default eventBus;

**2. 添加全域eventBus **

## main.js
//全域匯入 eventBus
import eventBus from './components/eventBus/eventBus'
Vue.prototype.$eventBus = eventBus;

3. 創建修改資料

addMoney:function () {
   this.companyMoney+=this.money;
   alert("當前公司資金:"+this.companyMoney+"W");
   //自定義一個money事件 提交事件修改資料
   this.$eventBus.$emit("money",this.companyMoney);
}

4. 獲取資料

//實時監聽 獲取資料  方法一般放在 mounted和create中
this.$eventBus.$on(
  "money",
  val => {
    this.companyMoney = val;}
);

4.2.2 storage

1. sessionStorage（臨時存盤） ：為每一個資料源維持一個存盤區域，在瀏覽器打開期間存在，包括頁面重新加載瀏覽器的會話時間（

2. localStorage（長期存盤） ：與 sessionStorage 一樣，但是瀏覽器關閉后，資料依然會一直存在

   一般的瀏覽器能存盤的是5MB左右

   # 設定
   let info = "張三"
   localStorage.setItem('hou', JSON.stringify(info));
   localStorage.setItem('zheng', str);
   
   #獲取
   let data1 = JSON.parse(localStorage.getItem('hou'));
   let data2 = localStorage.getItem('zheng');
   
   #洗掉
   //洗掉某個
   localStorage.removeItem('hou');
   //洗掉所有
   localStorage.clear();
   

5、vue請求回應axios

• 支持瀏覽器和node.js、 支持promise、 能攔截請求和回應、能轉換請求和回應資料、能取消請求瀏覽器端支持防止CSRF(跨站請求偽造) JavaScript的http請求的二次封裝，就類似jQuery的ajax

  5.1 axios常用配置

  axios.create({
  	//以下是常用的配置屬性
  	baseURL:'',	//請求的域名，請求地址   例如：'http://localhost:8080'
  	timeout:'',	//請求超時時間，超過此時間將回傳401，(ms),時間過長會阻塞后端傳輸的資料
  	url:'',		//請求的路徑
  	method:'',	//請求的方法（get，post,put,patch,delete等）
  	headers:'',	//設定請求頭
  	params:{},	//請求引數拼接在url上
  	data:{}		//請求闡述拼接在請求體中
  })
  # 添加攔截器 
  //請求發起攔截處理 添加請求頭，權限資訊等
  service.interceptors.request.use()
  //回應攔截處理 通用資料轉換，例外處理
  service.interceptors.response.use
  
  

  5.2 axios用法

  api介面(AxiosRequestConfig).then(data => {
     //呼叫成功業務邏輯處理     
  }).catch(err => {
     //例外處理
  })
  

• 單獨一個配置用于aixos 全域配置，請求/回應攔截

• xxxapi檔案宣告放置介面：請求方式和請求相對路徑

• vue頁面參考呼叫

  5.3 取消請求

import axios from "axios";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

Axios.post(
      "/levenx/common/post",
      {
        name: "levenx",
      },
      { cancelToken: source.token }
    )
      .then((res) => {
        debugger;
      })
      .catch((err) => {
        alert(err);
        return err;
      });
    debugger;
    source.cancel("取消請求");

5.4 同步請求

var fun2 = async function(){
    await fun1();
}

6、VUEX

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式，它采用集中式存盤管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化，

new Vue({
  // state 
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

• state，驅動應用的資料源；
• view，以宣告方式將 state 映射到視圖；
• actions，回應在 view 上的用戶輸入導致的狀態變化，
  
  出現多個組件共享狀態變更狀態 就需要使用VUEX

import Vue from 'vue'
import Vuex from 'vuex'
import age from "./modules/age";
Vue.use(Vuex)
//vuex管理的狀態值
const state = {
  count: 0
};
//vuex不允許直接修改state中的值
//而是需要通過顯示的執行 commit("mutationName",[args])修改狀態
const mutations = {
  increment (state) {
    state.count++;
  },
  update (state,count) {
    state.count = count;
  }
};
// store 中的 state 中派生出一些狀態（計算數學） 可以提供一個getter
//Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性），就像計算屬性一樣，getter 的回傳值會根據它的依賴被快取起來
const getters = {
  joinCountStr:state => state.count+"w",
}

//Action 類似于 mutation，不同在于：
// Action 提交的是 mutation，而不是直接變更狀態，
// Action 可以包含任意異步操作，
//Action 通過 store.dispatch 方法觸發 (直接dispatch mutations方法（mutation 必須同步執行這個限制么？Action 就不受約束）)
const actions = {
  incrementCount({ commit }) {
    commit('increment');
  },
  updateCount({ commit },count) {
    commit('update',count);
  },
};
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
});
export default store
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

7、VUE生命周期