vue全家桶

一、vue是什么

Vue.js（通常簡稱為Vue）是一個(gè)流行的JavaScript前端框架，用于構(gòu)建用戶界面。它的主要目標(biāo)是使前端開發(fā)變得更加簡單和高效。以下是一些關(guān)鍵特點(diǎn)和概念：

1. 響應(yīng)式數(shù)據(jù)綁定： Vue允許你將數(shù)據(jù)與DOM元素進(jìn)行綁定，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，DOM會(huì)自動(dòng)更新以反映這些變化。這使得開發(fā)交互式的界面變得更加容易。

2. 組件化開發(fā)： Vue將應(yīng)用程序分解為可重用的組件，每個(gè)組件都有自己的模板、邏輯和樣式。這使得大型應(yīng)用程序的開發(fā)和維護(hù)更加簡單。

3. 指令： Vue提供了一系列指令，如v-if、v-for、v-bind等，用于處理DOM元素和數(shù)據(jù)之間的交互。這些指令使你可以在模板中輕松地執(zhí)行各種操作。

4. 路由管理： Vue有一個(gè)名為Vue Router的官方路由管理庫，用于處理單頁面應(yīng)用程序（SPA）的導(dǎo)航。它允許你創(chuàng)建多個(gè)頁面并在它們之間進(jìn)行導(dǎo)航，而無需刷新整個(gè)頁面。

5. 狀態(tài)管理： Vue也提供了一個(gè)名為Vuex的官方狀態(tài)管理庫，用于管理應(yīng)用程序的狀態(tài)（如用戶身份驗(yàn)證信息、購物車內(nèi)容等）。這對于大型應(yīng)用程序中的數(shù)據(jù)共享和管理非常有用。

6. 生態(tài)系統(tǒng)： Vue擁有龐大的生態(tài)系統(tǒng)，包括第三方庫和插件，可以幫助你處理諸如國際化、表單驗(yàn)證、動(dòng)畫等各種需求。

總之，Vue是一個(gè)靈活、易學(xué)且功能強(qiáng)大的前端框架，適用于各種規(guī)模的項(xiàng)目。它的文檔和社區(qū)支持也非常豐富，這使得學(xué)習(xí)和使用Vue變得更加愉快和高效。

二、vue的實(shí)例對象

在Vue中，你可以創(chuàng)建Vue實(shí)例對象，這是Vue應(yīng)用的核心。Vue實(shí)例對象可以控制一個(gè)特定的DOM元素，并與該元素關(guān)聯(lián)，以實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)綁定、事件處理和其他功能。下面是創(chuàng)建一個(gè)Vue實(shí)例對象的基本示例：

// 創(chuàng)建一個(gè)Vue實(shí)例對象
var app = new Vue({// 選項(xiàng)對象el: '#app', // 指定關(guān)聯(lián)的DOM元素，這里的'#app'是一個(gè)DOM選擇器data: {message: 'Hello, Vue!' // 數(shù)據(jù)屬性},methods: {// 定義方法changeMessage: function () {this.message = 'Vue is awesome!'; // 修改數(shù)據(jù)屬性}}
});

在上面的示例中，我們首先使用new Vue({ ... })創(chuàng)建了一個(gè)Vue實(shí)例對象，并傳遞了一個(gè)選項(xiàng)對象。這個(gè)選項(xiàng)對象包含了一些重要的屬性：

• el：這是一個(gè)DOM選擇器，它指定了Vue實(shí)例控制的DOM元素。在示例中，我們使用#app來選擇id為app的DOM元素。

• data：這是一個(gè)包含數(shù)據(jù)屬性的對象。在示例中，我們有一個(gè)名為message的數(shù)據(jù)屬性，其初始值為’Hello, Vue!'。

• methods：這是一個(gè)包含方法的對象。在示例中，我們定義了一個(gè)名為changeMessage的方法，用于修改message數(shù)據(jù)屬性的值。

一旦創(chuàng)建了Vue實(shí)例對象，它就會(huì)自動(dòng)將el元素的內(nèi)容與data中的數(shù)據(jù)屬性進(jìn)行關(guān)聯(lián)，這意味著在模板中使用{{ message }}會(huì)顯示數(shù)據(jù)屬性的值，并且通過v-on指令可以調(diào)用方法。

例如，在HTML中的模板中可以這樣使用：

<div id="app"><p>{{ message }}</p><button v-on:click="changeMessage">Change Message</button>
</div>

這樣，當(dāng)用戶點(diǎn)擊按鈕時(shí)，changeMessage方法會(huì)被調(diào)用，從而修改message的值，因?yàn)閿?shù)據(jù)屬性和DOM元素之間建立了響應(yīng)式綁定，所以頁面會(huì)自動(dòng)更新以反映這一變化。

這只是Vue實(shí)例對象的一個(gè)簡單示例，Vue還有許多其他選項(xiàng)和功能，可以根據(jù)你的項(xiàng)目需求進(jìn)行配置和擴(kuò)展。

el和data的其他寫法

在Vue實(shí)例對象中，el和data是兩個(gè)重要的屬性，它們用于定義Vue實(shí)例的掛載點(diǎn)和數(shù)據(jù)。以下是兩種常見的寫法：

方式一：使用對象字面量

var app = new Vue({el: '#app', // 掛載點(diǎn)，將Vue實(shí)例與具有id="app"的DOM元素關(guān)聯(lián)data: {message: 'Hello, Vue!' // 數(shù)據(jù)屬性}
});

• el：指定Vue實(shí)例要掛載的DOM元素，這里使用id選擇器#app來選擇要掛載的元素。
• data：定義Vue實(shí)例中的數(shù)據(jù)屬性，例如message。

方式二：使用函數(shù)返回對象

你還可以使用一個(gè)函數(shù)來返回Vue實(shí)例的選項(xiàng)對象，這種方式在需要復(fù)用Vue實(shí)例或有更復(fù)雜的邏輯時(shí)非常有用：

var app = new Vue({el: function () {return document.getElementById('app'); // 掛載點(diǎn)，將Vue實(shí)例與具有id="app"的DOM元素關(guān)聯(lián)},data: function () {return {message: 'Hello, Vue!' // 數(shù)據(jù)屬性};}
});

這兩種寫法都可以創(chuàng)建一個(gè)Vue實(shí)例對象，并將其掛載到指定的DOM元素上。你可以根據(jù)你的項(xiàng)目需求選擇其中的一種寫法。方式二的函數(shù)寫法在某些情況下更靈活，因?yàn)槟憧梢栽诤瘮?shù)中編寫更復(fù)雜的邏輯，而不僅僅是返回一個(gè)固定的選項(xiàng)對象。

在Vue 3 中，el屬性已經(jīng)不再使用，而是使用$mount方法來手動(dòng)掛載Vue實(shí)例到DOM元素上。這是因?yàn)閂ue 3 引入了 Composition API 和更加靈活的組合式編程方式，不再依賴傳統(tǒng)的el屬性。

以下是如何使用mount方法來掛載Vue實(shí)例到DOM元素上的示例：

import { createApp } from 'vue';const app = createApp({data() {return {message: 'Hello, Vue 3!'};}
});// 使用 mount 方法來掛載實(shí)例到 DOM 元素上
app.$mount('#app');

在這個(gè)示例中，我們首先通過createApp方法創(chuàng)建了一個(gè)Vue 3實(shí)例。然后，使用$mount方法將該實(shí)例掛載到具有id為app的DOM元素上。

這種方式與傳統(tǒng)的el屬性在功能上是相同的，但它更符合Vue 3 的新特性和 API 設(shè)計(jì)，同時(shí)也更加靈活，允許你在不同的生命周期階段進(jìn)行掛載和卸載操作。因此，如果你正在使用Vue 3，建議使用mount方法來掛載Vue實(shí)例。

三、vue的模板語法

Vue的模板語法是一種用于聲明視圖的簡單和表達(dá)力強(qiáng)的HTML模板語言。它允許你將Vue實(shí)例中的數(shù)據(jù)綁定到DOM元素上，并在模板中使用一些特殊的指令來實(shí)現(xiàn)數(shù)據(jù)的渲染和交互。以下是Vue模板語法的一些關(guān)鍵概念和示例：

1. 數(shù)據(jù)綁定： 你可以使用雙大括號{{ }}將Vue實(shí)例中的數(shù)據(jù)屬性綁定到DOM元素中，這樣數(shù)據(jù)的變化會(huì)自動(dòng)反映在DOM中。

<div id="app"><p>{{ message }}</p>
</div>

在上面的例子中，{{ message }}將顯示Vue實(shí)例中的message數(shù)據(jù)屬性的值。

2. 指令： Vue提供了一系列特殊的指令，以v-開頭，用于在模板中添加特定的行為或響應(yīng)。以下是一些常用指令的示例：

   • v-bind：將元素屬性與Vue實(shí)例中的數(shù)據(jù)屬性綁定在一起。

     <a v-bind:href="url">Link</a>
     

   • v-model：實(shí)現(xiàn)雙向數(shù)據(jù)綁定，將表單元素的值綁定到數(shù)據(jù)屬性，以便在用戶輸入時(shí)更新數(shù)據(jù)。

     <input v-model="message">
     

   • v-for：用于循環(huán)渲染列表。

     <ul><li v-for="item in items">{{ item }}</li>
     </ul>
     

   • v-on：用于綁定事件監(jiān)聽器。

     <button v-on:click="doSomething">Click me</button>
     

3. 條件渲染： 使用v-if和v-else指令可以根據(jù)條件來渲染不同的內(nèi)容。

<div v-if="loggedIn">Welcome, {{ username }}!
</div>
<div v-else>Please log in.
</div>

4. 模板語法中的表達(dá)式： 你可以在雙大括號或指令中使用JavaScript表達(dá)式。

<p>{{ message + ' world' }}</p>
<button v-on:click="counter++">Increment</button>

總之，Vue的模板語法使你能夠以聲明性的方式構(gòu)建用戶界面，同時(shí)利用Vue的響應(yīng)式系統(tǒng)來管理數(shù)據(jù)和界面之間的關(guān)系。這些只是Vue模板語法的基礎(chǔ)，Vue還有更多高級特性和指令，可根據(jù)項(xiàng)目的需求進(jìn)行使用。

四、Vue的單向數(shù)據(jù)綁定與雙向數(shù)據(jù)綁定

Vue提供了單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定兩種數(shù)據(jù)綁定方式，這些方式?jīng)Q定了數(shù)據(jù)在Vue實(shí)例和DOM元素之間的流動(dòng)。

1. 單向數(shù)據(jù)綁定（One-Way Data Binding）：

單向數(shù)據(jù)綁定是指數(shù)據(jù)只能從Vue實(shí)例流向DOM元素，但不能反向流動(dòng)。這意味著當(dāng)Vue實(shí)例中的數(shù)據(jù)屬性發(fā)生變化時(shí)，相關(guān)的DOM元素會(huì)自動(dòng)更新以反映這些變化，但如果用戶在DOM元素上進(jìn)行了交互操作（例如在表單輸入框中輸入文本），這些變化不會(huì)自動(dòng)反映到Vue實(shí)例中的數(shù)據(jù)屬性上。

單向數(shù)據(jù)綁定的主要特點(diǎn)包括：

• 數(shù)據(jù)從Vue實(shí)例流向DOM元素。
• 常見的單向數(shù)據(jù)綁定方式包括使用插值表達(dá)式（{{ }}）和v-bind指令（或其簡寫形式:）。

示例：

<div id="app"><p>{{ message }}</p><a :href="url">Link</a>
</div>

2. 雙向數(shù)據(jù)綁定（Two-Way Data Binding）：

雙向數(shù)據(jù)綁定允許數(shù)據(jù)在Vue實(shí)例和DOM元素之間雙向流動(dòng)。這意味著不僅可以將數(shù)據(jù)從Vue實(shí)例流向DOM元素，還可以將數(shù)據(jù)從DOM元素反向流回Vue實(shí)例。

雙向數(shù)據(jù)綁定的主要特點(diǎn)包括：

• 數(shù)據(jù)既能從Vue實(shí)例流向DOM元素，又能從DOM元素反向流回Vue實(shí)例。
• 雙向數(shù)據(jù)綁定通常使用v-model指令，主要用于表單元素，以實(shí)現(xiàn)用戶輸入的數(shù)據(jù)與Vue實(shí)例中的數(shù)據(jù)屬性之間的同步。

示例：

<div id="app"><input v-model="message">
</div>

需要注意的是，雖然Vue提供了雙向數(shù)據(jù)綁定的能力，但它通常用于處理用戶輸入的表單元素，而其他元素的數(shù)據(jù)綁定仍然是單向的。這有助于維護(hù)數(shù)據(jù)的一致性和可控性。

總結(jié)：

• 單向數(shù)據(jù)綁定是數(shù)據(jù)從Vue實(shí)例流向DOM元素，常見方式包括插值表達(dá)式和v-bind指令。
• 雙向數(shù)據(jù)綁定允許數(shù)據(jù)在Vue實(shí)例和DOM元素之間雙向流動(dòng)，通常使用v-model指令，主要用于處理表單輸入元素。

v-model在收集表單中的應(yīng)用

文本輸入框

<input type="text" v-model="message">

• v-model 用于雙向綁定輸入框的值和 Vue 實(shí)例中的數(shù)據(jù)。
• 用戶輸入的文本將自動(dòng)更新到 message 數(shù)據(jù)屬性中，并在頁面上顯示。

復(fù)選框

<input type="checkbox" v-model="checked">

• v-model 用于處理復(fù)選框的狀態(tài)。
• 若沒有配置 value 屬性，v-model 收集的是 checked，即勾選或未勾選狀態(tài)。

<input type="checkbox" :value="value" v-model="selectedValues">

• 若配置了 value 屬性，根據(jù) v-model 初始值的類型，收集的可能是 checked 或 value 組成的數(shù)組。
• 初始值非數(shù)組時(shí)，收集的是 checked 布爾值。
• 初始值為數(shù)組時(shí)，收集的是 value 組成的數(shù)組。

單選按鈕

<input type="radio" id="option1" value="option1" v-model="selectedOption">
<input type="radio" id="option2" value="option2" v-model="selectedOption">

• v-model 用于處理單選按鈕的選擇。
• 用戶選擇單選按鈕時(shí)，selectedOption 數(shù)據(jù)屬性會(huì)自動(dòng)更新為所選的選項(xiàng)。

修飾符

v-model 還提供了一些修飾符，以滿足不同的數(shù)據(jù)處理需求：

• lazy：在失去焦點(diǎn)時(shí)才收集數(shù)據(jù)，適用于需要延遲收集的情況。
• number：將輸入字符串轉(zhuǎn)換為有效的數(shù)字，有助于確保數(shù)據(jù)類型一致性。
• trim：自動(dòng)過濾輸入首尾的空格，提高數(shù)據(jù)的質(zhì)量和一致性。

五、vue中的MVVM模型

Vue是一個(gè)基于MVVM（Model-View-ViewModel）模型的JavaScript框架，它的設(shè)計(jì)靈感來自于MVVM模型。MVVM是一種用于構(gòu)建交互式的Web應(yīng)用程序的軟件架構(gòu)模式，它將應(yīng)用程序分為三個(gè)主要部分：

1. Model（模型）： Model代表應(yīng)用程序的數(shù)據(jù)和業(yè)務(wù)邏輯。它負(fù)責(zé)管理數(shù)據(jù)的獲取、存儲(chǔ)和處理。在Vue中，Model通常是Vue實(shí)例中的data屬性，包含了應(yīng)用程序的數(shù)據(jù)。

2. View（視圖）： View代表用戶界面，它負(fù)責(zé)將數(shù)據(jù)渲染到屏幕上，同時(shí)響應(yīng)用戶的交互。在Vue中，View通常是Vue模板，使用Vue的模板語法來聲明界面。

3. ViewModel（視圖模型）： ViewModel是連接Model和View的橋梁。它負(fù)責(zé)將Model中的數(shù)據(jù)映射到View上，并監(jiān)聽用戶的交互操作。ViewModel也負(fù)責(zé)處理用戶輸入并更新Model中的數(shù)據(jù)。在Vue中，ViewModel由Vue實(shí)例來扮演，Vue實(shí)例包含了data屬性（Model）、模板（View），以及一系列的指令和事件處理器來建立Model和View之間的關(guān)聯(lián)。

Vue的MVVM模型工作流程如下：

1. Vue實(shí)例的data屬性包含了應(yīng)用程序的數(shù)據(jù)。

2. Vue模板使用Vue的模板語法將這些數(shù)據(jù)渲染到頁面上，形成View。

3. Vue的指令（例如v-bind、v-model、v-on）和事件處理器建立了Model和View之間的數(shù)據(jù)綁定和交互。

4. 當(dāng)用戶與界面交互時(shí)，ViewModel負(fù)責(zé)監(jiān)聽用戶的操作并更新Model中的數(shù)據(jù)。

5. 當(dāng)Model中的數(shù)據(jù)發(fā)生變化時(shí)，ViewModel負(fù)責(zé)自動(dòng)更新View，使界面保持與數(shù)據(jù)同步。

這種雙向數(shù)據(jù)綁定和響應(yīng)式的機(jī)制使得開發(fā)者能夠以更直觀和聲明性的方式構(gòu)建交互式的Web應(yīng)用程序，而不必手動(dòng)處理DOM操作和數(shù)據(jù)同步的復(fù)雜性。Vue的MVVM模型是Vue框架的核心，為前端開發(fā)提供了一種高效、靈活且易于維護(hù)的開發(fā)方式。它使開發(fā)者能夠?qū)Ｗ⒂跇I(yè)務(wù)邏輯和用戶體驗(yàn)，而不必?fù)?dān)心底層細(xì)節(jié)。

六、數(shù)據(jù)代理

6.1回顧Object.defindProperty方法

Object.defineProperty 是 JavaScript 中的一個(gè)內(nèi)置方法，用于定義或修改對象的屬性。通過這個(gè)方法，你可以精確地控制一個(gè)對象的某個(gè)屬性的行為，包括屬性的值、可枚舉性、可配置性以及可寫性。

這是 Object.defineProperty 方法的語法：

Object.defineProperty(obj, prop, descriptor)

• obj：要定義屬性的對象。
• prop：要定義或修改的屬性的名稱。
• descriptor：屬性的描述符對象，包含屬性的各種特性。

descriptor 對象可以包含以下屬性：

• value：屬性的值，默認(rèn)為 undefined。
• writable：是否可寫，默認(rèn)為 false。
• enumerable：是否可枚舉，默認(rèn)為 false。
• configurable：是否可配置，默認(rèn)為 false。

以下是一些示例：

1. 定義一個(gè)只讀屬性：

var obj = {};
Object.defineProperty(obj, 'readOnly', {value: 'This is read-only',writable: false
});console.log(obj.readOnly); // 輸出：'This is read-only'
obj.readOnly = 'New value'; // 不會(huì)改變屬性值
console.log(obj.readOnly); // 輸出：'This is read-only'

2. 定義一個(gè)可配置但不可枚舉的屬性：

var obj = {};
Object.defineProperty(obj, 'configurableProp', {value: 'I can be configured, but not enumerated',writable: true,enumerable: false,configurable: true
});for (var key in obj) {console.log(key); // 不會(huì)輸出屬性名
}delete obj.configurableProp; // 可以刪除屬性
console.log(obj.configurableProp); // 輸出：undefined

Object.defineProperty 主要用于高級對象屬性的定義，例如在定義自定義對象的 getter 和 setter 方法時(shí)，或者在實(shí)現(xiàn)特定的屬性行為時(shí)。它是 JavaScript 中對象屬性管理的強(qiáng)大工具，但在一般情況下，你可以使用更簡單的方式來定義和修改對象的屬性，例如直接使用點(diǎn)操作符來設(shè)置屬性的值。

當(dāng)需要更復(fù)雜的屬性定義和控制時(shí)，Object.defineProperty 可以派上用場。以下是更多示例：

3. 定義一個(gè)具有 getter 和 setter 方法的屬性：

var person = {firstName: 'John',lastName: 'Doe'
};Object.defineProperty(person, 'fullName', {get: function () {return this.firstName + ' ' + this.lastName;},set: function (value) {var parts = value.split(' ');this.firstName = parts[0];this.lastName = parts[1];},enumerable: true,configurable: true
});console.log(person.fullName); // 輸出：'John Doe'
person.fullName = 'Jane Smith';
console.log(person.firstName); // 輸出：'Jane'
console.log(person.lastName); // 輸出：'Smith'

在這個(gè)示例中，我們定義了一個(gè) fullName 屬性，它具有 getter 和 setter 方法，允許我們以更高級的方式操作 firstName 和 lastName 屬性。

4. 使用 Object.defineProperty 在對象上定義新屬性：

var car = {};
Object.defineProperty(car, 'color', {value: 'red',writable: true,enumerable: true,configurable: true
});console.log(car.color); // 輸出：'red'
car.color = 'blue'; // 可以修改屬性值
console.log(car.color); // 輸出：'blue'

在這個(gè)示例中，我們在一個(gè)空對象上定義了一個(gè)新屬性 color，并設(shè)置了其默認(rèn)值以及可寫、可枚舉和可配置等屬性特性。

Object.defineProperty 是 JavaScript 中高級對象屬性定義和控制的有力工具，它使你可以更精確地管理對象的屬性行為。然而，在日常開發(fā)中，通常更常見的是使用對象字面量語法或點(diǎn)操作符來定義和修改屬性，因?yàn)樗鼈兏啙嵑椭庇^。但了解 Object.defineProperty 可以幫助你理解 JavaScript 對象屬性的內(nèi)部工作原理，并在需要時(shí)使用它來實(shí)現(xiàn)更高級的需求。

6.2 vue中的數(shù)據(jù)代理

數(shù)據(jù)代理是一種編程模式，通常用于對象或類中，其中一個(gè)對象（代理對象）充當(dāng)另一個(gè)對象（目標(biāo)對象）的代理，允許代理對象訪問和操作目標(biāo)對象的屬性和方法。這個(gè)模式常常用于簡化代碼、提高可維護(hù)性、增加安全性或?qū)崿F(xiàn)其他特定的行為。

在Vue中，數(shù)據(jù)代理是一種重要的機(jī)制，它允許你通過Vue實(shí)例來訪問和修改組件中的數(shù)據(jù)屬性，而這些數(shù)據(jù)屬性通常被定義在組件的data選項(xiàng)中。數(shù)據(jù)代理的目的是為了提供更方便的數(shù)據(jù)訪問方式，并且確保數(shù)據(jù)的響應(yīng)性（Reactivity）以便于視圖的更新。

以下是Vue中的數(shù)據(jù)代理示例：

new Vue({data: {message: 'Hello, Vue!'},methods: {showMessage: function () {alert(this.message); // 通過數(shù)據(jù)代理訪問message屬性}}
});

在上面的示例中，this.message 中的 this 實(shí)際上是Vue實(shí)例，通過數(shù)據(jù)代理，你可以直接訪問message屬性，而不必使用this.data.message。

Vue會(huì)自動(dòng)進(jìn)行數(shù)據(jù)代理，將data選項(xiàng)中的屬性代理到Vue實(shí)例上。這意味著你可以像訪問Vue實(shí)例自身屬性一樣訪問和修改data中的屬性。

數(shù)據(jù)代理的好處包括：

1. 方便的數(shù)據(jù)訪問和修改： 不需要額外的語法或方法，可以直接使用this來訪問數(shù)據(jù)屬性。

2. 數(shù)據(jù)響應(yīng)性： 當(dāng)數(shù)據(jù)屬性發(fā)生變化時(shí)，Vue會(huì)自動(dòng)觸發(fā)視圖的更新，確保視圖與數(shù)據(jù)保持同步。

3. 避免了深度嵌套： 在傳統(tǒng)JavaScript中，深度嵌套的對象訪問可能會(huì)變得復(fù)雜，而Vue的數(shù)據(jù)代理將屬性扁平化，使訪問更容易。

4. 更好的代碼結(jié)構(gòu)： 將數(shù)據(jù)屬性代理到Vue實(shí)例上可以更好地組織代碼，使代碼結(jié)構(gòu)更清晰和易于維護(hù)。

需要注意的是，在Vue組件中，數(shù)據(jù)代理只會(huì)代理data選項(xiàng)中的屬性。如果需要代理計(jì)算屬性（computed）或方法（methods）中的屬性，你仍然需要使用相應(yīng)的方法或語法來訪問它們。

總結(jié)而言，Vue中的數(shù)據(jù)代理是一種使數(shù)據(jù)訪問更方便、提高代碼可讀性的機(jī)制，同時(shí)也確保了數(shù)據(jù)的響應(yīng)性。這是Vue框架的核心之一，有助于構(gòu)建交互式的前端應(yīng)用程序。

七、vue事件處理

在Vue中，事件處理是一種用于監(jiān)聽和響應(yīng)DOM事件的重要機(jī)制，它允許你在Vue組件中定義和處理事件。Vue提供了一些指令和語法來實(shí)現(xiàn)事件處理，以下是一些常見的用法：

1. v-on 指令： v-on 是Vue中用于監(jiān)聽DOM事件的指令。你可以將它添加到任何支持事件的HTML元素上，然后指定要監(jiān)聽的事件名稱以及觸發(fā)事件時(shí)要執(zhí)行的方法。

   <button v-on:click="handleClick">點(diǎn)擊我</button>
   

   new Vue({methods: {handleClick: function() {alert('按鈕被點(diǎn)擊了！');}}
   });
   

   在上面的示例中，當(dāng)按鈕被點(diǎn)擊時(shí)，handleClick方法會(huì)被調(diào)用。

2. 事件修飾符： Vue允許你使用事件修飾符來修改事件監(jiān)聽的行為。例如，可以使用 .stop 修飾符來停止事件冒泡，或使用 .prevent 修飾符來阻止默認(rèn)事件行為。

   <a v-on:click.stop="doSomething">阻止冒泡</a>
   <form v-on:submit.prevent="onSubmit">阻止表單提交</form>
   

3. 內(nèi)聯(lián)事件處理程序： 你還可以在模板中直接使用內(nèi)聯(lián)事件處理程序，而不必在方法中定義事件處理函數(shù)。這通常用于簡單的事件處理。

   <button v-on:click="alert('按鈕被點(diǎn)擊了！')">點(diǎn)擊我</button>
   

   在上面的示例中，點(diǎn)擊按鈕時(shí)會(huì)直接觸發(fā)alert函數(shù)。

4. 傳遞參數(shù)： 有時(shí)你需要將參數(shù)傳遞給事件處理函數(shù)。你可以使用$event來訪問事件對象，或者使用 v-bind 來綁定事件參數(shù)。

   <button v-on:click="sayHello('Vue', $event)">點(diǎn)擊我</button>
   

   new Vue({methods: {sayHello: function(name, event) {alert('Hello, ' + name + '! Event type: ' + event.type);}}
   });
   

5. 自定義事件： Vue允許你在組件中自定義事件，并在需要時(shí)觸發(fā)這些事件。這在組件之間進(jìn)行通信時(shí)非常有用。

   <!-- 子組件 -->
   <button @click="notifyParent">通知父組件</button><script>
   export default {methods: {notifyParent() {this.$emit('custom-event', '自定義數(shù)據(jù)');}}
   };
   </script>
   

   <!-- 父組件 -->
   <child-component @custom-event="handleCustomEvent"></child-component><script>
   export default {methods: {handleCustomEvent(data) {console.log('父組件收到自定義事件，數(shù)據(jù)為：', data);}}
   };
   </script>
   

通過這些方式，Vue提供了豐富的事件處理功能，使你能夠輕松地管理和響應(yīng)DOM事件，實(shí)現(xiàn)互動(dòng)和通信。無論是簡單的點(diǎn)擊事件還是自定義事件，Vue都提供了相應(yīng)的工具來滿足不同的需求。

7.1 事件處理的簡寫

Vue中的事件處理有一種簡寫方式，通常使用@符號，用于監(jiān)聽DOM事件并觸發(fā)Vue實(shí)例中的方法。這個(gè)簡寫方式也稱為事件綁定的縮寫。

以下是一個(gè)示例，演示了如何使用@符號進(jìn)行事件處理的簡寫：

<template><button @click="handleClick">點(diǎn)擊我</button>
</template><script>
export default {methods: {handleClick() {alert('按鈕被點(diǎn)擊了！');}}
};
</script>

在上面的示例中，我們在<button>元素上使用了@click來監(jiān)聽點(diǎn)擊事件，當(dāng)按鈕被點(diǎn)擊時(shí)，handleClick方法會(huì)被觸發(fā)。

這個(gè)簡寫方式更加簡潔和直觀，使得事件處理代碼更容易理解和維護(hù)。當(dāng)你需要監(jiān)聽其他DOM事件時(shí)，只需使用相應(yīng)的事件名來替代click即可。例如，要監(jiān)聽鼠標(biāo)移入事件，可以使用@mouseenter。

這個(gè)事件處理的簡寫方式是Vue中常用的一種方式，特別適合在模板中處理用戶交互。它與傳統(tǒng)的JavaScript事件處理方式相比，更具Vue的聲明性和易用性。

7.2 監(jiān)聽的事件

在Vue中，你可以監(jiān)聽和處理各種不同類型的DOM事件以及Vue自定義事件。以下是一些常見的事件類型：

1. 鼠標(biāo)事件：

   • click：當(dāng)元素被點(diǎn)擊時(shí)觸發(fā)。
   • mousedown：鼠標(biāo)按鈕按下時(shí)觸發(fā)。
   • mouseup：鼠標(biāo)按鈕釋放時(shí)觸發(fā)。
   • mousemove：鼠標(biāo)在元素上移動(dòng)時(shí)觸發(fā)。
   • mouseenter 和 mouseleave：鼠標(biāo)進(jìn)入或離開元素時(shí)觸發(fā)（不冒泡）。
   • mouseover 和 mouseout：鼠標(biāo)進(jìn)入或離開元素時(shí)觸發(fā)（冒泡）。

2. 鍵盤事件：

   • keydown：按下鍵盤按鍵時(shí)觸發(fā)。
   • keyup：釋放鍵盤按鍵時(shí)觸發(fā)。
   • keypress：按下并釋放鍵盤按鍵時(shí)觸發(fā)。

3. 表單事件：

   • input：輸入框的值發(fā)生變化時(shí)觸發(fā)。
   • submit：表單提交時(shí)觸發(fā)。
   • focus 和 blur：元素獲得或失去焦點(diǎn)時(shí)觸發(fā)。
   • change：表單元素的值發(fā)生變化時(shí)觸發(fā)（適用于<input>、<select>、<textarea>等）。

4. 窗口事件：

   • resize：瀏覽器窗口大小變化時(shí)觸發(fā)。
   • scroll：窗口或元素滾動(dòng)時(shí)觸發(fā)。

5. 自定義事件： 你可以在Vue組件中自定義事件，并使用 $emit 來觸發(fā)這些事件，用于組件間通信。

   <!-- 子組件 -->
   <button @click="$emit('custom-event', '自定義數(shù)據(jù)')">通知父組件</button>
   

   <!-- 父組件 -->
   <child-component @custom-event="handleCustomEvent"></child-component>
   

6. 路由事件： 如果你在Vue項(xiàng)目中使用了Vue Router，你可以監(jiān)聽路由相關(guān)事件，例如 beforeRouteEnter、beforeRouteLeave 等。

這只是一些常見的事件類型，實(shí)際上，你可以監(jiān)聽和處理任何DOM事件，具體取決于你的應(yīng)用程序需求。使用Vue的v-on指令，你可以將事件處理程序綁定到任何支持事件的DOM元素上，以響應(yīng)用戶交互和應(yīng)用程序的需求。這些事件用于與用戶互動(dòng)、處理表單輸入、監(jiān)聽頁面大小變化等各種情況。

7.2.1 鼠標(biāo)事件修飾符

讓我們通過一些示例來說明Vue中的常見事件修飾符的用法：

1. .stop修飾符： 阻止事件冒泡。

   <div @click="outerDivClick"><button @click.stop="innerButtonClick">按鈕</button>
   </div>
   

   new Vue({methods: {outerDivClick() {console.log('外部div被點(diǎn)擊');},innerButtonClick() {console.log('按鈕被點(diǎn)擊，但不會(huì)觸發(fā)外部div的點(diǎn)擊事件');}}
   });
   

   當(dāng)點(diǎn)擊按鈕時(shí)，雖然按鈕的點(diǎn)擊事件會(huì)被觸發(fā)，但外部div的點(diǎn)擊事件不會(huì)被觸發(fā)，因?yàn)?code>.stop修飾符阻止了事件冒泡。

2. .prevent修飾符： 阻止事件的默認(rèn)行為。

   <a @click.prevent="doNothing" href="https://www.example.com">點(diǎn)擊鏈接</a>
   

   new Vue({methods: {doNothing() {console.log('鏈接被點(diǎn)擊，但不會(huì)跳轉(zhuǎn)到頁面 https://www.example.com');}}
   });
   

   當(dāng)點(diǎn)擊鏈接時(shí)，雖然點(diǎn)擊事件會(huì)觸發(fā)，但由于.prevent修飾符，不會(huì)跳轉(zhuǎn)到鏈接的目標(biāo)頁面。

3. .once修飾符： 事件只會(huì)觸發(fā)一次。

   <button @click.once="showMessage">點(diǎn)擊一次</button>
   

   new Vue({methods: {showMessage() {console.log('按鈕被點(diǎn)擊，但只會(huì)觸發(fā)一次');}}
   });
   

   當(dāng)點(diǎn)擊按鈕后，事件處理函數(shù)showMessage只會(huì)執(zhí)行一次。再次點(diǎn)擊按鈕不會(huì)再次觸發(fā)它。

4. .self修飾符： 只有事件是從元素本身觸發(fā)時(shí)才會(huì)執(zhí)行。

   <div @click.self="doThis">點(diǎn)擊我</div>
   

   new Vue({methods: {doThis() {console.log('點(diǎn)擊了div本身');}}
   });
   

   只有直接點(diǎn)擊<div>元素本身時(shí)，事件處理函數(shù)doThis才會(huì)執(zhí)行。如果點(diǎn)擊了<div>內(nèi)部的子元素，事件處理函數(shù)不會(huì)執(zhí)行。

繼續(xù)探討一些常見的Vue事件修飾符的用法：

5. .capture修飾符： 使用事件捕獲模式。

   <div @click.capture="doThis">點(diǎn)擊我</div>
   

   new Vue({methods: {doThis() {console.log('點(diǎn)擊事件在捕獲階段觸發(fā)');}}
   });
   

   當(dāng)設(shè)置了.capture修飾符時(shí)，事件將在捕獲階段（從最外層元素向目標(biāo)元素傳播）觸發(fā)，而不是在冒泡階段觸發(fā)。這可以用于處理某些特定需求，例如在外部容器中捕獲所有點(diǎn)擊事件。

6. .native修飾符： 監(jiān)聽組件根元素的原生事件。

   <my-component @click.native="doThis"></my-component>
   

   new Vue({methods: {doThis() {console.log('點(diǎn)擊了my-component組件的根元素的原生事件');}}
   });
   

   通常，Vue組件會(huì)封裝其內(nèi)部的DOM結(jié)構(gòu)，但如果你想監(jiān)聽組件根元素上的原生事件，可以使用.native修飾符。

7. .passive修飾符： 聲明事件的默認(rèn)行為不會(huì)被取消。

   <div @touchstart.passive="onTouchStart">滑動(dòng)我</div>
   

   new Vue({methods: {onTouchStart() {console.log('滑動(dòng)事件，但不會(huì)取消默認(rèn)行為');}}
   });
   

   當(dāng)使用.passive修飾符時(shí)，你告訴瀏覽器事件處理函數(shù)不會(huì)取消事件的默認(rèn)行為，這對于提高性能非常有用，尤其是在處理滾動(dòng)等性能敏感的事件時(shí)。

7.2.2 鍵盤事件修飾符

1. 常用的按鍵別名和修飾符：

• 回車鍵 (enter)：

  <input @keyup.enter="submitForm" />
  

  當(dāng)用戶按下回車鍵時(shí)，submitForm方法會(huì)被觸發(fā)。

• 刪除鍵 (delete)：

  <input @keydown.delete="deleteItem" />
  

  當(dāng)用戶按下刪除鍵或退格鍵時(shí)，deleteItem方法會(huì)被觸發(fā)。

• 退出鍵 (esc)：

  <button @keydown.esc="closeModal">關(guān)閉模態(tài)框</button>
  

  當(dāng)用戶按下Escape鍵時(shí)，closeModal方法會(huì)被觸發(fā)。

• 空格鍵 (space)：

  <button @keydown.space="startPlayback">開始播放</button>
  

  當(dāng)用戶按下空格鍵時(shí)，startPlayback方法會(huì)被觸發(fā)。

• 換行鍵 (tab)：

  <input @keydown.tab="focusNextField" />
  

  當(dāng)用戶按下Tab鍵時(shí)，focusNextField方法會(huì)被觸發(fā)。需要注意，.tab修飾符必須配合keydown事件使用。

• 上箭頭鍵 (up)：

  <input @keyup.up="increaseValue" />
  

  當(dāng)用戶按下上箭頭鍵時(shí)，increaseValue方法會(huì)被觸發(fā)。

• 下箭頭鍵 (down)：

  <input @keydown.down="decreaseValue" />
  

  當(dāng)用戶按下下箭頭鍵時(shí)，decreaseValue方法會(huì)被觸發(fā)。

• 左箭頭鍵 (left) 和右箭頭鍵 (right) 的用法與上面類似，可以通過相應(yīng)的修飾符監(jiān)聽這些鍵的事件。

2. 使用按鍵的原始 key 值：

如果Vue沒有提供別名的按鍵，你可以使用按鍵的原始 key 值，并確保將其轉(zhuǎn)為 kebab-case（短橫線命名）。

<input @keydown.page-down="scrollDown" />

在這個(gè)示例中，page-down 是原始 key 值 PageDown 的 kebab-case 表示。

3. 系統(tǒng)修飾鍵：

系統(tǒng)修飾鍵包括 ctrl、alt、shift 和 meta。它們的使用方式有一些特殊情況：

• 配合 keyup 使用：按下修飾鍵的同時(shí)，再按下其他鍵，隨后釋放其他鍵，事件才會(huì)被觸發(fā)。

<input @keyup.ctrl="ctrlKeyReleased" />

在這個(gè)示例中，ctrlKeyReleased 方法只在釋放Ctrl鍵時(shí)觸發(fā)。

• 配合 keydown 使用：正常觸發(fā)事件，不需要同時(shí)釋放其他鍵。

<input @keydown.alt="altKeyPressed" />

在這個(gè)示例中，altKeyPressed 方法在按下Alt鍵時(shí)觸發(fā)。

4. 使用 keyCode：

雖然不推薦使用，但你也可以使用 keyCode 來指定具體的按鍵。這種方式已經(jīng)被廢棄，不建議使用，因?yàn)樗蕾囉诘讓訛g覽器的實(shí)現(xiàn)。

<input @keydown.13="handleEnterKey" />

在這個(gè)示例中，13 是回車鍵的鍵碼。

5. 自定義鍵名：

你可以通過 Vue.config.keyCodes 來自定義按鍵別名和它們對應(yīng)的鍵碼。這可以用于定制自己的按鍵別名。

Vue.config.keyCodes.myKey = 42;

然后，你可以使用 myKey 作為按鍵別名。

<input @keydown.myKey="customKeyHandler" />

這些示例詳細(xì)展示了不同按鍵別名和修飾符的用法，以及如何處理鍵盤事件和定制按鍵別名。根據(jù)你的具體需求，選擇適當(dāng)?shù)姆绞絹硖幚礞I盤事件可以讓你的Vue應(yīng)用更加靈活和強(qiáng)大。

八、 計(jì)算屬性

8.1計(jì)算屬性的定義：

計(jì)算屬性是一種在Vue組件中定義的特殊屬性，它的值是根據(jù)已有的響應(yīng)式數(shù)據(jù)計(jì)算而來的，通常用于處理復(fù)雜的數(shù)據(jù)邏輯。你可以使用computed選項(xiàng)來聲明計(jì)算屬性。

computed: {// 計(jì)算屬性的名稱computedProperty: function() {// 計(jì)算邏輯return someCalculationBasedOnData; //返回值作為computedProperty的值}
}

8.2計(jì)算屬性的原理：

計(jì)算屬性的實(shí)現(xiàn)借助了Object.defineProperty方法提供的getter和setter。通過getter函數(shù)，你可以定義計(jì)算屬性的值如何計(jì)算，并且當(dāng)依賴的數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)自動(dòng)調(diào)用getter來重新計(jì)算計(jì)算屬性的值。同時(shí)，你也可以提供setter函數(shù)來響應(yīng)對計(jì)算屬性的修改。

8.3 訪問計(jì)算屬性：

在模板中，你可以像訪問普通屬性一樣訪問計(jì)算屬性，Vue會(huì)自動(dòng)處理計(jì)算屬性的計(jì)算和緩存。

<div>{{ computedProperty }}</div>

8.4 計(jì)算屬性的get函數(shù)執(zhí)行時(shí)機(jī)：

• 初次讀取時(shí)會(huì)執(zhí)行一次： 當(dāng)你第一次訪問計(jì)算屬性時(shí)，它的get函數(shù)會(huì)被調(diào)用，計(jì)算并返回值。
• 當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)會(huì)被再次調(diào)用： 如果計(jì)算屬性依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化，Vue會(huì)自動(dòng)重新計(jì)算計(jì)算屬性的值，并在需要時(shí)將新值返回。

8.5 計(jì)算屬性的優(yōu)勢：

• 緩存機(jī)制： 計(jì)算屬性內(nèi)部有緩存機(jī)制，只有在依賴的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算，這提高了性能。
• 效率高： 與使用methods實(shí)現(xiàn)相比，計(jì)算屬性更高效，因?yàn)樗鼈冎辉谛枰獣r(shí)計(jì)算，不會(huì)多次重復(fù)執(zhí)行。
• 調(diào)試方便： 計(jì)算屬性將復(fù)雜的計(jì)算邏輯封裝在一個(gè)地方，使代碼更易讀和維護(hù)。

8.6 計(jì)算屬性的set方法：

如果你希望修改計(jì)算屬性的值，必須提供一個(gè)set方法來響應(yīng)修改，并在set方法中更新計(jì)算時(shí)依賴的數(shù)據(jù)。

computed: {fullName: {// 計(jì)算屬性的getterget: function() {return this.firstName + ' ' + this.lastName;},// 計(jì)算屬性的setterset: function(newValue) {// 解析newValue并更新firstName和lastNameconst names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];}}
}

這個(gè)例子中，fullName 計(jì)算屬性的get方法返回firstName和lastName的合并值，而set方法接受一個(gè)新的值，解析出名字并更新firstName和lastName。

通過提供set方法，你可以使計(jì)算屬性變成可寫的，并通過計(jì)算屬性修改依賴數(shù)據(jù)。

計(jì)算屬性是Vue中處理派生數(shù)據(jù)的強(qiáng)大工具，它們提高了性能和代碼的可讀性，使你能夠以一種聲明式的方式處理復(fù)雜的數(shù)據(jù)邏輯。

8.7計(jì)算屬性的簡寫

完整的計(jì)算屬性定義方式：

new Vue({data: {basePrice: 100,discount: 10},computed: {// 完整的計(jì)算屬性定義finalPrice: {get: function() {return this.basePrice - this.discount;},set: function(newPrice) {this.discount = this.basePrice - newPrice;}}}
});

上面的示例中，finalPrice 計(jì)算屬性有一個(gè)完整的定義，包括 get 方法和 set 方法，可以用于獲取和設(shè)置 finalPrice 的值。

計(jì)算屬性的簡寫方式：

new Vue({data: {basePrice: 100,discount: 10},computed: {// 使用簡寫方式定義計(jì)算屬性finalPrice() {return this.basePrice - this.discount;}}
});

在上面的示例中，finalPrice 計(jì)算屬性使用了簡寫方式，只包括 get 方法，用于獲取 finalPrice 的值。這是一種更簡潔的方式，特別適用于沒有需要設(shè)置的情況。

總結(jié)來說，使用完整的計(jì)算屬性定義方式需要提供 get 和 set 方法，允許你讀取和設(shè)置計(jì)算屬性的值。而使用簡寫方式只需要提供 get 方法，適用于只需要讀取計(jì)算屬性值的情況。選擇哪種方式取決于你的需求和是否需要設(shè)置計(jì)算屬性的值。

九、 監(jiān)視屬性

9.1監(jiān)視屬性（watch）的基本概念：

1. 觸發(fā)時(shí)機(jī)： 監(jiān)視屬性允許你在某個(gè)數(shù)據(jù)屬性變化時(shí)自動(dòng)執(zhí)行回調(diào)函數(shù)，這對于需要在特定數(shù)據(jù)變化時(shí)采取一些操作非常有用。

2. 監(jiān)視屬性的存在性： 你只能監(jiān)視已經(jīng)存在的數(shù)據(jù)屬性，無法監(jiān)視未定義的屬性。

9.2 監(jiān)視屬性的兩種寫法：

1. 通過watch選項(xiàng)配置： 在Vue組件中，你可以在watch選項(xiàng)中配置要監(jiān)視的屬性以及相應(yīng)的回調(diào)函數(shù)。明確需要監(jiān)視的屬性時(shí)用這種方法。

   new Vue({data: {someData: 'initial value'},watch: {someData: function(newValue, oldValue) {// 在 someData 屬性變化時(shí)執(zhí)行回調(diào)console.log('someData 發(fā)生變化:', newValue, oldValue);}}
   });
   

2. 通過vm.$watch方法： 你還可以使用Vue實(shí)例的$watch方法來動(dòng)態(tài)添加監(jiān)視屬性。后期根據(jù)需求添加監(jiān)視屬性的時(shí)候用這種方法。

   const vm = new Vue({data: {someData: 'initial value'}
   });// 使用 $watch 方法監(jiān)視 someData 屬性
   vm.$watch('someData',function(newValue, oldValue) {// 在 someData 屬性變化時(shí)執(zhí)行回調(diào)console.log('someData 發(fā)生變化:', newValue, oldValue);
   });
   

這兩種寫法都允許你在監(jiān)視的屬性發(fā)生變化時(shí)執(zhí)行自定義的回調(diào)函數(shù)，以便處理數(shù)據(jù)的變化和執(zhí)行相關(guān)操作。

總之，監(jiān)視屬性是Vue中一種用于跟蹤數(shù)據(jù)變化并執(zhí)行自定義操作的機(jī)制，它有助于處理數(shù)據(jù)的特殊情況和執(zhí)行異步操作。

9.3 深度監(jiān)視屬性

深度監(jiān)視（Deep Watch）：

1. 默認(rèn)不監(jiān)測對象內(nèi)部值的改變： 在Vue.js中，默認(rèn)情況下，watch不會(huì)監(jiān)測對象內(nèi)部值的改變，只會(huì)監(jiān)測對象的引用是否發(fā)生變化。

2. 配置deep: true可以監(jiān)測對象內(nèi)部值改變： 如果你想要監(jiān)測對象內(nèi)部值的改變，你可以在watch選項(xiàng)中將deep設(shè)置為true。這樣Vue會(huì)遞歸地深度監(jiān)測對象內(nèi)部的所有屬性和值的變化。

備注：

1. Vue自身可以監(jiān)測對象內(nèi)部值的改變： Vue實(shí)例本身具有能力監(jiān)測對象內(nèi)部值的改變，這意味著當(dāng)你直接修改對象內(nèi)部的屬性值時(shí)，Vue會(huì)自動(dòng)觸發(fā)視圖的更新。但是，使用watch選項(xiàng)時(shí)，默認(rèn)情況下不會(huì)監(jiān)測對象內(nèi)部值的改變，除非顯式啟用深度監(jiān)視。

2. 根據(jù)數(shù)據(jù)結(jié)構(gòu)決定是否采用深度監(jiān)視： 是否使用深度監(jiān)視取決于數(shù)據(jù)的結(jié)構(gòu)和你的需求。如果你需要監(jiān)測對象內(nèi)部值的變化，可以使用深度監(jiān)視。但請注意，深度監(jiān)視可能會(huì)引入性能開銷，因此要謹(jǐn)慎使用。

深度監(jiān)視是Vue.js提供的一項(xiàng)強(qiáng)大功能，可確保你能夠捕捉到對象內(nèi)部值的變化，從而更精確地響應(yīng)數(shù)據(jù)的改變。

讓我為你提供一個(gè)更具體的例子，以展示深度監(jiān)視的效果。在這個(gè)示例中，我們將創(chuàng)建一個(gè)包含嵌套對象的數(shù)據(jù)結(jié)構(gòu)，并使用深度監(jiān)視來監(jiān)聽內(nèi)部值的變化。

<!DOCTYPE html>
<html>
<head><title>Vue Deep Watch Example</title>
</head>
<body><div id="app"><h2>深度監(jiān)視屬性示例</h2><p>User Name: {{ user.name }}</p><p>User Age: {{ user.age }}</p><button @click="changeUserName">修改用戶姓名</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({el: '#app',data: {user: {name: 'John',age: 30}},methods: {changeUserName: function() {// 模擬修改用戶對象內(nèi)部值this.user.name = 'Alice';}},watch: {// 使用深度監(jiān)視屬性來監(jiān)測 user 對象的內(nèi)部值變化'user': {handler: function(newValue, oldValue) {console.log('user 對象發(fā)生變化', newValue, oldValue);},deep: true // 啟用深度監(jiān)視}}
});
</script></body>
</html>

在這個(gè)示例中，我們有一個(gè)user對象，其中包含name和age屬性。我們使用深度監(jiān)視屬性來監(jiān)測整個(gè)user對象的變化。當(dāng)點(diǎn)擊按鈕以模擬修改user對象內(nèi)部的name屬性時(shí)，深度監(jiān)視能夠捕捉到這個(gè)內(nèi)部值的變化，并觸發(fā)watch中的回調(diào)函數(shù)。

9.4 深度監(jiān)視的簡寫

只有當(dāng)監(jiān)視屬性只需要一個(gè)回調(diào)函數(shù)的時(shí)候，才可以簡寫。（只需要handler屬性時(shí)）

使用監(jiān)視屬性的簡寫方式：

<!DOCTYPE html>
<html>
<head><title>Vue Watch Shorthand Example</title>
</head>
<body><div id="app"><p>當(dāng)前計(jì)數(shù)：{{ count }}</p><button @click="increment">增加計(jì)數(shù)</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({el: '#app',data: {count: 0},methods: {increment: function() {this.count++;}},watch: {// 使用監(jiān)視屬性的簡寫方式count(newValue, oldValue) {console.log('count 屬性發(fā)生變化，新值為:', newValue, '舊值為:', oldValue);}}
});
</script></body>
</html>

在這個(gè)示例中，我們使用了監(jiān)視屬性的簡寫方式。在watch選項(xiàng)中，我們直接將count作為鍵，然后在函數(shù)參數(shù)中接收新值（newValue）和舊值（oldValue）。這是一種更簡潔的方式來定義監(jiān)視屬性。

使用監(jiān)視屬性的完整寫法：

<!DOCTYPE html>
<html>
<head><title>Vue Watch Full Example</title>
</head>
<body><div id="app"><p>當(dāng)前計(jì)數(shù)：{{ count }}</p><button @click="increment">增加計(jì)數(shù)</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({el: '#app',data: {count: 0},methods: {increment: function() {this.count++;}},watch: {// 使用監(jiān)視屬性的完整寫法count: {handler(newValue, oldValue) {console.log('count 屬性發(fā)生變化，新值為:', newValue, '舊值為:', oldValue);},deep: false, // 深度監(jiān)視，默認(rèn)為falseimmediate: false // 立即執(zhí)行，默認(rèn)為false}}
});
</script></body>
</html>

在這個(gè)示例中，我們使用了監(jiān)視屬性的完整寫法。在watch選項(xiàng)中，我們將count作為鍵，然后使用對象字面量的形式定義監(jiān)視屬性。這允許我們配置更多的選項(xiàng)，如深度監(jiān)視和立即執(zhí)行。

總的來說，簡寫方式更簡潔，適用于簡單的監(jiān)視屬性情況，而完整寫法允許你更靈活地配置監(jiān)視屬性的行為，以滿足特定需求。根據(jù)你的需求和代碼的復(fù)雜性，可以選擇使用其中之一。

9.5 computed 和 watch 屬性對比

computed和watch都是用于監(jiān)聽數(shù)據(jù)變化并執(zhí)行相應(yīng)操作的Vue.js功能，但它們在用途和實(shí)現(xiàn)方式上有一些不同：

Computed 屬性：

1. 計(jì)算屬性：computed屬性是基于其依賴的數(shù)據(jù)進(jìn)行計(jì)算得出的屬性，它的值會(huì)被緩存，只有依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)重新計(jì)算。

2. 自動(dòng)更新：計(jì)算屬性會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化，當(dāng)依賴的數(shù)據(jù)發(fā)生改變時(shí)，計(jì)算屬性的值會(huì)自動(dòng)更新。

3. 緩存：計(jì)算屬性的值在同一依賴數(shù)據(jù)的情況下只會(huì)計(jì)算一次，之后會(huì)從緩存中獲取，這有助于提高性能。

4. 適用于處理派生數(shù)據(jù)：適用于需要根據(jù)其他數(shù)據(jù)計(jì)算得出的數(shù)據(jù)，例如對數(shù)據(jù)的過濾、排序或格式化等操作。

5. 沒有副作用：通常情況下，計(jì)算屬性用于返回一個(gè)計(jì)算值，不用于執(zhí)行副作用或異步操作。

Watch 監(jiān)視屬性：

1. 監(jiān)視數(shù)據(jù)變化：watch用于監(jiān)視特定數(shù)據(jù)的變化，當(dāng)指定的數(shù)據(jù)發(fā)生變化時(shí)，執(zhí)行指定的回調(diào)函數(shù)。

2. 更靈活：watch更靈活，可以執(zhí)行任意操作，包括異步操作和副作用，因?yàn)槟憧梢栽诨卣{(diào)函數(shù)中執(zhí)行任意代碼。

3. 無緩存：與計(jì)算屬性不同，watch沒有緩存，每次數(shù)據(jù)變化都會(huì)觸發(fā)回調(diào)函數(shù)。

4. 手動(dòng)停止監(jiān)視：你可以手動(dòng)停止監(jiān)視某個(gè)屬性的變化，通過調(diào)用vm.$watch返回的函數(shù)來取消監(jiān)視。

總結(jié)：

1. 功能重疊：

   • computed可以完成的功能，watch都可以完成。
   • watch可以完成的功能，computed不一定能夠完成，特別是在需要執(zhí)行異步操作時(shí)。

2. 原則性建議：

   • 所有由Vue管理的函數(shù)，最好寫成普通函數(shù)，以確保this指向Vue實(shí)例對象或組件實(shí)例對象。
   • 所有不由Vue管理的函數(shù)（例如定時(shí)器回調(diào)、Ajax回調(diào)、Promise回調(diào)等），最好寫成箭頭函數(shù)，以確保this指向Vue實(shí)例對象或組件實(shí)例對象。

十、綁定樣式

10.1 class樣式 - 字符串寫法：

適用于類名不確定，需要?jiǎng)討B(tài)獲取的情況。

<div :class="className">這是一個(gè)示例文本</div>

data: {className: 'active'
}

在這個(gè)示例中，className是一個(gè)數(shù)據(jù)屬性，它的值是一個(gè)字符串'active'，該字符串作為CSS類名動(dòng)態(tài)綁定到<div>元素上。

10.2 class樣式 - 對象寫法：

適用于需要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定的情況。

<div :class="{ active: isActive, 'text-danger': hasError }">這是一個(gè)示例文本</div>

data: {isActive: true,hasError: false
}

在這個(gè)示例中，我們使用了對象語法來綁定CSS類。根據(jù)isActive和hasError的值，active和text-danger類會(huì)被動(dòng)態(tài)添加或移除。

10.3 class樣式 - 數(shù)組寫法：

適用于需要綁定多個(gè)樣式，個(gè)數(shù)確定，名字也確定，但不確定是否都要綁定的情況。

<div :class="[classA, classB]">這是一個(gè)示例文本</div>

data: {classA: 'classA',classB: 'classB'
}

在這個(gè)示例中，我們使用了數(shù)組語法來綁定CSS類。classA和classB是數(shù)據(jù)屬性，它們的值會(huì)作為CSS類應(yīng)用在<div>元素上。

10.4 style樣式 - 對象寫法：

適用于根據(jù)數(shù)據(jù)的變化動(dòng)態(tài)設(shè)置內(nèi)聯(lián)樣式屬性。

<div :style="styleObj">這是一個(gè)示例文本</div>

data: {styleObj:{// 樣式與css里的一樣，這里要用駝峰命名法color：'red',fontSize:16px}
}

在這個(gè)示例中，我們使用對象語法來綁定內(nèi)聯(lián)樣式。根據(jù)textColor和textSize的值，文本的顏色和字體大小會(huì)動(dòng)態(tài)設(shè)置。

10.5 style樣式 - 數(shù)組寫法：

適用于動(dòng)態(tài)生成多個(gè)內(nèi)聯(lián)樣式屬性的情況。

<div :style="styleArr">這是一個(gè)示例文本</div>

data: {styleArr: [color: 'blue',fontWeight: 'bold'},{backgroundColor: 'yellow',borderRadius: '4px'}
]

在這個(gè)示例中，我們使用了數(shù)組語法來綁定內(nèi)聯(lián)樣式。styleObjectA和styleObjectB是樣式對象，它們的樣式屬性會(huì)合并應(yīng)用在<div>元素上。

這些示例演示了每種綁定樣式的寫法以及它們在Vue.js應(yīng)用中的使用方式。你可以根據(jù)具體的需求和場景選擇適合的方式來管理元素的樣式。

十一、條件渲染

條件渲染是Vue.js中的一項(xiàng)重要功能，允許你根據(jù)數(shù)據(jù)的條件來決定是否渲染（顯示）某個(gè)元素或組件，或者渲染不同的內(nèi)容。在Vue.js中，我們通常使用以下指令和技巧來實(shí)現(xiàn)條件渲染：

11.1 v-if 和 v-else-if 和 v-else：

• v-if：通過 v-if 指令，你可以根據(jù)條件來渲染元素。寫法如下：

  <div v-if="expression">顯示內(nèi)容</div>
  

  適用于切換頻率較低的場景。特點(diǎn)是不展示的DOM元素直接被移除。

• v-else-if 和 v-else：你還可以使用 v-else-if 和 v-else 來實(shí)現(xiàn)多個(gè)條件分支，寫法如下：

  <div v-else-if="expression2">顯示內(nèi)容2</div>
  <div v-else>顯示其他內(nèi)容</div>
  

  這些指令適用于多個(gè)條件之間的切換，但要求它們在結(jié)構(gòu)上不能被“打斷”。

11.2 v-show：

• v-show 指令適用于切換頻率較高的場景，寫法如下：

  <div v-show="expression">顯示內(nèi)容</div>
  

  與 v-if 不同，v-show 不會(huì)移除不顯示的DOM元素，它僅僅使用樣式隱藏元素。

當(dāng)涉及到v-if、v-else-if、v-else和v-show時(shí)，它們在實(shí)現(xiàn)和執(zhí)行上有一些區(qū)別，而<template>可以用于解決結(jié)構(gòu)不能被“打斷”的問題。以下是詳細(xì)整理的內(nèi)容：

11.3 區(qū)別和使用場景：

v-if、v-else-if和v-else：

• 這些指令用于根據(jù)條件來決定是否渲染元素。它們在結(jié)構(gòu)上互相關(guān)聯(lián)，只有一個(gè)條件為真時(shí)才會(huì)渲染相應(yīng)的元素。

• 適用于切換頻率較低的場景，因?yàn)樗鼈儠?huì)在不滿足條件時(shí)移除整個(gè)DOM元素。

v-show：

• v-show 用于根據(jù)條件來切換元素的可見性，而不會(huì)移除元素。它在結(jié)構(gòu)上不會(huì)打斷，適用于需要頻繁切換可見性的元素。

11.4 使用 <template> 解決結(jié)構(gòu)問題：

有時(shí)，使用 v-if、v-else-if 和 v-else 可能會(huì)在結(jié)構(gòu)上引發(fā)問題，因?yàn)樗鼈円笤跅l件語句內(nèi)部包含一個(gè)根元素。這時(shí)可以使用 <template> 元素來包裹條件渲染的內(nèi)容，以解決這個(gè)問題。

<template v-if="conditionA"><!-- 這里是條件A為真時(shí)渲染的內(nèi)容 -->
</template>
<template v-else-if="conditionB"><!-- 這里是條件B為真時(shí)渲染的內(nèi)容 -->
</template>
<template v-else><!-- 這里是其他情況下渲染的內(nèi)容 -->
</template>

使用 <template> 元素可以讓條件渲染的內(nèi)容不再要求包含在一個(gè)單獨(dú)的根元素內(nèi)，從而避免了結(jié)構(gòu)上的問題。

綜上所述，v-if、v-else-if、v-else 和 v-show 在實(shí)現(xiàn)和執(zhí)行上有區(qū)別，可以根據(jù)具體的需求選擇合適的方式。當(dāng)涉及到結(jié)構(gòu)問題時(shí)，可以使用 <template> 元素來解決。這些工具使得Vue.js能夠根據(jù)數(shù)據(jù)狀態(tài)動(dòng)態(tài)渲染不同的用戶界面，增加了頁面的靈活性和交互性。

注意點(diǎn)：

• 當(dāng)使用 v-if 時(shí)，可能導(dǎo)致不展示的元素?zé)o法獲取，而使用 v-show 時(shí)，元素始終存在并可以獲取。

這些指令和技巧使得Vue.js能夠根據(jù)數(shù)據(jù)狀態(tài)動(dòng)態(tài)地渲染不同的用戶界面，從而實(shí)現(xiàn)了更靈活和交互性強(qiáng)的Web應(yīng)用程序。你可以根據(jù)具體需求選擇適合的條件渲染方式。

十二、 列表渲染

當(dāng)使用 v-for 指令時(shí)，你可以用它來展示列表數(shù)據(jù)，不僅僅是數(shù)組，還可以遍歷對象、字符串，甚至指定次數(shù)。

12.1v-for 指令

• v-for 指令用于在模板中進(jìn)行循環(huán)遍歷，通常用于展示列表數(shù)據(jù)。

• 語法：v-for="(item, index) in xxx" :key="yyy"，其中：

  • (item, index) 是循環(huán)中的形參，用于表示當(dāng)前項(xiàng)和索引（可選）。
  • xxx 是要遍歷的數(shù)據(jù)源，可以是數(shù)組、對象、字符串或指定次數(shù)。
  • :key 是必須的，用于提供唯一鍵，以便Vue能夠高效地跟蹤每個(gè)項(xiàng)的變化。

12.2 可遍歷的數(shù)據(jù)類型

1. 數(shù)組：常見用法，用于遍歷數(shù)組中的元素。
2. 對象：可以用于遍歷對象的屬性和值。
3. 字符串：用得較少，但你可以遍歷字符串的字符。
4. 指定次數(shù)：有時(shí)你只需要循環(huán)特定次數(shù)，可以使用整數(shù)范圍。

當(dāng)使用 v-for 指令遍歷不同的數(shù)據(jù)類型時(shí)，輸出結(jié)果會(huì)根據(jù)數(shù)據(jù)類型和循環(huán)內(nèi)容而異。

12.2.1 遍歷數(shù)組

示例：

適用場景：

• 展示數(shù)組中的數(shù)據(jù)，例如商品列表、評論列表等。

<template><div><ul><li v-for="(item, index) in items" :key="index">{{ index }}: {{ item }}</li></ul></div>
</template><script>
export default {data() {return {items: ['Apple', 'Banana', 'Cherry', 'Date']};}
};
</script>

輸出結(jié)果：

• 0: Apple
• 1: Banana
• 2: Cherry
• 3: Date

12.2.2 遍歷對象

示例：

適用場景：

• 展示對象的屬性和值，例如用戶信息、產(chǎn)品屬性等。

<template><div><ul><li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li></ul></div>
</template><script>
export default {data() {return {object: {name: 'John',age: 30,country: 'USA'}};}
};
</script>

輸出結(jié)果：

• name: John
• age: 30
• country: USA

12.2.3 遍歷字符串

示例：

適用場景：

• 遍歷字符串的字符，例如字符串動(dòng)畫效果、標(biāo)簽云等。

<template><div><ul><li v-for="char in str" :key="char">{{ char }}</li></ul></div>
</template><script>
export default {data() {return {str: 'Vue.js'};}
};
</script>

輸出結(jié)果：

• V
• u
• e
• .
• j
• s

###12.2.4 指定次數(shù)

示例：

適用場景：

• 在特定情況下，需要指定次數(shù)來生成重復(fù)的內(nèi)容，例如輪播圖、分頁器等。

<template><div><ul><li v-for="n in 5" :key="n">Item {{ n }}</li></ul></div>
</template>

輸出結(jié)果：

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

這些輸出結(jié)果展示了不同可遍歷數(shù)據(jù)類型的 v-for 指令的應(yīng)用，你可以根據(jù)你的具體需求和數(shù)據(jù)類型來選擇使用。

12.3 key的原理（重點(diǎn)）

12.3.1 key` 在虛擬 DOM 中的作用：

• key 是虛擬 DOM 對象的標(biāo)識，用于在數(shù)據(jù)發(fā)生變化時(shí)識別和管理虛擬 DOM 元素。
• Vue 使用 key 來進(jìn)行新虛擬 DOM 與舊虛擬 DOM 的差異比較，從而高效地更新真實(shí) DOM。

12.3.2 對比規(guī)則：

• 當(dāng)進(jìn)行虛擬 DOM 對比時(shí)，Vue 將按照以下規(guī)則處理 key：
  • 如果在舊虛擬 DOM 中找到了與新虛擬 DOM 相同的 key：
    • 如果虛擬 DOM 中內(nèi)容沒有變化，直接復(fù)用之前的真實(shí) DOM。
    • 如果虛擬 DOM 中內(nèi)容發(fā)生變化，生成新的真實(shí) DOM 并替換頁面中的舊真實(shí) DOM。
  • 如果在舊虛擬 DOM 中未找到與新虛擬 DOM 相同的 key，則創(chuàng)建新的真實(shí) DOM 并進(jìn)行渲染。

12.3.3 使用索引（index）作為 key 的潛在問題：

• 使用索引作為 key 有時(shí)可能會(huì)導(dǎo)致性能問題和不穩(wěn)定的渲染行為，特別是在以下情況下：
  1. 當(dāng)對數(shù)據(jù)進(jìn)行逆序添加或逆序刪除等破壞順序的操作時(shí)，可能會(huì)產(chǎn)生不必要的真實(shí) DOM 更新，效率低。
  2. 如果虛擬 DOM 結(jié)構(gòu)中包含輸入類的 DOM 元素，可能會(huì)導(dǎo)致錯(cuò)誤的 DOM 更新，從而導(dǎo)致界面問題。

12.3.4 如何選擇 key：

• 最好使用每條數(shù)據(jù)的唯一標(biāo)識作為 key，例如 id、手機(jī)號、身份證號、學(xué)號`等唯一值。
• 如果你確定不會(huì)對數(shù)據(jù)進(jìn)行逆序添加或逆序刪除等破壞順序操作，僅用于渲染列表展示，使用索引作為 key 是可以接受的。

十三 、數(shù)據(jù)監(jiān)測的原理

1. 監(jiān)測對象的數(shù)據(jù)：

   • Vue會(huì)在初始化時(shí)通過 Object.defineProperty 或 ES6 的 Proxy 來設(shè)置對象屬性的 getter 和 setter，實(shí)現(xiàn)屬性的監(jiān)測。
   • Vue會(huì)遞歸遍歷對象的所有屬性，包括嵌套對象，確保所有數(shù)據(jù)都被監(jiān)測。
   • 如果需要給對象后添加屬性并使其具有響應(yīng)性，可以使用 Vue.set() 或 vm.$set()。

2. 監(jiān)測數(shù)組的數(shù)據(jù)：

   • Vue會(huì)包裝數(shù)組的一些方法，這些方法都會(huì)改變原數(shù)組（例如：push()、pop()、shift()、unshift()、splice()、sort()、reverse()）以實(shí)現(xiàn)響應(yīng)式。
   • 當(dāng)使用這些方法修改數(shù)組時(shí)，Vue會(huì)檢測到變化并重新解析模板，從而更新頁面。

3. 注意事項(xiàng)：

   • 對于對象屬性，Vue默認(rèn)只監(jiān)測初始化時(shí)存在的屬性。后續(xù)添加的屬性需要使用 Vue.set() 或 vm.$set() 來實(shí)現(xiàn)響應(yīng)性。
   • 對于數(shù)組元素，只有通過 Vue 包裝過的方法或上述的數(shù)組修改方法才會(huì)觸發(fā)響應(yīng)式更新。
   • 需要注意的是，Vue.set() 和 vm.$set() 不能用于給Vue實(shí)例對象或根數(shù)據(jù)對象添加屬性。

Vue的數(shù)據(jù)監(jiān)測原理，它確保數(shù)據(jù)的響應(yīng)性和自動(dòng)更新。這是Vue實(shí)現(xiàn)響應(yīng)式框架的核心機(jī)制之一，使得數(shù)據(jù)和視圖之間的同步變得更加容易和高效。

13.1 set的使用

當(dāng)你需要向Vue響應(yīng)式對象中添加屬性或使后添加的屬性具有響應(yīng)性時(shí)，可以使用 Vue.set 或 this.$set。以下是有關(guān)這兩種方法的筆記總結(jié)：

13.1.1 Vue.set 方法

Vue.set(target, propertyName, value)

• target：目標(biāo)對象，即要添加屬性的對象。通常是一個(gè)響應(yīng)式對象。
• propertyName：要添加或修改的屬性名。
• value：要設(shè)置的屬性值。

注意事項(xiàng)：

• target 應(yīng)該是一個(gè)響應(yīng)式對象，可以是Vue組件的 data的 屬性，或嵌套在 data 中的對象，或任何已經(jīng)具有響應(yīng)性的對象。（不可以為vm或者vm的跟屬性data）
• propertyName 是要添加或修改的屬性名，必須是一個(gè)字符串或表達(dá)式。
• 避免在已有的響應(yīng)式屬性上調(diào)用 Vue.set。

13.1.2 this.$set 方法

this.$set(target, propertyName, value)

• this：Vue 實(shí)例。
• target：目標(biāo)對象，即要添加屬性的對象。通常是一個(gè)響應(yīng)式對象。
• propertyName：要添加或修改的屬性名。
• value：要設(shè)置的屬性值。

注意事項(xiàng)：

• this.$set 主要用于在 Vue 組件內(nèi)部添加響應(yīng)式屬性，更方便地訪問 Vue 實(shí)例。
• 遵循與 Vue.set 相同的注意事項(xiàng)，確保目標(biāo)對象是響應(yīng)式的。

使用場景

• 主要用于向響應(yīng)式對象添加屬性，特別是在組件內(nèi)部的數(shù)據(jù)對象上添加屬性。
• 避免頻繁使用，最好在初始化數(shù)據(jù)時(shí)就定義好數(shù)據(jù)結(jié)構(gòu)，以提高性能。

這些方法使你能夠在需要時(shí)向響應(yīng)式對象添加屬性，確保數(shù)據(jù)和視圖的同步，并避免潛在的問題。

十四、過濾器

14.1 局部過濾器和全局過濾器

局部過濾器：

局部過濾器只在單個(gè) Vue 實(shí)例內(nèi)部可用。你可以在該實(shí)例的 filters 屬性中定義和使用它們。這些過濾器僅在當(dāng)前 Vue 實(shí)例的模板中可見。

new Vue({el: '#app',data: {message: 'hello, world!',},filters: {customFilter: function (value) {return value.toUpperCase();},},
});

全局過濾器：

全局過濾器在所有 Vue 實(shí)例中都可用。你可以通過 Vue 構(gòu)造函數(shù)的 filter 方法來注冊全局過濾器。

Vue.filter('customFilter', function (value) {return value.toUpperCase();
});

14.2 過濾器的用法

過濾器可以用在插值表達(dá)式 {{ }} 中，也可以用在 v-bind、v-model 和 v-for 等指令中。例如：

{{ message | customFilter }}
<div v-bind:class="classObject | customFilter"></div>
<input v-model="message | customFilter">
<div v-for="item in items | customFilter">{{ item }}</div>

14.3 過濾器如何接收參數(shù)以及多個(gè)過濾器串聯(lián)

過濾器可以接收參數(shù)，參數(shù)可以在過濾器名稱后用單引號 ‘ ’ 指定。多個(gè)過濾器可以通過管道符 | 進(jìn)行串聯(lián)。

過濾器的參數(shù)是逐層傳遞的

{{ message | customFilter('arg1', 'arg2') | anotherFilter }}
// message作為customFilter的參數(shù)，customFilter的返回結(jié)果又作為anotherFilter的參數(shù)

在自定義過濾器中，可以通過函數(shù)的參數(shù)接收這些參數(shù)：

Vue.filter('customFilter', function (value, arg1, arg2) {// 這里可以使用 value、arg1 和 arg2 來處理數(shù)據(jù)
});

14.4 是否改變原數(shù)據(jù)

Vue 的過濾器默認(rèn)不會(huì)改變原始數(shù)據(jù)，它們是純粹的函數(shù)式。過濾器的目的是將輸入值轉(zhuǎn)換為輸出值，而不修改輸入值。如果需要修改原始數(shù)據(jù)，通常應(yīng)該在數(shù)據(jù)綁定或組件方法中進(jìn)行操作，而不是在過濾器中。

十五、Vue指令

15.1 Vue 內(nèi)置指令

Vue.js 提供了一系列內(nèi)置指令，用于處理視圖層的渲染和交互邏輯。這些指令以 v- 開頭，可以直接應(yīng)用于模板中的 HTML 元素。以下是各個(gè)內(nèi)置指令的詳細(xì)介紹和示例：

1. v-bind：用于綁定 DOM 元素的屬性、CSS 類名和內(nèi)聯(lián)樣式，實(shí)現(xiàn)數(shù)據(jù)和視圖之間的綁定。

   示例：

   <!-- 綁定 href 屬性 -->
   <a v-bind:href="url">Link</a><!-- 使用簡寫語法 -->
   <a :href="url">Link</a><!-- 動(dòng)態(tài)生成 class -->
   <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
   

2. v-model：主要用于表單元素，實(shí)現(xiàn)雙向數(shù)據(jù)綁定，將表單輸入的值和數(shù)據(jù)進(jìn)行同步。

   示例：

   <!-- 文本輸入框雙向綁定 -->
   <input v-model="message" type="text"><!-- 復(fù)選框綁定 -->
   <input v-model="isChecked" type="checkbox"><!-- 單選按鈕綁定 -->
   <input v-model="selected" type="radio" value="A">
   <input v-model="selected" type="radio" value="B">
   

3. v-for：用于循環(huán)渲染元素列表，根據(jù)數(shù)組或?qū)ο蟮膬?nèi)容生成多個(gè)元素。

   示例：

   <!-- 遍歷數(shù)組 -->
   <ul><li v-for="item in items">{{ item }}</li>
   </ul><!-- 遍歷對象 -->
   <ul><li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
   </ul><!-- 遍歷字符串 -->
   <div v-for="char in 'Vue.js'">{{ char }}</div><!-- 指定次數(shù)遍歷 -->
   <div v-for="n in 5">{{ n }}</div>
   

4. v-if / v-else-if / v-else：條件性地渲染元素，根據(jù)表達(dá)式的值來決定是否顯示元素。

   示例：

   <!-- 條件渲染 -->
   <p v-if="isShow">This is shown</p>
   <p v-else>This is hidden</p><!-- 多條件渲染 -->
   <p v-if="status === 'success'">Request succeeded</p>
   <p v-else-if="status === 'error'">Request failed</p>
   <p v-else>Request pending</p>
   

5. v-show：條件性顯示元素，通過 CSS 控制顯示或隱藏，不會(huì)銷毀元素。

   示例：

   <!-- 條件顯示 -->
   <div v-show="isVisible">This is shown or hidden</div>
   

6. v-on：綁定事件監(jiān)聽器，觸發(fā)指定事件時(shí)執(zhí)行相應(yīng)的方法。

   示例：

   <!-- 點(diǎn)擊事件 -->
   <button v-on:click="doSomething">Click me</button><!-- 使用簡寫語法 -->
   <button @click="doSomething">Click me</button><!-- 傳遞參數(shù) -->
   <button @click="doSomething('parameter')">Click me</button><!-- 監(jiān)聽自定義事件 -->
   <custom-component @custom-event="handleCustomEvent"></custom-component>
   

7. v-pre：跳過當(dāng)前元素及其子元素的編譯過程，用于靜態(tài)內(nèi)容不需要 Vue 處理的情況。

   示例：

   <!-- 使用 v-pre 跳過編譯 -->
   <div v-pre>{{ message }}</div>
   

8. v-cloak：確保 Vue 實(shí)例初始化完成前不顯示綁定的元素，通常與 CSS 配合使用。

   示例：

   <!-- 使用 v-cloak 隱藏未編譯內(nèi)容 -->
   <div v-cloak>{{ message }}
   </div>
   

9. v-html：用于輸出 HTML 片段，而不是純文本，潛在的安全風(fēng)險(xiǎn)需要注意。

   示例：

   <!-- 渲染 HTML 片段（慎用） -->
   <div v-html="htmlContent"></div>
   

10. v-once：執(zhí)行一次性插值，確保元素或組件只渲染一次，適用于靜態(tài)內(nèi)容不會(huì)改變的情況。

    示例：

    <!-- 渲染靜態(tài)內(nèi)容，只渲染一次 -->
    <p v-once>{{ staticMessage }}</p>
    

11. v-slot：用于具名插槽的分發(fā)，通常在復(fù)雜組件中用于父組件向子組件傳遞內(nèi)容。

    示例：

    <!-- 具名插槽分發(fā)內(nèi)容 -->
    <custom-component><template v-slot:header><h1>This is the header</h1></template><template v-slot:
    

15.2 Vue自定義指令

自定義指令是 Vue 中用于擴(kuò)展 DOM 元素行為的靈活機(jī)制，通過定義和應(yīng)用指令，可以實(shí)現(xiàn)特定的 DOM 操作和交互邏輯，以滿足項(xiàng)目需求。自定義指令允許你在 Vue 應(yīng)用中添加自定義行為，例如修改元素樣式、監(jiān)聽事件、處理輸入等，以提供更靈活的交互和視圖控制。

15.2.1 定義自定義指令

1. 局部指令：在組件內(nèi)部定義自定義指令。

   new Vue({directives: {自定義指令名: 配置對象}
   })
   

   或者

   new Vue({directives: {自定義指令名(el, binding) {// 自定義指令的邏輯}}
   })
   

2. 全局指令：在應(yīng)用程序的任何地方定義自定義指令。

   Vue.directive(自定義指令名, 配置對象)
   

   或者

   Vue.directive(自定義指令名, function(el, binding) {// 自定義指令的邏輯
   })
   

15.2.2 自定義指令的配置對象

配置對象中常用的三個(gè)回調(diào)函數(shù)：

1. bind：指令與元素成功綁定時(shí)調(diào)用，用于一次性的初始化設(shè)置。

2. inserted：指令所在元素被插入頁面時(shí)調(diào)用，可以用來操作 DOM 元素。

3. update：指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用，通常用于更新指令綁定的值。

15.2.3 使用自定義指令

當(dāng)在模板中使用自定義指令時(shí)，確實(shí)需要在指令名前加上 v- 前綴。以下是一個(gè)簡單的例子：

假設(shè)我們定義了一個(gè)名為 v-color 的自定義指令，它用于改變元素的文本顏色。首先，在 Vue 實(shí)例中注冊這個(gè)自定義指令：

// 注冊全局自定義指令 v-color
Vue.directive('color', {// 指令的生命周期鉤子bind(el, binding) {// binding.value 包含傳遞給指令的值el.style.color = binding.value;}
});

現(xiàn)在，我們可以在模板中使用這個(gè)自定義指令，注意要加上 v- 前綴：

<template><div><!-- 使用自定義指令 v-color，傳遞顏色值 'red' --><p v-color="'red'">This text is red.</p></div>
</template>

在上面的例子中，我們使用了自定義指令 v-color 并傳遞了顏色值 'red'，它會(huì)將元素的文本顏色設(shè)置為紅色。這是一個(gè)簡單的示例，說明了在模板中如何使用自定義指令，并在指令名前加上 v- 前綴。

15.2.4 指令命名規(guī)范

指令名如果是多個(gè)單詞，應(yīng)該使用 kebab-case 命名方式，而不是 camelCase。例如，v-my-directive。

15.2.5 自定義指令的執(zhí)行時(shí)機(jī)

自定義指令的執(zhí)行時(shí)機(jī)與配置對象中的回調(diào)函數(shù)相關(guān)：

• bind：在指令與元素成功綁定時(shí)調(diào)用，一次性的初始化設(shè)置。
• inserted：在指令所在元素被插入頁面時(shí)調(diào)用，可以用來操作 DOM 元素。
• update：在指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用，通常用于更新指令綁定的值。

十六、生命周期

Vue.js 中的生命周期函數(shù)是一組特殊命名的函數(shù)，它們允許您在不同的階段添加自定義代碼，以便在組件的生命周期中執(zhí)行特定的操作。這些函數(shù)的名稱是固定的，但函數(shù)內(nèi)部的內(nèi)容是由程序員編寫的，用于定義在特定時(shí)刻執(zhí)行的操作

Vue.js 的生命周期可以分為以下主要階段和生命周期函數(shù)：

16.1 創(chuàng)建階段：

• beforeCreate：在實(shí)例初始化之后，數(shù)據(jù)觀測 (data observer) 和事件配置（數(shù)據(jù)代理）之前調(diào)用。在這個(gè)階段，組件的數(shù)據(jù)和事件還沒有初始化。（無法訪問vm實(shí)例）
• created：在實(shí)例創(chuàng)建完成后調(diào)用。在這個(gè)階段，組件的數(shù)據(jù)已經(jīng)初始化，但 DOM 元素還沒有掛載到頁面上。

16.2 掛載階段：

• beforeMount：在掛載開始之前被調(diào)用。在這個(gè)階段，模板編譯已經(jīng)完成，但掛載的 DOM 元素還沒有渲染到頁面上。（虛擬DOM已經(jīng)生成）
• mounted：在掛載完成后被調(diào)用。在這個(gè)階段，組件已經(jīng)掛載到頁面上，可以訪問 DOM 元素。

16.3 更新階段：

• beforeUpdate：在數(shù)據(jù)更新但 DOM 還沒有重新渲染時(shí)被調(diào)用。在這個(gè)階段，您可以查看更新之前的數(shù)據(jù)。（頁面尚未和數(shù)據(jù)保持同步）
• updated：在數(shù)據(jù)更新完成，DOM 已經(jīng)重新渲染后被調(diào)用。在這個(gè)階段，DOM 元素已經(jīng)更新，可以執(zhí)行與更新相關(guān)的操作。（頁面和數(shù)據(jù)保持同步）

16.4 銷毀階段：

• beforeDestroy：在實(shí)例銷毀之前調(diào)用。在這個(gè)階段，實(shí)例仍然完全可用，您可以執(zhí)行清理工作。
• destroyed：在實(shí)例銷毀之后調(diào)用。在這個(gè)階段，實(shí)例已經(jīng)被銷毀，無法再訪問其數(shù)據(jù)和方法。

進(jìn)入銷毀階段的條件包括手動(dòng)調(diào)用 vm.$destroy() 方法以及組件從父組件中銷毀（例如使用 v-if 條件渲染時(shí)）。

這些生命周期函數(shù)允許您在不同的階段執(zhí)行自定義代碼，以滿足業(yè)務(wù)需求。例如，在 created 鉤子中可以進(jìn)行數(shù)據(jù)初始化，而在 mounted 鉤子中可以執(zhí)行 DOM 操作。在 beforeDestroy 鉤子中可以進(jìn)行資源清理操作，確保不會(huì)發(fā)生內(nèi)存泄漏。

結(jié)束語

在Vue.js的學(xué)習(xí)過程中，不僅僅是技術(shù)知識的積累，更是一段充滿啟發(fā)和樂趣的旅程。Vue的簡潔、優(yōu)雅以及強(qiáng)大的特性讓前端開發(fā)變得愈發(fā)令人著迷。我希望你能感受到這個(gè)框架的美妙之處，也能在實(shí)際項(xiàng)目中充分發(fā)揮它的潛力。

在學(xué)習(xí)和使用Vue的過程中，不要害怕遇到困難和挑戰(zhàn)。每一次的克服都是一次成長，每一次的錯(cuò)誤都是一次經(jīng)驗(yàn)。不斷提升自己的前端技能，學(xué)會(huì)如何構(gòu)建更出色的用戶體驗(yàn)，這是一項(xiàng)不斷追求卓越的旅程。

最后，我想對你說聲謝謝，感謝你一直與我一同學(xué)習(xí)和探索。無論你是一名新手還是已經(jīng)積累了豐富經(jīng)驗(yàn)的開發(fā)者，我都希望你能在前端的路上越走越遠(yuǎn)，實(shí)現(xiàn)自己的技術(shù)夢想。祝愿你的代碼永遠(yuǎn)優(yōu)雅，Bug少之又少，前程似錦。如果你需要任何幫助或有任何問題，請隨時(shí)向我咨詢。加油！ 💪🚀