文章目錄

• • 1、vue-cli
  • • 1.1、什么是vue-cli
    • 1.2、vue-cli 安裝
  • 2.、vue 項(xiàng)目結(jié)構(gòu)和運(yùn)行
  • • 2.1、vue 項(xiàng)目目錄結(jié)構(gòu)
    • 2.2、vue 項(xiàng)目的運(yùn)行流程
    • 2.3、運(yùn)行命令
  • 3、Vue組件（components）
  • • 3.1、私有子組件
    • 3.2、全局組件
    • 3.3、單行（一行）方法的簡(jiǎn)寫(xiě)
    • • 3.3.1、共用組件，在引用時(shí)，初始化不同的值
    • 3.4、組件的 props（自定義屬性）
    • • 3.4.1、`:propName="9"` 與 `propName="9"` 數(shù)字與字符串的傳遞
      • 3.4.2、props 的默認(rèn)值
    • 3.5、樣式（CSS）沖突
    • 3.6、Vue的生命周期
    • 3.7、組件之間的數(shù)據(jù)共享
    • • 1）父向子傳數(shù)據(jù)
      • 2）子向父?jìng)鲾?shù)據(jù)
      • 3）兄弟組件之間的數(shù)據(jù)共享
    • 3.8、ref 引用
    • • 使用 `ref` 引用 DOM 元素
      • 使用 `ref` 引用組件
      • `this.$nextTick(cb)` 方法
    • 3.9、動(dòng)態(tài)組件
    • • 什么是動(dòng)態(tài)組件
      • 動(dòng)態(tài)組件渲染
      • keep-alive 保持組件的狀態(tài)
      • keep-alive 對(duì)應(yīng)的生命周期函數(shù)
      • keep-alive 的 include 、exclude 屬性
  • 4、插槽
  • • 4.1、什么是插槽
    • 4.2、默認(rèn)插槽
    • • 4.2.1、默認(rèn)插槽的格式
      • 4.2.2、**示例：**
    • 4.3、具名插槽
    • • 4.3.1、具名插槽的使用
      • 4.3.2、為具名插槽提供數(shù)據(jù)內(nèi)容（具名插槽的數(shù)據(jù)模板）
      • 4.3.3、具名插槽的數(shù)據(jù)模板的簡(jiǎn)寫(xiě)
    • 4.4、作用域`插槽`
    • • 4.4.1、 `作用域插槽 `的定義格式
      • 4.4.2、使用 `作用域插槽`
      • 4.4.3、解構(gòu)作用域插槽的數(shù)據(jù)對(duì)象
  • 5、自定義指令（directive）
  • • 5.1、私有指令
    • • 5.1.1、私有指令的語(yǔ)法
      • 5.1.2、入門使用1：最簡(jiǎn)單的使用
      • 5.1.3、入門使用2： `動(dòng)態(tài)綁定參數(shù)`
      • 5.1.4、update 函數(shù)
      • 5.1.5、指令函數(shù)的簡(jiǎn)寫(xiě)
    • 5.2、全局指令

1、vue-cli

1.1、什么是vue-cli

vue-cli 是 Vue.js 開(kāi)發(fā)的標(biāo)準(zhǔn)工具。它簡(jiǎn)化了程序員基于 webpack 創(chuàng)建工程化的 Vue 項(xiàng)目的過(guò)程。

1.2、vue-cli 安裝

vue-cli 是 npm 上的一個(gè)全局包。

使用 npm install 命令，即可方便的把它安裝到自己的電腦上：

npm install -g @vue/cli 

基于 vue-cli 快速生成工程化的 Vue 項(xiàng)目：

vue create 項(xiàng)目的名稱 

示例：

vue create demo-first

2.、vue 項(xiàng)目結(jié)構(gòu)和運(yùn)行

2.1、vue 項(xiàng)目目錄結(jié)構(gòu)

assets 目錄：存放項(xiàng)目的靜態(tài)資源文件，例如：css 、圖片資源
components 目錄： 程序員封裝的、可復(fù)用的組件，都要放到components目錄下
main.js ： 是項(xiàng)目的入口文件，整個(gè)項(xiàng)目的運(yùn)行，要先執(zhí)行 main.js
App.vue ：是項(xiàng)目的根組件

2.2、vue 項(xiàng)目的運(yùn)行流程

在工程化的項(xiàng)目中，vue 要做的事情很單純： 通過(guò) main.js 把 App.vue 渲染（內(nèi)容替換）到 index.html 的 指定區(qū)域（id=“app”） 。

其中：

• App.vue 用來(lái)編寫(xiě)待渲染的 模板結(jié)構(gòu) 。
• index.html 中需要預(yù)留一個(gè) el區(qū)域 。
• main.js 把 App.vue 渲染到 index.html 所指定區(qū)域（id=“app”）。

new Vue({//el: "#app",render: h => h(App),
}).$mount('#app') // 把 render 函數(shù)的內(nèi)容渲染到 index.html的 id="app" 的區(qū)域中

.$mount('#app') 等價(jià)于 el: "#app"

vue 組件由三部分組成

每個(gè).vue組件都由他其個(gè)部分構(gòu)成，分別是

• template ： 組件的模板結(jié)構(gòu)
• script ：組件的Javascript
• style ：組件的樣式

一般來(lái)部，最上面是 template、中間是script、最下面是style。

.vue 注意事項(xiàng)

• template 下只允許有一個(gè)根節(jié)點(diǎn)。
• script 中，export default()， data 必須是函數(shù)。
• style 默認(rèn)只支持css ，若要寫(xiě) less ，則增加 lang="less" 屬性。

<template><div><div class="test-box"><h3>hello vue組件 --- {{ username }}</h3><button @click="changeName">修改用戶名</button></div><div>XXX</div></div></template><script>
export default {data() {return {username: '張三',}},methods: {changeName() {// 在組件中，this表示當(dāng)前組件的實(shí)例對(duì)象console.log(this)this.username = 'haha'}}}</script>
<style lang="less" >.test-box{background-color: pink;h3 {color: red;}}
</style>

2.3、運(yùn)行命令

打開(kāi) package.json，內(nèi)容如下

查看 scripts ，

運(yùn)行命令 即是 npm run serve ，

打包命令 是 npm run build 。

3、Vue組件（components）

3.1、私有子組件

步驟1： 在 scripts 標(biāo)簽內(nèi)，通過(guò) 導(dǎo)入需要的組件：

import Left from '@/components/Left.vue'

步驟2：在 script 的 components 節(jié)點(diǎn)注冊(cè)組件

<script>
// 步驟1
import Left from '@/components/Left.vue'// 步驟2
export default{components:{Left}}
</script>

步驟3：在 template 中，以標(biāo)簽的形式使用剛才注冊(cè)的組件。

<template><div><Left></Left></div>
</template>

Left.vue

<template><div class="left"><h3>Left vue</h3></div>
</template><style>.left{background-color: rgba(20, 20, 241, 0.5);height: 200px;}</style><script>export default{components:{}}</script>

App.vue

<template><div class="app-container"><h1>App根組件</h1><hr/><div class="box"><!-- 步驟3： 以標(biāo)簽形式，使用注冊(cè)好的組件  --><Left></Left></div><div class="bottom"><h2>bottom </h2></div></div> </template><script>
// 步驟1：導(dǎo)入.vue組件
import Left from '@/components/Left.vue'// 在 components 節(jié)點(diǎn)注冊(cè)組件
export default {components:{Left,
} }
</script><style lang="less" >.app-container{background-color: red;}.bottom{background-color: aqua;height: 150px;}</style>

3.2、全局組件

在vue項(xiàng)目的 main.js 入口文件中，通過(guò) Vue.component() 方法 ，可以注冊(cè)全局組件。

• 步驟1： 導(dǎo)入需要全局注冊(cè)的組件

  示例：import Count from '@/components/Count.vue'

• 使用 Vue.components('MyCount',Count) 注冊(cè)。

  • 參數(shù)1：字符串格式，表示組件的 注冊(cè)名稱

  • 參數(shù)2：需要被注冊(cè)的那個(gè)組件

3.3、單行（一行）方法的簡(jiǎn)寫(xiě)

<template><div>       <p>count 的值是：{{ count }}</p><button @click="add" > +1 </button></div>
</template><script>
export default {data() {return {          count: 0,}},methods: {add() {this.count+=1}}
}
</script>

add() 只有一行代碼，所以 add() 可以省略，將這一行代碼寫(xiě)到 @click 中，即 @click="count += 1" 。完整代碼如下：

<template><div>       <p>count 的值是：{{ count }}</p><button @click="count += 1" > +1 </button></div>
</template>

3.3.1、共用組件，在引用時(shí)，初始化不同的值

問(wèn)題描述：Count.vue 是共用組件。其它組件（ Left.vue、Right.vue）在引用 Count.vue 組件時(shí)，希望 Count.vue 中的 count 變量在初始化為不同的值。

Count.vue 的代碼：

<template><div><h5>Count 組件</h5><p>count 的值是：{{ count }}</p><button @click="count += 1">+1</button><button @click="show">打印 this</button></div>
</template><script>
export default {  data() {return {// 把 props 中的 init 值，轉(zhuǎn)存到 count 上count: 0,}},methods: {show() {console.log(this)}}
}
</script>

3.4、組件的 props（自定義屬性）

props 是組件的自定義屬性，通過(guò) this.屬性名 進(jìn)行屬性值的運(yùn)算處理。

vue規(guī)定：組件中封裝的自定義屬性是只讀的，不允許直接修改。

要修改 props 中屬性的值，可以把 props 的值轉(zhuǎn)到 data中，因?yàn)閐ata中的數(shù)據(jù)是可讀可寫(xiě)的。

<script>
export default {   props: ['init'],data() {return {            count: this.init,}},methods: {show() {console.log(this)}}
}
</script>

在 Left.vue 中，:init="9" ，每個(gè)組件在引用時(shí)，通過(guò)這樣的方式進(jìn)行初始化 。

<template><div class="left-container"><h3>Left 組件</h3><hr><MyCount init="9"></MyCount></div>
</template>

3.4.1、:propName="9" 與 propName="9" 數(shù)字與字符串的傳遞

上一步，通過(guò)下面的代碼對(duì) count 初始化。

<MyCount init="9"></MyCount>

點(diǎn)擊 +1 按鈕后，發(fā)現(xiàn)是不是加1，而是往后面拼接1，如 91、911、9111 … 。

主要原因是 通過(guò) init="9 傳值，被默認(rèn)是字符串，字符串無(wú)法直接相加，只是拼接。

如果要將init 的值變?yōu)閿?shù)，則如下：

<MyCount :init="9"></MyCount>

:propName="9" 與 propName="9" 的區(qū)別如下：

• :propName="9" ，相當(dāng)于 v-bind:propName="9" ，這個(gè)9是數(shù)字。
• propName="9" ，這個(gè)9是字符串。

總結(jié)：

如果props的屬值，初始化傳遞時(shí)是字符串，則使用 propName="value" 方式。

如果props的屬值，初始化傳遞時(shí)是數(shù)字，則 :propName="number" 方式。

3.4.2、props 的默認(rèn)值

數(shù)組格式：

props:['init1' , 'init2']

對(duì)象格式：

props:{init1:{default: 0,required: true,type: Number,},
}

如果 不通過(guò) :init=“9” 傳值時(shí)，有一個(gè)默認(rèn)值。配置如下：

<script>
export default {   props: {init:{default:0,}},    data() {return {            count: this.init,}},methods: {show() {console.log(this)}}
}
</script>

3.5、樣式（CSS）沖突

在一個(gè)vue 定義的樣式 會(huì)影響到 其它vue中。

3.6、Vue的生命周期

生命周期（Life Cycle）是指一個(gè)組件從 創(chuàng)建 -> 運(yùn)行 -> 銷毀 的整個(gè)階段，強(qiáng)調(diào)的是一個(gè)時(shí)間段。

生命周期函數(shù)：是由 vue 框架提供的內(nèi)置函數(shù)，會(huì)伴隨著組件的生命周期，自動(dòng)按次序執(zhí)行。

注意：生命周期強(qiáng)調(diào)的是時(shí)間段， 生命周期 函數(shù) 強(qiáng)調(diào)的是時(shí)間點(diǎn)。

3.7、組件之間的數(shù)據(jù)共享

1）父向子傳數(shù)據(jù)

<template><div><Son :msg="message" :info="info" ></Son></div>	</template><script>
import Left Son "@/components/Son.vue";export default {data() {return {message: "hello parent",info: { name: "zhangsan", age: 25 },            };},   components: {Son,       },    
};
</script>

<template><div>       msg:{{ msg }} ,info:{{ msg }} ,</div>
</template><script>
export default {props: ["msg", "info"],    
};
</script>

2）子向父?jìng)鲾?shù)據(jù)

3）兄弟組件之間的數(shù)據(jù)共享

在 vue2.x 中，兄弟組件之間數(shù)據(jù)共享的方案是 EventBus 。

EventBus 的使用步驟 ：

① 創(chuàng)建 eventBus.js 模塊，并向外共享一個(gè) Vue 的實(shí)例對(duì)象 。

② 在數(shù)據(jù) 發(fā)送方，調(diào)用 bus.$emit('事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件 。

③ 在數(shù)據(jù) 接收方，調(diào)用 bus.$on('事件名稱', 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件。

3.8、ref 引用

ref 用來(lái)輔助開(kāi)發(fā)者在不依賴于 jQuery 的情況下，獲取 DOM 元素或組件的引用。

每個(gè) vue 的組件實(shí)例上，都包含一個(gè) $refs 對(duì)象，里面存儲(chǔ)著對(duì)應(yīng)的 DOM 元素或組件的引用。

默認(rèn)情況下， 組件的 $refs 指向一個(gè)空對(duì)象。

使用 ref 引用 DOM 元素

<template><div class="app-container">       <h3 ref="myh13"> ref 學(xué)習(xí)</h3>       <button @click="showThis">showThis</button>        </div>
</template><script>
export default {    methods: {showThis() {console.log(this)this.$refs.myh13.style.color = 'red'}      }
};
</script>

說(shuō)明： 點(diǎn)擊showThis 按鈕， 通過(guò) this.$refs.myh13 定位到 h3 dom 對(duì)象，然后通過(guò) style.color = 'red' 對(duì)其內(nèi)容進(jìn)行修改。

效果圖如下：

使用 ref 引用組件

App 是父組件，Left 是子組件， Left中有 count 數(shù)據(jù)，點(diǎn)擊 addCount 按鈕可以自增。父組件中有 Count重置為0 的按鈕，點(diǎn)擊后，可以將 Left中有 count 設(shè)置為0。

App.vue 組件：

<template><div class="app-container"><h1>App 根組件</h1><button @click="ReCount">Count 重置為0</button><Left ref="comLeft"></Left></div>
</template>
<script>
import Left from '@/components/Left.vue';export default {    components: {Left,       },methods: {        ReCount() {console.log(this)//方法1，定位到Left組件中 count 元素，重置為0this.$refs.comLeft.count = 0// 方法2，定位到Left組件中resetCount()方法，將count重置為0//this.$refs.comLeft.resetCount()},},
};
</script>

Left.vue 組件：

<template><div class="left-container"><h3>Left 組件</h3><button @click="addCount"> addCount </button> {{ count }}</div>
</template><script>
export default {props: ["msg", "info"],data() {return {count: 0,};},methods: {addCount() {this.count = this.count + 1},resetCount() {this.count = 0;},},
};
</script>

說(shuō)明：

方法1：

主要是通過(guò) 父組件中的 this.$refs.comLeft.count = 0 ，將Left組件中的count 重置為 0 。

方法2：

主要是通過(guò) 父組件中的 this.$refs.comLeft.resetCount() ，調(diào)用Left組件中resetCount() 方法，將count 重置為 0 。

this.$nextTick(cb) 方法

3.9、動(dòng)態(tài)組件

什么是動(dòng)態(tài)組件

動(dòng)態(tài)組件指的是 動(dòng)態(tài)地切換組件 的顯示與隱藏。

動(dòng)態(tài)組件渲染

如何實(shí)現(xiàn)動(dòng)態(tài)組件渲染 vue 提供了一個(gè)內(nèi)置的<component :is="XX"></component> 組件，專門用來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件的渲染。

<template><div class="app-container"><div class="box"><!-- 這就是動(dòng)態(tài)組件，根據(jù)conName 值的變化，動(dòng)態(tài)切換組件 --> <component :is="comName"></component></div></div>
</template><script>
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';
export default {data() {return {comName: 'Right',}},components: {Left,Right,}
}
</script>
</script>

注意：

有一個(gè)的前提條件：

所有要切換的組件，要先 import 導(dǎo)入和 components 注冊(cè)，之后才能進(jìn)行組件的各種切換。

沒(méi)有提現(xiàn)提前 import 導(dǎo)入和 components 注冊(cè)的，無(wú)法切換。

keep-alive 保持組件的狀態(tài)

默認(rèn)情況下，組件切換時(shí)，隱藏的組件會(huì)被銷毀，再次切換顯示時(shí)，所有的數(shù)據(jù)會(huì)變成默認(rèn)的初始值。

vue 內(nèi)置了 <keep-alive> 組件，保持動(dòng)態(tài)組件的狀態(tài)。

示例：

App 組件中增加 <keep-alive>

 <keep-alive><component :is="comName"></component></keep-alive>

keep-alive 對(duì)應(yīng)的生命周期函數(shù)

當(dāng)組件被 緩存 時(shí)，會(huì)自動(dòng)觸發(fā)組件的 deactivated 生命周期函數(shù)。

當(dāng)組件被 激活 時(shí)，會(huì)自動(dòng)觸發(fā)組件的 activated 生命周期函數(shù)。

Left 組件中，

<template><div class="left-container"><h3>Left 組件</h3>{{ count }}<br></br><button @click="count += 1"> +1</button></div>
</template><script>
export default {data() {return {count: 0}},created() {console.log("組件被創(chuàng)建 created ")},destroyed() {console.log("組件被 銷毀 destroyed")},activated() {console.log("Left 組件被 激活 activated")},deactivated() {console.log("Left 組件被 緩存 cache")},
}
</script>

效果圖：

keep-alive 的 include 、exclude 屬性

• include ：只有 組件名稱 匹配的組件會(huì)被緩存。多個(gè)組件名之間使用英文的逗號(hào)分隔
• exclude ：除了指定的組件名稱 的組件不會(huì)被緩存外，其它組件都會(huì)被緩存。多個(gè)組件用逗號(hào)分隔。

include 和 exclude 只能二者一，不能同時(shí)使用。

注意：

• include 和 exclude 的值是組件的名稱，組件名稱可以通過(guò)name進(jìn)行修改的。如 name:'MyLeft' 。

• <component :is="XXX"> 的 is 的值是 import 指定的名稱。

  如：import Left from '...' 。Left 和 MyLeft 都是同一件組件，但是在不同的地方，值是不同。

示例：

<template><div class="app-container"> <keep-alive include="MyLeft"><component :is="comName"></component></keep-alive></div>
</template>
<script>
import Left from '@/components/Left.vue';
import Right from '@/components/Right.vue';
export default {data() {return {comName: 'Left',}},components: {Left,Right,},
}
</script>

關(guān)于 組件名稱的自定義

<template><div class="left-container"><h3>Left 組件</h3>       </div>
</template><script>
export default {name: 'MyLeft', // 指定組件的名稱data() {return {//....}},
}
</script>

4、插槽

4.1、什么是插槽

插槽（Slot）是 vue 為 組件的封裝者 提供的能力。允許開(kāi)發(fā)者在封裝組件時(shí)，把 不確定的、希望由用戶指定的部分 定義為插槽。

插槽認(rèn)為是組件封裝期間，為用戶預(yù)留的內(nèi)容的 占位符 。

4.2、默認(rèn)插槽

4.2.1、默認(rèn)插槽的格式

自定義數(shù)據(jù)的格式

<組件名稱>自定義數(shù)據(jù)
</組件名稱>

定義插槽：

<slot></slot>

4.2.2、示例：

示例說(shuō)明：

Left.vue 組件中定義了插槽， 將App.vue 中 自定義的數(shù)據(jù)傳入 Left.vue 的插槽中。

Aue.vue 自定義數(shù)據(jù)

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left><p>體驗(yàn)插件的基本使用</p></Left></div></div>
</template><script>
import Left from '@/components/Left.vue';
export default {components: {Left,},
}
</script>

Left.vue 插槽：

<template><div class="left-container"><h3>Left 組件</h3><hr /><slot></slot></div>
</template>

效果圖如下：

說(shuō)明：

如果 Left.vue 中沒(méi)有 <slot> ，那么 App.vue 中的 <Left> 內(nèi)容 </Left> 標(biāo)簽中自定義內(nèi)容 將會(huì) 被丟棄。

上面是沒(méi)有指定 name 名稱的插槽（ 其實(shí)也有默認(rèn)名稱叫做 default ）， 這種插槽叫做 默認(rèn)插槽 。

<slot></slot> 與 <slot name="default"></slot> 是完全是一樣的。

4.3、具名插槽

上面的例子中，只有一個(gè)插槽，無(wú)須指定插槽，就能使用。這是插槽的最簡(jiǎn)單的使用。

實(shí)際業(yè)務(wù)要復(fù)雜得多，有多個(gè)插槽 ，每個(gè)插槽有名字，在定義數(shù)據(jù)時(shí)，要指指定渲染到哪個(gè)插槽中。

如果在封裝組件時(shí)需要預(yù)留多個(gè)插槽節(jié)點(diǎn)，則需要為每個(gè) 插槽指定具體的 name 名稱。這種帶有具體名稱的插槽叫做 具名插槽。

格式：

<slot name="插槽名稱"></slot>

成熟組件中的插件案件：

網(wǎng)址: NavBar 導(dǎo)航欄

4.3.1、具名插槽的使用

Left.vue 組件中，定義3個(gè)插槽，代碼如下：

<template><div class="left-container"><h3>Left 組件</h3><header><!-- 第1個(gè)插槽 --><slot name="header"></slot></header><main><!-- 第2個(gè)插槽 --><slot></slot></main><footer><!-- 第3個(gè)插槽 --><slot name="footer"></slot></footer></div>
</template>

4.3.2、為具名插槽提供數(shù)據(jù)內(nèi)容（具名插槽的數(shù)據(jù)模板）

具名插槽的數(shù)據(jù)模板的格式：

<template v-slot:插槽名稱r>
數(shù)據(jù)內(nèi)容
</template>

說(shuō)明：

• 數(shù)據(jù)內(nèi)容必須要 組件的內(nèi)部定義。比如 <Left> 數(shù)據(jù)模板</<Left> 標(biāo)簽里面定義。

• 數(shù)據(jù)模板指定插槽名稱時(shí)，用v-slot:插槽名稱 。

• 每個(gè)名插槽的數(shù)據(jù)模板必須使用<template> 。

  • <template>是一個(gè)虛擬的標(biāo)簽，只起到包裹的作用，不會(huì)在渲染的頁(yè)面中出現(xiàn)。
  • 不使用 <template> 包裹數(shù)據(jù)時(shí)，會(huì)拋出以下錯(cuò)誤。

App.vue 中自定義數(shù)據(jù)，代碼如下。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><!--  在Left 組件里面，定義為插槽填充的數(shù)據(jù)內(nèi)容  --><Left><template v-slot:header><p>體驗(yàn)插件 -- header </p></template><template><p>體驗(yàn)插件的基本使用</p></template><template v-slot:footer><p>體驗(yàn)插件-- footer </p></template></Left></div></div>
</template>

運(yùn)行效果如下：

4.3.3、具名插槽的數(shù)據(jù)模板的簡(jiǎn)寫(xiě)

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫(xiě)，把 v-slot: 替換為字符 #。

例如 ，v-slot:header 可以被重寫(xiě)為 #header。

上一步，App.vue 的代碼重寫(xiě)如下。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><!--  在Left 組件里面，定義為插槽填充的數(shù)據(jù)內(nèi)容  --><Left><template #header><p>體驗(yàn)插件 -- header </p></template><!-- 使用默認(rèn)名稱時(shí)，可直接使用 <template>   --><template #default><p>體驗(yàn)插件的基本使用</p></template><template #footer><p>體驗(yàn)插件-- footer </p></template></Left></div></div>
</template>

4.4、作用域插槽

在封裝組件時(shí)，可以為 <slot> 插槽 綁定數(shù)據(jù)， 就叫做 作用域插槽 。

• 作用域插槽 對(duì)外提供數(shù)據(jù)。
• 可綁定 props 和 data 中的所有類型的數(shù)據(jù)。

4.4.1、 作用域插槽 的定義格式

如下：

 <slot name="footer" key1="value1"  key2="value2"   ></slot>

在 Left.vue 中定義的 作用域插槽 的 示例：

<template><div class="left-container"><h3>Left 組件</h3><footer><!-- 綁定3組數(shù)據(jù)，msg、hello、user, msg 是直接定義數(shù)據(jù)hello、user 是 引用 data中定義的數(shù)據(jù)--><slot name="footer" msg="Hello msg" :hello="hello" :user="user"></slot></footer></div>
</template><script>
export default {data() {return {hello: "hello world",user: {name: "zhangsan",age: 25}}}
}
</script>

說(shuō)明：

• msg 是直接定義數(shù)據(jù)。
• hello、user 是 引用 data中定義的數(shù)據(jù)。

4.4.2、使用 作用域插槽

作用域插槽 的數(shù)據(jù) 會(huì)傳到 插槽的數(shù)據(jù)模板 的組件中， 相當(dāng)于 數(shù)據(jù)的子傳父。

接收作用域插槽 數(shù)據(jù)的格式：

<template v-slot:插槽名稱="自定義變量" >
或者簡(jiǎn)寫(xiě)為:
<template #插槽名稱="自定義變量" >

自定義變量 是一個(gè)對(duì)象，默認(rèn)是{} ， 所有傳過(guò)來(lái)的數(shù)據(jù)都封裝成對(duì)象。

App.vue 組件示例：

App.vue 組件 接收 Left.vue 作用域插件傳來(lái)的數(shù)據(jù)。

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left><!--  無(wú)關(guān)的內(nèi)容省略... -->         	 	<!-- data 就是接收作用域插槽的數(shù)據(jù)的變量名稱， 變量名稱是自定義，符合命名規(guī)則就行。但是，因?yàn)楣俜椒Q之為 作用域插槽，很多人把此變量名稱 起名為 scope。所有，我們要知道 scope 不是固定的，可以變化的。 --><template #footer="data"><p>體驗(yàn)插件-- footer </p>{{ data }}<br><br>{{ data.msg }}<br>{{ data.hello }}<br>{{ data.user }}<br></template></Left></div></div>
</template>

4.4.3、解構(gòu)作用域插槽的數(shù)據(jù)對(duì)象

作用域插槽對(duì)外提供的數(shù)據(jù)對(duì)象，可以使用{ } 進(jìn)行 解構(gòu)賦值 ，簡(jiǎn)化數(shù)據(jù)的接收過(guò)程。

App.vue 組件的代碼優(yōu)化：

<template><div class="app-container"><h1>App 根組件</h1><hr /><div class="box"><Left>    	 		<!-- 解構(gòu)作用域插槽的數(shù)據(jù)對(duì)象--><template #footer="{msg,hello,user }"><p>體驗(yàn)插件-- footer </p>                   {{ msg }}<br>{{ hello }}<br>{{ user }}<br></template></Left></div></div>
</template>

運(yùn)行效果圖：

5、自定義指令（directive）

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 還允許開(kāi)發(fā)者 自定義指令。

vue 中的自定義指令分為兩類，分別是：

• 私有（自定義）指令
• 全局（自定義）指令

5.1、私有指令

5.1.1、私有指令的語(yǔ)法

私有指令的語(yǔ)法，分為兩步：

• 定義指令
• 使用指令

1）定義指令：

在 directives 節(jié)點(diǎn)下，聲明 定義指令。

<script>
export default {directives: {color: {bind(el) {el.style.color = 'blue';}}}
}
</script>

2）使用指令：

在<template> 中 使用指令。

<template><div v-color> 頁(yè)面內(nèi)容</div>
</template>

5.1.2、入門使用1：最簡(jiǎn)單的使用

<template><div class="app-container"><!--  2、使用名稱 color 的指令 --><h1 v-color>App 根組件</h1><hr />       </div>
</template><script>
export default {// 1、定義指令，名稱為color的指令directives: {color: {bind(el) {el.style.color = 'blue';}}}
}
</script>

5.1.3、入門使用2： 動(dòng)態(tài)綁定參數(shù)

• 動(dòng)態(tài)參數(shù)可以在 data 中指定，或者 使用指令時(shí)指定（v-clor="'red'"）。

• 在指令中，可以通過(guò)形參中的第二個(gè)參數(shù) binding，來(lái)取動(dòng)態(tài)變化的參數(shù)值。

1）data中定義變量值

• directives 中，定義指令；
• data 中，定義動(dòng)態(tài)參數(shù)；
• <template> 中，使用指令；

<template><div class="app-container"><!--  3、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr />       </div>
</template><script>
export default {data() {return {//2、顏色參數(shù)colorData: 'blue'}},// 1、定義指令directives: {color: {bind(el, binding) {               el.style.color = binding.value}}}
}
</script>

2）使用v-color 時(shí)指定參數(shù)值

顏色的參數(shù)全部定義在 data，基實(shí)并不是太好。可以在使用v-color 時(shí)指定值。

• directives 中，定義指令；
• <template> 中，使用指令，并指定參數(shù)值。

注意：v-color="'red'" ，red 外層是雙引號(hào)，里面是 單引號(hào)，表示字符串，而不是 data 中的變量。

<template><div class="app-container"><!--  1、使用指令，并指定參數(shù)值（不同的顏色） -->        <h1 v-color="'red'"> 1111 </h1><h2 v-color="'green'"> 2222</h2><hr />       </div>
</template><script>
export default {// 1、定義指令directives: {color: {bind(el, binding) {               el.style.color = binding.value}}}
}
</script>

5.1.4、update 函數(shù)

bind 函數(shù)，只調(diào)用 1 次，當(dāng)指令第一次綁定到元素時(shí)調(diào)用，當(dāng) DOM 更新時(shí) bind 函數(shù)不會(huì)被觸發(fā)。

update 函數(shù)會(huì)在每次 DOM 更新時(shí)被調(diào)用。

示例1：

通過(guò)頁(yè)面按鈕，更改動(dòng)態(tài)參數(shù)，不會(huì)被調(diào)用，顏色不會(huì)發(fā)生變化。

在日志中看出，在頁(yè)面渲染時(shí)，bind 函數(shù)，只調(diào)用 1 次。再點(diǎn)擊，沒(méi)有反應(yīng)。

<template><div class="app-container"><!--  1、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button>        </div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color: {bind(el, binding) {console.log(binding)el.style.color = binding.value}}}
}
</script>

示例2：

增加 update 函數(shù)后，點(diǎn)擊按鈕，顏色發(fā)生變化。

看日志，bind 函數(shù)沒(méi)有日志，update 函數(shù)被調(diào)用，使顏色發(fā)生變化。

<template><div class="app-container"><!--  1、使用指令 --><h1 v-color="colorData"> 1111 </h1><h2 v-color="colorData"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button>       </div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color: {bind(el, binding) {console.log('bind')el.style.color = binding.value},update(el, binding) {console.log('update')el.style.color = binding.value}}}
}
</script>

5.1.5、指令函數(shù)的簡(jiǎn)寫(xiě)

由于，bing 和 update 函數(shù)中的邏輯完全相同，則簡(jiǎn)寫(xiě)成函數(shù)格式。

 // 1、定義指令directives: {color(el, binding) {el.style.color = binding.value}}

完整示例代碼：

<template><div class="app-container"><!--  1、使用指令,在data中定義變量值 --><h1 v-color="colorData"> 1111 </h1><!--  2、使用指令，直接指定變量值 --><h2 v-color="'blue'"> 2222</h2><hr /><button @click="colorData = 'yellow'">改成 yellow </button></div>
</template><script>
export default {data() {return {colorData: 'pink'}},// 1、定義指令directives: {color(el, binding) {el.style.color = binding.value}}
}
</script>

5.2、全局指令

全局指令必須定義在 main.js 中，使手Vue.directive 進(jìn)行定義 。

方式1：

Vue.directive('color', {bind(el, binding) {       el.style.color = binding.value},update(el, binding) {        el.style.color = binding.value}
});

方式2（簡(jiǎn)寫(xiě)版，推薦使用）：

Vue.directive('color', function (el, binding) {el.style.color = binding.value
});

總結(jié)

以上是生活随笔為你收集整理的vue基础 —— 单网页版的Vue学习 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。