1. 標(biāo)簽定義ref屬性和值
2. this.$refs.值 - 原地獲取DOM

$nextTick獲取更新后的DOM

• 問題 : data數(shù)據(jù)改變,"dom更新是異步的"

1. 在setTimeOut延時(shí)器中獲取DOM
2. 在Vue中提供$nextTick方法(等待DOM更新后再執(zhí)行此方法中的回調(diào)函數(shù))

• $nextTick原理
  嘗試用Promise.then() / setTimeout & setImmediate
• $nextTick使用

this.$nextTick(()=>{
   getElementById("myp").innerHTML
})

<keep-alive>組件緩存

• 用<keep-alive>包裹的組件會(huì)被緩存到內(nèi)存中在切換組件的時(shí)候就不會(huì)被銷毀和重建,提升渲染性能

<keep-alive>
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

組件插槽

• vue提供組件插槽能力, 允許開發(fā)者在封裝組件時(shí)，把不確定的部分定義為插槽
• 插槽步驟

1. 組件內(nèi)用<slot></slot>占位
2. 使用組件時(shí)<template></template>夾著的地方, 傳入標(biāo)簽替換slot

• <slot>夾著內(nèi)容默認(rèn)顯示內(nèi)容, 如果不給插槽slot傳東西, 則使用<slot>夾著的內(nèi)容在原地顯示
• 具名插槽(當(dāng)一個(gè)組件內(nèi)有2處以上需要外部傳入標(biāo)簽的地方,傳入的標(biāo)簽可以分別派發(fā)給不同的slot位置)

1. 在slot標(biāo)簽上用name屬性命名

 <slot name="one"></slot>
 <slot name="two"></slot>

2.在template標(biāo)簽上用 v-slot:插槽名 傳入具體標(biāo)簽 , v-slot:可以簡寫成 " # "

 <template #one>
        <div>
            <p>寒雨連江夜入?yún)?</p>
            <p>平明送客楚山孤防嗡。</p>
            <p>洛陽親友如相問屈芜，</p>
            <p>一片冰心在玉壺炸裆。</p>
        </div>
    </template>
    <template #two>
        <img src="../assets/mm.gif" alt="" />
    </template>

• 作用域插槽
  子組件里值, 在給插槽賦值時(shí)在父組件環(huán)境下使用

1. 創(chuàng)建組件, 準(zhǔn)備slot, 在slot上綁定屬性和子組件值
2. 使用組件, 傳入自定義標(biāo)簽, 用template和v-slot="自定義變量名"
3. 自定義變量名會(huì)自動(dòng)綁定slot上所有屬性, 就可以使用子組件內(nèi)值, 并替換slot位置

<template>
  <div>
    <p>這里是個(gè)Pannel3-子組件, 下面是插槽位置</p>
    <slot name="one" :row="slotDefault">{{ slotDefault.default1 }}</slot>
  </div>
</template>

<script>
export default {
  data(){
    return {
      slotDefault: {
        default1: "無名氏",
        default2: "孫紅雷"
      }
    }
  }
}
</script>

<template>
  <div>   
    <!-- 想要改變默認(rèn)內(nèi)容, 但是默認(rèn)數(shù)據(jù)在子組件里, 想讓插槽使用就使用插槽作用域 -->
    <!-- 
      口訣: 1.創(chuàng)建組件, 準(zhǔn)備slot, 在slot上綁定屬性和子組件值
      2. 使用組件, 傳入自定義標(biāo)簽, 用template和v-slot="自定義變量名"
      3. 自定義變量名會(huì)自動(dòng)綁定slot上所有屬性, 就可以使用子組件內(nèi)值, 并替換slot位置
     -->
    <Pannel3>
      <template #one="scope">
        {{ scope.row.default2 }}
      </template>
    </Pannel3>
  </div>
</template>

<script>
import Pannel3 from './Pannel3'
export default {
  components: {
    Pannel3
  }
}
</script>

自定義指令

• 局部注冊和使用

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 局部注冊
  directives: {
    focus: { // 自定義指令名
        inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù)
            el.focus()
        }
    },
  },
};
</script>

• 全局注冊
  在main.js用 Vue.directive()方法來進(jìn)行注冊, 以后隨便哪個(gè).vue文件里都可以直接用v-fofo指令

Vue.directive("fofo", {
  inserted(el){
    el.focus()
  }
})

自定義指令-接值

• 使用自定義指令, 傳入一個(gè)值

main.js定義處修改一下

Vue.directive("color", {
  inserted(el, binding){ // 插入時(shí)觸發(fā)此函數(shù)
    el.style.color = binding.value;
  },
  update(el, binding){ // 更新時(shí)觸發(fā)此函數(shù)
    el.style.color = binding.value;
  }
})

<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點(diǎn)擊變藍(lán)</p>

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

router 路由

• 路徑和組件的映射關(guān)系
• vue-router本質(zhì)是一個(gè)第三方包
• 步驟

1. 終端下載
   yarn add vue-router
2. 導(dǎo)入路由

import VueRouter from 'vue-router'

3. 注冊

// 在vue中誓禁，使用使用vue的插件唇牧，都需要調(diào)用Vue.use()
Vue.use(VueRouter)

4. 創(chuàng)建規(guī)則數(shù)組

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

5. 創(chuàng)建路由對(duì)象 - 傳入規(guī)則

const router = new VueRouter({
  routes
})

6. 關(guān)聯(lián)到vue實(shí)例

new Vue({
  router
})

7. 設(shè)置路由掛載點(diǎn)

<router-view></router-view>

vue路由 - 聲明式導(dǎo)航

• vue-router提供了一個(gè)全局組件 router-link
• router-link實(shí)質(zhì)上最終會(huì)渲染成a鏈接 to屬性等價(jià)于提供 href屬性(to無需#)
• router-link提供了聲明式導(dǎo)航高亮的功能(自帶類名)
• router-link自帶的2個(gè)類名的區(qū)別是什么?

1. router-link-exact-active (精確匹配) url中hash值路徑, 與href屬性值完全相同, 設(shè)置此類名
2. router-link-active (模糊匹配) url中hash值, 包含href屬性值這個(gè)路徑

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">發(fā)現(xiàn)音樂</router-link>
      <router-link to="/my">我的音樂</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

聲明式導(dǎo)航 - 跳轉(zhuǎn)傳參

• 在跳轉(zhuǎn)路由時(shí), 可以給路由對(duì)應(yīng)的組件內(nèi)傳值
• 在router-link上的to屬性傳值, 語法格式如
• ?key=value 用$route.query.key 取值
• /值 提前在路由規(guī)則/path/:key 用$route.params.key 取值

1. /path?參數(shù)名=值
2. /path/值 – 需要路由對(duì)象提前配置 path: “/path/參數(shù)名”

• 對(duì)應(yīng)頁面組件接收傳遞過來的值

• $route.query.參數(shù)名

• $route.params.參數(shù)名

創(chuàng)建components/Part.vue - 準(zhǔn)備接收路由上傳遞的參數(shù)和值

<template>
  <div>
      <p>關(guān)注明星</p>
      <p>發(fā)現(xiàn)精彩</p>
      <p>尋找伙伴</p>
      <p>加入我們</p>
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
  </div>
</template>

路由定義

{
    path: "/part",
    component: Part
  },
  {
    path: "/part/:username", // 有:的路徑代表要接收具體的值
    component: Part
  },

導(dǎo)航跳轉(zhuǎn), 傳值給MyGoods.vue組件

<router-link to="/part?name=小傳">朋友-小傳</router-link>
<router-link to="/part/小智">朋友-小智</router-link>

vue路由 - 重定向&模式&404頁面

路由 - 重定向

• 網(wǎng)頁打開url默認(rèn)hash值是/路徑
• redirect是設(shè)置要重定向到哪個(gè)路由路徑

const routes = [
  {
    path: "/", // 默認(rèn)hash值路徑
    redirect: "/find" // 重定向到/find
    // 瀏覽器url中#后的路徑被改變成/find-重新匹配數(shù)組規(guī)則
  }
]

404頁面

• 放在路由最后, path匹配*(任意路徑) – 前面不匹配就命中最后這個(gè), 顯示對(duì)應(yīng)404組件頁面
• 步驟:

1. 創(chuàng)建NotFound頁面

<template>
  <img src="404圖片路徑" alt="">
</template>

<script>
export default {

}
</script>

<style scoped>
    img{
        width: 100%;
    }
</style>

在main.js - 修改路由配置

import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(規(guī)則是從前往后逐個(gè)比較path)
  {
    path: "*",
    component: NotFound
  }
]

路由 - 模式設(shè)置

• 修改路由在地址欄的模式( hash 模式 或者 history 模式 )

1. hash路由例如: http://localhost:8080/#/home

2. history路由例如: http://localhost:8080/home (以后上線需要服務(wù)器端支持, 否則找的是文件夾)

router/index.js

const router = new VueRouter({
  routes,
  mode: "history" // 打包上線后需要后臺(tái)支持, 模式是hash
})

vue路由 - 編程式導(dǎo)航

• 用JS代碼跳轉(zhuǎn), 聲明式導(dǎo)航用a標(biāo)簽

main.js - 路由數(shù)組里, 給路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

App.vue - 換成span 配合js的編程式導(dǎo)航跳轉(zhuǎn)

<template>
 <div>
   <div class="footer_wrap">
     <span @click="btn('/find', 'Find')">發(fā)現(xiàn)音樂</span>
     <span @click="btn('/my', 'My')">我的音樂</span>
     <span @click="btn('/part', 'Part')">朋友</span>
   </div>
   <div class="top">
     <router-view></router-view>
   </div>
 </div>
</template>

<script>
// 目標(biāo): 編程式導(dǎo)航 - js方式跳轉(zhuǎn)路由
// 語法:
// this.$router.push({path: "路由路徑"})
// this.$router.push({name: "路由名"})
// 注意:
// 雖然用name跳轉(zhuǎn), 但是url的hash值還是切換path路徑值
// 場景:
// 方便修改: name路由名(在頁面上看不見隨便定義)
// path可以在url的hash值看到(盡量符合組內(nèi)規(guī)范)
export default {
 methods: {
   btn(targetPath, targetName){
     // 方式1: path跳轉(zhuǎn)
     this.$router.push({
       // path: targetPath,
       name: targetName
     })
   }
 }
};
</script>

編程式導(dǎo)航 - 跳轉(zhuǎn)傳參

• JS跳轉(zhuǎn)路由, 傳參
• query / params 任選 一個(gè)
• 注意: 使用path會(huì)自動(dòng)忽略params

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">發(fā)現(xiàn)音樂</span>
      <span @click="btn('/my', 'My')">我的音樂</span>
      <span @click="oneBtn">朋友-小黑</span>
      <span @click="twoBtn">朋友-小白</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目標(biāo): 編程式導(dǎo)航 - 跳轉(zhuǎn)路由傳參
// 方式1:
// params => $route.params.參數(shù)名
// 方式2:
// query => $route.query.參數(shù)名
// 重要: path會(huì)自動(dòng)忽略params
// 推薦: name+query方式傳參
// 注意: 如果當(dāng)前url上"hash值和?參數(shù)"與你要跳轉(zhuǎn)到的"hash值和?參數(shù)"一致, 爆出冗余導(dǎo)航的問題, 不會(huì)跳轉(zhuǎn)路由
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳轉(zhuǎn)
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    },
    oneBtn(){
      this.$router.push({
        name: 'Part',
        params: {
          username: '小黑'
        }
      })
    },
    twoBtn(){
      this.$router.push({
        name: 'Part',
        query: {
          name: '小白'
        }
      })
    }
  }
};
</script>

vue路由 - 守衛(wèi)

• 路由跳轉(zhuǎn)之前, 先執(zhí)行一次前置守衛(wèi)函數(shù), 判斷是否可以正常跳轉(zhuǎn)
• next()放行, next(false)留在原地不跳轉(zhuǎn)路由, next(path路徑)強(qiáng)制換成對(duì)應(yīng)path路徑跳轉(zhuǎn)

// 目標(biāo): 路由守衛(wèi)
// 場景: 當(dāng)你要對(duì)路由權(quán)限判斷時(shí)
// 語法: router.beforeEach((to, from, next)=>{//路由跳轉(zhuǎn)"之前"先執(zhí)行這里, 決定是否跳轉(zhuǎn)})
// 參數(shù)1: 要跳轉(zhuǎn)到的路由 (路由對(duì)象信息)    目標(biāo)
// 參數(shù)2: 從哪里跳轉(zhuǎn)的路由 (路由對(duì)象信息)  來源
// 參數(shù)3: 函數(shù)體 - next()才會(huì)讓路由正常的跳轉(zhuǎn)切換, next(false)在原地停留, next("強(qiáng)制修改到另一個(gè)路由路徑上")
// 注意: 如果不調(diào)用next, 頁面留在原地

// 例子: 判斷用戶是否登錄, 是否決定去"我的音樂"/my
const isLogin = true; // 登錄狀態(tài)(未登錄)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("請(qǐng)登錄")
    next(false) // 阻止路由跳轉(zhuǎn)
  } else {
    next() // 正常放行
  }
})