1. 指令語法的簡(jiǎn)寫、完整寫法和注意事項(xiàng)

因?yàn)轫?xiàng)目中大多用簡(jiǎn)寫，所以完整寫法一般很少見到，
尤其是雙向綁定，見到完整寫法后才知道實(shí)際綁定到value屬性上面。

1.1. 單向綁定（v-bind）

完整寫法：v-bind:href="xxx"
簡(jiǎn)寫：:href="xxx"

1.2. 雙向綁定（v-model）

完整寫法：v-model:value="xxx"
簡(jiǎn)寫：v-model="xxx"

1.3. 監(jiān)聽事件（v-on）

完整寫法：v-on:click="xxx"
簡(jiǎn)寫：@click="xxx"

注意事項(xiàng)：

• v-bind 和 v-on 是可以動(dòng)態(tài)指定屬性名或事件名的，但實(shí)際很少用到，而且動(dòng)態(tài)的屬性名和事件名是有要求的，具體見官方文檔：https://cn.vuejs.org/guide/essentials/template-syntax.html#directives

<a :[attributeName]="url"> ... </a>
<a @[eventName]="doSomething">

• v-model 只能綁定表單元素或組件
  v-model 會(huì)忽略任何表單元素上初始的 value、checked 或 selected attribute。它將始終將當(dāng)前綁定的 JavaScript 狀態(tài)視為數(shù)據(jù)的正確來源。你應(yīng)該在 JavaScript 中使用data 選項(xiàng)來聲明該初始值。

• v-on 綁定方法時(shí)，如果既想要event事件參數(shù)，還想手動(dòng)傳一些參數(shù)，可以使用如下寫法

<!-- 使用特殊的 $event 變量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用內(nèi)聯(lián)箭頭函數(shù) -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

2. 雙向綁定修飾符

可以再v-model后加修飾符，簡(jiǎn)化開發(fā)

2.1. 修飾符 .lazy

在輸入框上綁定v-model時(shí)，默認(rèn)是在每次input事件后更新數(shù)據(jù)，加.lazy后會(huì)變成每次change事件后更新數(shù)據(jù)

<input v-model.lazy="msg" />

2.2. 修飾符 .number

如果你想讓用戶輸入自動(dòng)轉(zhuǎn)換為數(shù)字，你可以在 v-model 后添加 .number 修飾符來管理輸入

<input v-model.number="age" />

2.3. 修飾符 .trim

如果你想要默認(rèn)自動(dòng)去除用戶輸入內(nèi)容中兩端的空格，你可以在 v-model 后添加 .trim 修飾符

<input v-model.trim="msg" />

3. 監(jiān)聽事件修飾符

可以再v-on后加修飾符，簡(jiǎn)化開發(fā)

3.1. 修飾符 .stop

阻止事件冒泡

<!-- 單擊事件將停止傳遞 -->
<a @click.stop="doThis"></a>

3.2. 修飾符 .prevent

阻止瀏覽器的默認(rèn)事件

<!-- 提交事件將不再重新加載頁面 -->
<form @submit.prevent="onSubmit"></form>

3.3. 修飾符 .self

只有觸發(fā)事件元素為綁定事件元素本身時(shí)才有效，不處理冒泡的事件

<!-- 僅當(dāng) event.target 是元素本身時(shí)才會(huì)觸發(fā)事件處理器 -->
<!-- 例如：事件處理器不來自子元素 -->
<div @click.self="doThat">...</div>

3.4. 修飾符 .native

.native事件修飾符是用來在父組件中給子組件[自定義組件]綁定一個(gè)原生的事件，就將子組件變成了普通的HTML標(biāo)簽看待。

<!-- 給Demo組件的根節(jié)點(diǎn)綁定click事件 -->
<Demo @click.native="doThat">...</Demo>

3.5. 修飾符 .capture

事件的階段順序是：外層捕獲、內(nèi)層捕獲、內(nèi)層冒泡、外層冒泡
v-on默認(rèn)是冒泡階段處理事件，加 .capture 后改為捕獲階段處理事件

<!-- 添加事件監(jiān)聽器時(shí)，使用 `capture` 捕獲模式 -->
<!-- 例如：指向內(nèi)部元素的事件，在被內(nèi)部元素處理前，先被外部處理 -->
<div @click.capture="doThis">...</div>

3.6. 修飾符 .once

只能觸發(fā)一次事件

<!-- 點(diǎn)擊事件最多被觸發(fā)一次 -->
<a @click.once="doThis"></a>

3.7. 修飾符 .passive

【瀏覽器只有等內(nèi)核線程執(zhí)行到事件監(jiān)聽器對(duì)應(yīng)的JavaScript代碼時(shí)，才能知道內(nèi)部是否會(huì)調(diào)用preventDefault函數(shù)來阻止事件的默認(rèn)行為，所以瀏覽器本身是沒有辦法對(duì)這種場(chǎng)景進(jìn)行優(yōu)化的。這種場(chǎng)景下，用戶的手勢(shì)事件無法快速產(chǎn)生，會(huì)導(dǎo)致頁面無法快速執(zhí)行滑動(dòng)邏輯，從而讓用戶感覺到頁面卡頓?！?/p>

通俗點(diǎn)說就是每次事件產(chǎn)生，瀏覽器都會(huì)去查詢一下是否有preventDefault阻止該次事件的默認(rèn)動(dòng)作。我們加上passive就是為了告訴瀏覽器，不用查詢了，我們沒用preventDefault阻止默認(rèn)動(dòng)作。

這里一般用在滾動(dòng)監(jiān)聽，@scoll，@touchmove 。因?yàn)闈L動(dòng)監(jiān)聽過程中，移動(dòng)每個(gè)像素都會(huì)產(chǎn)生一次事件，每次都使用內(nèi)核線程查詢prevent會(huì)使滑動(dòng)卡頓。我們通過passive將內(nèi)核線程查詢跳過，可以大大提升滑動(dòng)的流暢度。

<!-- 滾動(dòng)事件的默認(rèn)行為 (scrolling) 將立即發(fā)生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

注意事項(xiàng)：

• 修飾語可以使用鏈?zhǔn)綍鴮懀部梢灾挥行揎椃?/li>

<!-- 修飾語可以使用鏈?zhǔn)綍鴮?-->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修飾符 -->
<form @submit.prevent></form>

• 使用修飾符時(shí)需要注意調(diào)用順序，因?yàn)橄嚓P(guān)代碼是以相同的順序生成的。
  因此使用 @click.prevent.self 會(huì)阻止元素及其子元素的所有點(diǎn)擊事件的默認(rèn)行為。
  而 @click.self.prevent 則只會(huì)阻止對(duì)元素本身的點(diǎn)擊事件的默認(rèn)行為。

• 請(qǐng)勿同時(shí)使用 .passive 和 .prevent，因?yàn)?.passive 已經(jīng)向?yàn)g覽器表明了你不想阻止事件的默認(rèn)行為。
  如果你這么做了，則 .prevent 會(huì)被忽略，并且瀏覽器會(huì)拋出警告。

4. 綁定class和style

4.1. 對(duì)象方式綁定class

<!-- 對(duì)象的key為class名，value為布爾值，為true時(shí)綁定class，為false時(shí)不綁定class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>

4.2. 數(shù)組方式綁定class

<!-- 固定的class -->
<div :class="['abc-class', 'def-class']"></div>
<!-- 動(dòng)態(tài)的class -->
<div :class="[activeClass, errorClass]"></div>
<!-- 數(shù)組中有條件地渲染某個(gè) class，你可以使用三元表達(dá)式 -->
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<!-- 也可以在數(shù)組中嵌套對(duì)象 -->
<div :class="[{ active: isActive }, errorClass]"></div>
<!-- 自定義組件上也可以綁定class，class會(huì)綁定到該組件的根元素上，與該元素上已有的class合并 -->
<MyComponent :class="{ active: isActive }" />

4.3. 對(duì)象方式綁定style

<!-- 按照json格式寫樣式，例如font-size這種樣式則屬性名寫為fontSize -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 樣式多值時(shí)寫法 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

4.4. 數(shù)組方式綁定style

<!-- 數(shù)組內(nèi)是對(duì)象，對(duì)象寫法見對(duì)象方式綁定style -->
<div :style="[baseStyles, overridingStyles]"></div>

注意事項(xiàng)：

• vue會(huì)合并我們寫的class和style，所以可以同時(shí)寫普通標(biāo)簽和單向綁定

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

• 組件內(nèi)可以通過 $attrs.class 獲取當(dāng)前組件所綁定的class，例：

<!-- Test組件模板內(nèi)容 -->
<template>
    <Hello class="hello-class"></Hello>
</template>

<!-- Hello組件模板內(nèi)容 -->
<template>
    <div>
        <div :class="$attrs.class">測(cè)試</div>
    </div>
</template>

5. 過濾器

5.1. 在組件的選項(xiàng)中定義本地的過濾器

export default {
    name: 'Test',
    data: {
      return {
        mesg: '你好'
      }
    },
    filters: {
      // 把首字母轉(zhuǎn)為大寫的過濾器
      capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1)
      }
    }
}

5.2. 定義全局過濾器

// 全局過濾器 - 獨(dú)立于每個(gè)vm實(shí)例之外，用Vue.filter()方法定義
// Vue.filter()有兩個(gè)參數(shù)，第一個(gè)參數(shù)是過濾器的名字，第二個(gè)參數(shù)是過濾器的處理函數(shù)
Vue.filter('capitalize', (str) => {
  return str.chatAt(0).toUpperCase() + str.slice(1)
})

5.3. 使用過濾器

<!-- 在{{}}中通過“管道符”調(diào)用 capitalize 過濾器，對(duì) message 的值進(jìn)行格式化-->
<p>{{message | capitalize}}</p>

<!-- 在v-bind中通過管道符 調(diào)用 formatId 過濾器，對(duì) rawId 的值進(jìn)行格式化-->
<div v-bind:id="rawId | farmatId"></div>

注意事項(xiàng)：

• 過濾器傳參

<!-- arg1 和 arg2 是傳遞給 filterA 的參數(shù)-->
<p>{{ message | filterA(arg1,arg2) }}</p>

// 過濾器處理函數(shù)中的形參列表中：
// 第一個(gè)參數(shù)：永遠(yuǎn)都是“管道符”前面待處理的值
// 第二個(gè)參數(shù)開始： 才是調(diào)用過濾器時(shí)傳遞過來的 arg1 和 arg2 參數(shù)
Vue.filter('filterA', (meg, arg1, arg2) => {
  // 過濾器的處理邏輯
})

• 過濾器可鏈?zhǔn)秸{(diào)用，執(zhí)行順序?yàn)閺淖蟮接?/li>

<div v-bind:id="rawId | farmatId | capitalize"></div>

6. 自定義指令

6.1. 注冊(cè)一個(gè)全局自定義指令

// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

6.2 指令鉤子

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應(yīng)用前調(diào)用
  created(el, binding, vnode, prevVnode) {},
  // 在元素被插入到 DOM 前調(diào)用
  beforeMount(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用
  mounted(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件更新前調(diào)用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用
  updated(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載前調(diào)用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載后調(diào)用
  unmounted(el, binding, vnode, prevVnode) {}
}

Vue.directive('directive', myDirective)

image.png

7. ref獲取組件對(duì)象（VueComponent）或DOM節(jié)點(diǎn)

一般我們用ref是獲取組件對(duì)象，但ref還可以獲取DOM節(jié)點(diǎn)，這樣就不需要使用“document.getElementById(id)”獲取DOM節(jié)點(diǎn)了

<!-- ref 用于給節(jié)點(diǎn)打標(biāo)識(shí) -->
<a ref="testA" />

// 獲取組件對(duì)象（VueComponent）或DOM節(jié)點(diǎn)
this.$refs.testA
this.$refs.['testA']

8. Mixin混入

混入 (mixins)定義了一部分可復(fù)用的方法或者計(jì)算屬性。混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
例：創(chuàng)建一個(gè)MyMixin.js

export const myMixin = {
  data(){
    return {
      mesg: '我的混入',
    }
  },
  created() {
    console.log('mixin 對(duì)象的鉤子被調(diào)用')
  }
}

使用MyMixin.js

import { MyMixin } from '@/mixins/MyMixin'
export default {
  name: 'Hello',
  mixins: [MyMixin],
  data () {
    return {
    }
  },
  created() {
    console.log('組件鉤子被調(diào)用')
  }
}

注意事項(xiàng)：

• vue會(huì)將混入的js和vue組件的配置項(xiàng)做合并，當(dāng)屬性名或方法名(不包含生命周期鉤子函數(shù))沖突時(shí)，以vue組件定義的為準(zhǔn)。
  生命周期鉤子函數(shù)是全都生效的，例如混入的js和vue組件都寫了created方法，會(huì)先執(zhí)行混入js的created方法，再執(zhí)行vue組件的created方法。

9. 插件

插件 (Plugins) 是一種能為 Vue 添加全局功能的工具代碼。
插件一般是封裝了很多對(duì)Vue的配置，例如全局過濾器、全局自定義指令、通用變量和方法等...


例：創(chuàng)建一個(gè)Plugins.js

export default {
        // 使用插件后，Vue會(huì)調(diào)用此方法
    install(Vue, x, y, z) {
        console.log(x, y, z)
        // 全局過濾器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        // 定義全局指令
        Vue.directive('fbind', {
            // 指令與元素成功綁定時(shí)（一上來）
            bind(element, binding) {
                element.value = binding.value
            },
            // 指令所在元素被插入頁面時(shí)
            inserted(element, binding) {
                element.focus()
            },
            // 指令所在的模板被重新解析時(shí)
            update(element, binding) {
                element.value = binding.value
            }
        })
        // 定義混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })
        // 給Vue原型上添加一個(gè)方法（vm和vc就都能用了）
        Vue.prototype.hello = () => { alert('你好啊') }
    }
}

使用Plugins.js

// 引入Vue
import Vue from 'vue'
// 引入插件
import Plugins from './Plugins'
// 應(yīng)用（使用）插件
Vue.use(Plugins, 1, 2, 3)

10. 全局事件總線

全局事件總線就是將VM或VueComponent綁定到所有組件都能看見的位置，組件根據(jù)需要去綁定監(jiān)聽事件或觸發(fā)監(jiān)聽事件。


準(zhǔn)備工作：在main.js中綁定全局變量$bus

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false

// 創(chuàng)建vm
new Vue({
  el: '#app',
  render: h => h(App),
  beforeCreate() {
    // 安裝全局事件總線，$bus就是當(dāng)前應(yīng)用的vm
    Vue.prototype.$bus = this
  },
})

使用$bus

mounted() {
  // 綁定監(jiān)聽事件（hello）
  this.$bus.$on('hello', (data) => {
    console.log('收到了數(shù)據(jù)', data)
  })
},
beforeDestroy() {
  // 組件銷毀前要解綁監(jiān)聽事件
  this.$bus.$off('hello')
},
methods: {
  test() {
    // 觸發(fā)監(jiān)聽事件（hello）
    this.$bus.$emit('hello', 123)
  }
},

11. 過度與動(dòng)畫

Vue提供了兩個(gè)標(biāo)簽</transition>和</transition-group>來輔助實(shí)現(xiàn)過度與動(dòng)畫效果，
標(biāo)簽只是實(shí)現(xiàn)了進(jìn)場(chǎng)和離場(chǎng)動(dòng)畫時(shí)樣式class的動(dòng)態(tài)綁定，具體動(dòng)畫效果是需要我們自己實(shí)現(xiàn)的。
transition的屬性：

• name：默認(rèn)進(jìn)場(chǎng)動(dòng)畫class為“v-enter-active”，離場(chǎng)動(dòng)畫class為“v-leave-active”。
  綁定name后會(huì)根據(jù)name決定class名稱，例name="hello"，
  則進(jìn)場(chǎng)動(dòng)畫class為“hello-enter-active”，離場(chǎng)動(dòng)畫class為“hello-leave-active”。
• appear：初始時(shí)，是否播放進(jìn)場(chǎng)動(dòng)畫
• enter-active-class：指定進(jìn)場(chǎng)動(dòng)畫的class，可以配合第三方樣式庫(kù)使用
• leave-active-class：指定離場(chǎng)動(dòng)畫的class，可以配合第三方樣式庫(kù)使用

11.1 動(dòng)畫效果

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <!-- transition 標(biāo)簽內(nèi)只能有一個(gè)根元素，在顯示/隱藏時(shí)會(huì)給這個(gè)根元素綁定對(duì)應(yīng)的class -->
    <transition name="hello" appear>
      <h1 v-show="isShow">你好??！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      isShow: true
    }
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}
/* 進(jìn)場(chǎng)動(dòng)畫class樣式，指定播放哪個(gè)動(dòng)畫、播放幾秒、是否勻速播放 */
.hello-enter-active {
  animation: atguigu 0.5s linear;
}
/* 退場(chǎng)動(dòng)畫class樣式，指定播放哪個(gè)動(dòng)畫、播放幾秒、是否勻速播放、設(shè)置倒放 */
.hello-leave-active {
  animation: atguigu 0.5s linear reverse;
}
@keyframes atguigu {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

11.2 過度效果

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">拜拜咯！</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name:'Test',
  data() {
    return {
      isShow:true
    }
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}
/* 指定播放動(dòng)畫的時(shí)間和勻速播放 */
.hello-enter-active, .hello-leave-active{
  transition: 0.5s linear;
}
/* 進(jìn)入的起點(diǎn)、離開的終點(diǎn) */
.hello-enter, .hello-leave-to{
  transform: translateX(-100%);
}
/* 進(jìn)入的終點(diǎn)、離開的起點(diǎn) */
.hello-enter-to, .hello-leave{
  transform: translateX(0);
}
</style>

11.3 使用 animate.css 第三方動(dòng)畫庫(kù)實(shí)現(xiàn)

animate.css官網(wǎng)：https://animate.style/
需要先安裝動(dòng)畫庫(kù)，命令：npm install animate.css
然后在組件中引入css就可以使用class了，命令：import 'animate.css'

image.png

例：

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition-group 
      appear
      name="animate__animated animate__bounce" 
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp"
    >
      <h1 v-show="!isShow" key="1">你好?。?lt;/h1>
      <h1 v-show="isShow" key="2">拜拜咯！</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css'
export default {
  name:'Test',
  data() {
    return {
      isShow:true
    }
  },
}
</script>

<style scoped>
h1 {
  background-color: orange;
}
</style>

12. proxy代理

• proxy代理是解決開發(fā)環(huán)境中的跨域問題，正式環(huán)境的跨域需要使用nginx反向代理或者是后端解決。

• 在vue中使用proxy進(jìn)行跨域的原理是：將域名發(fā)送給本地的服務(wù)器（啟動(dòng)vue項(xiàng)目的服務(wù),比如loclahost:8080），再由本地的服務(wù)器去請(qǐng)求真正的服務(wù)器。

• 跨域是指請(qǐng)求的協(xié)議、IP、端口與瀏覽器當(dāng)前地址欄的協(xié)議、IP、端口不一致，
  正常情況下瀏覽器會(huì)將此請(qǐng)求的返回?cái)r截，并在控制臺(tái)報(bào)出跨域的錯(cuò)誤。
  如果請(qǐng)求返回中加了一些允許跨域的請(qǐng)求頭，瀏覽器就不會(huì)攔截。

• 前臺(tái)在報(bào)跨域錯(cuò)誤的時(shí)候，實(shí)際上請(qǐng)求已經(jīng)成功訪問到后臺(tái)，只是瀏覽器將請(qǐng)求的返回?cái)r截了。

12.1 vue.config.js配置proxy代理

module.exports = {
  pages: {
    index: {
      // 入口
      entry: 'src/main.js',
    },
  },
  lintOnSave:false, //關(guān)閉語法檢查
  // 開啟代理服務(wù)器（方式一）
  /* devServer: {
    proxy: 'http://localhost:5000'
  }, */
  // 開啟代理服務(wù)器（方式二）
  devServer: {
    proxy: {
      // '/demo1' 為請(qǐng)求路徑前綴，可自定義，比如 '/api'、'/test'
      // 例：http://localhost:8080/demo1/test，請(qǐng)求路徑前綴匹配成功則走此代理配置
      '/demo1': {
        // target 為實(shí)際接收請(qǐng)求的服務(wù)器地址，請(qǐng)求路徑會(huì)動(dòng)態(tài)從請(qǐng)求中截取
        // 例：http://localhost:8080/demo1/test，實(shí)際訪問地址為：http://localhost:5000/demo1/test
        target: 'http://localhost:5000',
        // pathRewrite 為路徑重寫，將路徑中匹配正則表達(dá)式的字符串替換，json中的key為正則表達(dá)式，value為替換的字符串
        // 例：http://localhost:5000/demo1/test，替換為：http://localhost:5000/test
        pathRewrite: { '^/demo1': '' },
        // ws 用于支持websocket，默認(rèn)true
        ws: true,
        // 用于控制請(qǐng)求頭中的host值，默認(rèn)true（通常都配置true）
        // true：請(qǐng)求頭中的host為接收請(qǐng)求服務(wù)器的地址，false：請(qǐng)求頭中的host為代理服務(wù)器的地址
        changeOrigin: true
      },
      '/demo2': {
        target: 'http://localhost:5001',
        pathRewrite: { '^/demo2': '' },
      }
    }
  }
}

13. 插槽

13.1 默認(rèn)插槽

<!-- Category組件內(nèi)容 -->
<template>
  <div>
    <h3>分類</h3>
    <!-- 定義一個(gè)插槽（挖個(gè)坑，等著組件的使用者進(jìn)行填充） -->
    <slot>我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)</slot>
  </div>
</template>

<!-- 使用Category組件，在組件內(nèi)寫插槽內(nèi)容（Category組件開始和結(jié)束標(biāo)簽之間的所有內(nèi)容都是插槽內(nèi)容） -->
<Category>
  <ul>
    <li v-for="index in 10" :key="index">{{index}}</li>
  </ul>
</Category>

13.2 具名插槽

<!-- Category組件內(nèi)容 -->
<template>
  <div>
    <h3>分類</h3>
    <!-- 定義一個(gè)插槽（給slot標(biāo)簽加name屬性，name就是插槽名字） -->
    <slot name="center">我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)1</slot>
    <slot name="footer">我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)，我會(huì)出現(xiàn)2</slot>
  </div>
</template>

<!-- 使用Category組件，在組件內(nèi)寫插槽內(nèi)容（slot屬性的值對(duì)應(yīng)插槽名字，可以將多個(gè)元素定義同一個(gè)插槽名字） -->
<Category>
  <ul slot="center">
    <li v-for="index in 10" :key="index">{{index}}</li>
  </ul>
  <a slot="footer" >單機(jī)游戲</a>
  <a slot="footer" >網(wǎng)絡(luò)游戲</a>
  <!--
    設(shè)置插槽名字方法
    1.在標(biāo)簽上加slot屬性，例：<a slot="footer"></a>
    2.在 template 標(biāo)簽上加 v-slot:，例：<template v-slot:footer></template>
  -->
  <template v-slot:footer>
    <h4>歡迎體驗(yàn)</h4>
  </template>
</Category>

13.3 插槽傳數(shù)據(jù)

<!-- Category組件內(nèi)容 -->
<template>
  <div>
    <h3>分類</h3>
    <!-- slot標(biāo)簽上的屬性就是給插槽使用者傳的數(shù)據(jù)，games是Category組件上data中的變量 -->
    <slot name="center" :games="games" msg="hello">我是默認(rèn)的一些內(nèi)容</slot>
  </div>
</template>

<!-- 使用Category組件，要接收數(shù)據(jù)插槽必須定義為templete組件，使用scope屬性接收（此處接收參數(shù)時(shí)使用了ES6的解構(gòu)賦值） -->
<Category>
  <template slot="center" scope="{games, msg}">
    <ol>
      <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
    </ol>
    <h3>{{msg}}</h3>
  </template>
</Category>
<!-- 也可使用slot-scope屬性接收數(shù)據(jù)，效果一樣（此處接收參數(shù)時(shí)使用了ES6的解構(gòu)賦值） -->
<Category>
  <template slot="center" slot-scope="{games, msg}">
    <ol>
      <li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
    </ol>
    <h3>{{msg}}</h3>
  </template>
</Category>