代碼倉(cāng)庫(kù)：跳轉(zhuǎn)
當(dāng)前分支：05

一、自定義指令

自定義指令是Vue.js框架提供的一個(gè)非常強(qiáng)大的特性，它允許開(kāi)發(fā)者直接操作DOM，擴(kuò)展Vue.js的能力。自定義指令的主要作用包括：

1. 封裝常用操作：當(dāng)你發(fā)現(xiàn)在多個(gè)組件中需要重復(fù)執(zhí)行相同的DOM操作時(shí)，可以將這些操作封裝成一個(gè)自定義指令，以提高代碼的復(fù)用性和可維護(hù)性。

2. 與第三方庫(kù)集成：有時(shí)候你可能需要與第三方庫(kù)（如圖表庫(kù)、地圖庫(kù)等）進(jìn)行集成，自定義指令可以幫助你在Vue組件中使用這些庫(kù)，并提供統(tǒng)一的接口。

3. 訪(fǎng)問(wèn)底層DOM：有些特定的DOM操作可能需要直接訪(fǎng)問(wèn)底層的DOM元素，而不適合放在組件的模板中，自定義指令可以提供一個(gè)更靈活的方式來(lái)處理這些操作。

4. 解耦視圖層和業(yè)務(wù)邏輯：有些操作可能更適合放在指令中而不是組件中，這樣可以更好地將視圖層和業(yè)務(wù)邏輯解耦，使代碼更清晰易懂。

總的來(lái)說(shuō)，自定義指令為開(kāi)發(fā)者提供了一種擴(kuò)展Vue.js功能的方式，使得在處理DOM操作和與第三方庫(kù)集成時(shí)更加靈活和便捷。

1.創(chuàng)建和使用自定義指令

我們可以在任何Vue文件中創(chuàng)建自定義指令。在這個(gè)例子中，我們將創(chuàng)建一個(gè)簡(jiǎn)單的自定義指令，用于將元素的背景顏色設(shè)置為紅色。

main.js：

// main.js
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);app.directive('red-color', {mounted(el) {el.style.backgroundColor = 'red';}
});app.mount('#app');

2. 在組件中使用自定義指令：

App.vue：

<template><div v-red-color>這個(gè)div的背景顏色會(huì)變成紅色</div>
</template><script>
export default {name: 'App'
}
</script>

• 效果：

2.鉤子函數(shù)

• 指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)：

  created : 在綁定元素的屬性或事件監(jiān)聽(tīng)器被應(yīng)用之前調(diào)用。
  beforeMount：在被綁定元素掛載之前調(diào)用。
  mounted：在被綁定元素掛載后調(diào)用。
  beforeUpdate：在包含組件的 VNode 更新之前調(diào)用，但可能在其子 VNode 更新之前調(diào)用。
  updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
  beforeUnmount：在卸載綁定元素之前調(diào)用。
  unmounted：在卸載綁定元素后調(diào)用。

這些鉤子函數(shù)允許在自定義指令的生命周期中執(zhí)行相應(yīng)的操作，例如在元素掛載前后進(jìn)行初始化和清理、在元素更新前后執(zhí)行特定邏輯、在解綁時(shí)進(jìn)行清理等。通過(guò)合理使用這些鉤子函數(shù)，可以更好地控制自定義指令的行為，并與Vue 3的生命周期進(jìn)行交互。

• 參數(shù)： 在Vue 3中，自定義指令的鉤子函數(shù)可以接收以下參數(shù)：
  el：指令所綁定的元素，可以用來(lái)直接操作DOM。
  binding：一個(gè)對(duì)象，包含指令的信息。包括name、value、oldValue、arg、modifiers等屬性。
  vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。
  prevVNode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 beforeUpdate 和 updated 鉤子中可用。

3.使用參數(shù)

假設(shè)我們要?jiǎng)?chuàng)建一個(gè)自定義指令，當(dāng)鼠標(biāo)懸停在元素上時(shí)，元素的背景顏色會(huì)變成紅色，當(dāng)鼠標(biāo)移出時(shí)，背景顏色會(huì)恢復(fù)。我們將使用自定義指令的鉤子函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能。

• main.js

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.directive('hover-color', {beforeMount(el, binding) {el.style.transition = 'background-color 0.3s';el.style.backgroundColor = binding.value;},mounted(el, binding) {el.addEventListener('mouseenter', () => {el.style.backgroundColor = 'red';});el.addEventListener('mouseleave', () => {el.style.backgroundColor = binding.value;});}
});app.mount('#app')

• App.vue：

<template><div v-hover-color="'lightblue'" style="width: 200px; height: 200px;">鼠標(biāo)懸停我看看背景色會(huì)變成什么顏色</div>
</template><script>
export default {name: 'App'
}
</script>

• 效果：

鼠標(biāo)懸停：

二、路由

要想在vue中使用路由，第一步需要安裝react-router：

npm install vue-router

1.創(chuàng)建一個(gè)router實(shí)例

router.js

import { createRouter, createWebHistory } from 'vue-router';
import MyHome from './components/MyHome.vue';
import MyAbout from './components/MyAbout.vue';const routes = [{ path: '/', component: MyHome },{ path: '/about', component: MyAbout }
];const router = createRouter({history: createWebHistory(),routes
});export default router;

2.在components目錄中創(chuàng)建組件

MyHome.vue

<template><div class="home"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'MyHome',data() {return {msg: 'Home'};}
};
</script>

MyAbout.vue

<!-- components/HelloWorld.vue -->
<template><div class="about"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'MyAbout',data() {return {msg: 'About'};}
};
</script>

3.將路由實(shí)例掛載到應(yīng)用

main.js

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';const app = createApp(App);
app.use(router);
app.mount('#app');

4.使用路由

App.vue

<template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script>

• 效果：

三、Ajax

Ajax（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的技術(shù)。它通過(guò)在不重新加載整個(gè)頁(yè)面的情況下，利用 JavaScript 發(fā)起 HTTP 請(qǐng)求并接收服務(wù)器返回的數(shù)據(jù)，從而實(shí)現(xiàn)頁(yè)面的局部刷新和動(dòng)態(tài)更新。

Ajax 技術(shù)的核心是通過(guò) XMLHttpRequest 對(duì)象來(lái)實(shí)現(xiàn)異步通信。通過(guò)使用 Ajax，網(wǎng)頁(yè)可以在后臺(tái)與服務(wù)器進(jìn)行數(shù)據(jù)交換，從而實(shí)現(xiàn)動(dòng)態(tài)更新頁(yè)面內(nèi)容的功能。這種技術(shù)使得用戶(hù)能夠在不刷新整個(gè)頁(yè)面的情況下，獲取最新的數(shù)據(jù)并更新頁(yè)面的部分內(nèi)容，從而提升了用戶(hù)體驗(yàn)。

Ajax 技術(shù)通常用于實(shí)現(xiàn)以下功能：

1. 動(dòng)態(tài)加載數(shù)據(jù)：例如在網(wǎng)頁(yè)中實(shí)現(xiàn)無(wú)刷新加載新內(nèi)容。
2. 表單驗(yàn)證：通過(guò) Ajax 可以在用戶(hù)輸入數(shù)據(jù)后實(shí)時(shí)驗(yàn)證數(shù)據(jù)的有效性。
3. 實(shí)時(shí)搜索：在用戶(hù)輸入搜索關(guān)鍵詞時(shí)，實(shí)時(shí)向服務(wù)器請(qǐng)求數(shù)據(jù)并展示搜索結(jié)果。

總的來(lái)說(shuō)，Ajax 技術(shù)是一種利用 JavaScript 和 XMLHttpRequest 對(duì)象來(lái)實(shí)現(xiàn)異步通信的技術(shù)，它使得網(wǎng)頁(yè)能夠?qū)崿F(xiàn)動(dòng)態(tài)更新內(nèi)容的功能，提升了用戶(hù)體驗(yàn)。

• 首先，安裝依賴(lài)：

npm install axios

• 代碼示例：

// 發(fā)起GET請(qǐng)求
axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});// 發(fā)起POST請(qǐng)求
axios.post('https://api.example.com/postData', { data: 'example' }).then(response => {console.log(response.data);}).catch(error => {console.error(error);});