Vue 數(shù)據(jù)綁定從 v-bind 到 v-model 的實(shí)戰(zhàn)案例
引言：數(shù)據(jù)驅(qū)動(dòng)的前端革命
在前端開(kāi)發(fā)領(lǐng)域，數(shù)據(jù)與視圖的同步始終是核心挑戰(zhàn)。Vue 框架憑借其簡(jiǎn)潔高效的數(shù)據(jù)綁定機(jī)制，徹底改變了開(kāi)發(fā)者處理數(shù)據(jù)與視圖關(guān)系的方式。
作為 Vue 的靈魂特性，數(shù)據(jù)綁定不僅簡(jiǎn)化了代碼編寫(xiě)，更重塑了前端開(kāi)發(fā)思維模式。本文將系統(tǒng)解析 Vue 中兩種核心數(shù)據(jù)綁定方式 —— 單向綁定 (v-bind) 和雙向綁定 (v-model)，通過(guò)實(shí)例講解其工作原理、使用場(chǎng)景及最佳實(shí)踐，幫助你真正掌握 Vue 數(shù)據(jù)驅(qū)動(dòng)的精髓。
一、Vue 數(shù)據(jù)綁定的底層邏輯
在深入探討具體的綁定方式之前，我們需要先理解 Vue 數(shù)據(jù)綁定的底層邏輯。Vue 采用的是 "數(shù)據(jù)驅(qū)動(dòng)" 的思想，即視圖是數(shù)據(jù)的映射，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖會(huì)自動(dòng)更新。
這種機(jī)制的核心是 Vue 的響應(yīng)式系統(tǒng)，它通過(guò) Object.defineProperty (在 Vue 2 中) 或 Proxy (在 Vue 3 中) 對(duì)數(shù)據(jù)進(jìn)行劫持，當(dāng)數(shù)據(jù)變化時(shí)，會(huì)自動(dòng)通知依賴(lài)該數(shù)據(jù)的視圖進(jìn)行更新。
數(shù)據(jù)綁定則是連接數(shù)據(jù)與視圖的橋梁，它決定了數(shù)據(jù)如何流向視圖，以及視圖中的變化如何反饋給數(shù)據(jù)。
二、單向綁定：v-bind 的全面解析
2.1 什么是單向綁定
單向綁定指的是數(shù)據(jù)只能從數(shù)據(jù)源流向視圖，當(dāng)數(shù)據(jù)源發(fā)生變化時(shí)，視圖會(huì)隨之更新，但視圖中的用戶操作不會(huì)自動(dòng)同步回?cái)?shù)據(jù)源。這種單向數(shù)據(jù)流是 Vue 的基本原則之一。
在 Vue 中，v-bind 指令用于實(shí)現(xiàn)單向綁定，它可以將數(shù)據(jù)動(dòng)態(tài)地綁定到 HTML 元素的屬性上。
2.2 v-bind 的基本用法
v-bind 的基本語(yǔ)法如下：
<元素 v-bind:屬性名="數(shù)據(jù)"></元素>
由于 v-bind 使用頻率極高，Vue 提供了簡(jiǎn)寫(xiě)形式，可省略 "v-bind:"，直接使用 ":"：
<元素 :屬性名="數(shù)據(jù)"></元素>
最常見(jiàn)的應(yīng)用場(chǎng)景是綁定圖片的 src 屬性：
<img :src="imageUrl" alt="示例圖片">
這里的 imageUrl 是 Vue 實(shí)例中 data 選項(xiàng)里的一個(gè)屬性，當(dāng) imageUrl 的值發(fā)生變化時(shí)，img 元素的 src 屬性會(huì)自動(dòng)更新。
2.3 v-bind 的高級(jí)應(yīng)用
v-bind 的功能遠(yuǎn)不止于簡(jiǎn)單的屬性綁定，它還有許多高級(jí)用法：
綁定 CSS 類(lèi)
可以通過(guò) v-bind:class 綁定 CSS 類(lèi)，支持對(duì)象語(yǔ)法和數(shù)組語(yǔ)法：
<!-- 對(duì)象語(yǔ)法 -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 數(shù)組語(yǔ)法 -->
<div :class="[activeClass, errorClass]"></div>綁定內(nèi)聯(lián)樣式
v-bind:style 用于綁定內(nèi)聯(lián)樣式，同樣支持對(duì)象語(yǔ)法和數(shù)組語(yǔ)法：
<!-- 對(duì)象語(yǔ)法 -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
<!-- 數(shù)組語(yǔ)法 -->
<div :style="[baseStyles, overridingStyles]"></div>綁定多個(gè)屬性
可以通過(guò)一個(gè)對(duì)象一次性綁定多個(gè)屬性：
<div v-bind="objectOfAttrs"></div>
其中 objectOfAttrs 是一個(gè)包含多個(gè)鍵值對(duì)的對(duì)象，每個(gè)鍵值對(duì)對(duì)應(yīng)一個(gè)屬性和其值。
2.4 v-bind 在組件通信中的應(yīng)用
在 Vue 組件通信中，v-bind 扮演著至關(guān)重要的角色。父組件通過(guò) v-bind 向子組件傳遞數(shù)據(jù)（props）：
<!-- 父組件 -->
<template>
<child-component :message="parentMessage" :user="userInfo"></child-component>
</template>
<script>
export default {
data() {
return {
parentMessage: "Hello from parent",
userInfo: { name: "John", age: 30 }
}
}
}
</script>子組件通過(guò) props 選項(xiàng)接收這些數(shù)據(jù)：
<!-- 子組件 -->
<template>
<div>
<p>{{ message }}</p>
<p>{{ user.name }}</p>
</div>
</template>
<script>
export default {
props: {
message: String,
user: Object
}
}
</script>這種單向數(shù)據(jù)流確保了組件之間數(shù)據(jù)傳遞的可預(yù)測(cè)性，父組件的數(shù)據(jù)變化會(huì)自動(dòng)傳遞給子組件，但子組件不能直接修改 props，需要通過(guò)其他方式（如觸發(fā)事件）通知父組件更新數(shù)據(jù)。
三、雙向綁定：v-model 的工作機(jī)制
3.1 什么是雙向綁定
雙向綁定是指數(shù)據(jù)不僅能從數(shù)據(jù)源流向視圖，還能從視圖流向數(shù)據(jù)源。當(dāng)用戶在視圖中進(jìn)行操作（如輸入文本）時(shí)，這些變化會(huì)自動(dòng)同步回?cái)?shù)據(jù)源，無(wú)需手動(dòng)編寫(xiě)事件處理代碼。
在 Vue 中，v-model 指令用于實(shí)現(xiàn)表單元素和數(shù)據(jù)之間的雙向綁定，極大簡(jiǎn)化了表單處理邏輯。
3.2 v-model 的基本用法
v-model 的基本語(yǔ)法非常簡(jiǎn)潔：
<表單元素 v-model="數(shù)據(jù)"></表單元素>
例如，在輸入框中使用 v-model：
<template>
<div>
<input v-model="message" type="text">
<p>您輸入的內(nèi)容是: {{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ""
}
}
}
</script>在這個(gè)例子中，當(dāng)用戶在輸入框中輸入內(nèi)容時(shí)，message 的值會(huì)自動(dòng)更新，同時(shí)頁(yè)面上顯示的 message 也會(huì)實(shí)時(shí)更新，實(shí)現(xiàn)了數(shù)據(jù)與視圖的雙向同步。
3.3 v-model 的工作原理
v-model 實(shí)際上是一個(gè)語(yǔ)法糖，它本質(zhì)上是 v-bind 和 v-on 的組合。例如：
<input v-model="message">
等價(jià)于：
<input :value="message" @input="message = $event.target.value">
這個(gè)等價(jià)關(guān)系揭示了 v-model 的工作原理：
- 通過(guò) v-bind 將數(shù)據(jù)綁定到表單元素的 value 屬性（數(shù)據(jù)→視圖）
- 通過(guò) v-on 監(jiān)聽(tīng)表單元素的 input 事件，當(dāng)用戶輸入時(shí)更新數(shù)據(jù)（視圖→數(shù)據(jù)）
理解這一點(diǎn)非常重要，因?yàn)樗軒椭覀兝斫?v-model 在不同表單元素上的行為差異，以及如何在自定義組件上實(shí)現(xiàn) v-model。
3.4 v-model 在不同表單元素上的應(yīng)用
v-model 可以用于各種表單元素，但需要注意不同元素的特性略有差異：
文本輸入框（text）
<input v-model="message" type="text">
綁定到 value 屬性，監(jiān)聽(tīng) input 事件。
多行文本框（textarea）
<textarea v-model="message"></textarea>
與單行文本框類(lèi)似，但注意不要在 textarea 標(biāo)簽內(nèi)添加初始值，而是應(yīng)該在 data 中初始化。
復(fù)選框（checkbox）
單個(gè)復(fù)選框：
<input v-model="checked" type="checkbox">
綁定到 checked 屬性，值為布爾類(lèi)型。
多個(gè)復(fù)選框：
<input v-model="checkedNames" type="checkbox" value="Jack"> Jack <input v-model="checkedNames" type="checkbox" value="John"> John
綁定到一個(gè)數(shù)組，選中的選項(xiàng)值會(huì)被添加到數(shù)組中。
單選按鈕（radio）
<input v-model="picked" type="radio" value="One"> One <input v-model="picked" type="radio" value="Two"> Two
綁定到選中的值。
下拉列表（select）
單選下拉列表：
<select v-model="selected"> <option value="">請(qǐng)選擇</option> <option value="A">選項(xiàng)A</option> <option value="B">選項(xiàng)B</option> </select>
多選下拉列表（按住 Ctrl 鍵選擇多個(gè)）：
<select v-model="selected" multiple> <option value="A">選項(xiàng)A</option> <option value="B">選項(xiàng)B</option> <option value="C">選項(xiàng)C</option> </select>
此時(shí) selected 應(yīng)該是一個(gè)數(shù)組。
3.5 v-model 的修飾符
- v-model 提供了幾個(gè)實(shí)用的修飾符，用于處理常見(jiàn)的表單交互場(chǎng)景：
- lazy：將 input 事件改為 change 事件，即失去焦點(diǎn)或按下回車(chē)鍵時(shí)才更新數(shù)據(jù)
<input v-model.lazy="message">
- number：自動(dòng)將輸入值轉(zhuǎn)換為數(shù)字類(lèi)型
<input v-model.number="age" type="text">
- trim：自動(dòng)過(guò)濾輸入值的首尾空格
<input v-model.trim="username">
- 這些修飾符可以單獨(dú)使用，也可以組合使用，如 v-model.lazy.trim。
四、單向綁定與雙向綁定的對(duì)比與選擇
4.1 功能對(duì)比
4.2 性能考量
在性能方面，單向綁定通常比雙向綁定更高效，因?yàn)樗恍枰幚硪粋€(gè)方向的數(shù)據(jù)流。對(duì)于大型應(yīng)用，過(guò)度使用雙向綁定可能會(huì)導(dǎo)致性能問(wèn)題，因?yàn)槊看斡脩糨斎攵紩?huì)觸發(fā)數(shù)據(jù)更新和視圖重新渲染。
然而，在現(xiàn)代 Vue 版本中（尤其是 Vue 3），通過(guò)虛擬 DOM 和響應(yīng)式系統(tǒng)的優(yōu)化，這種性能差異在大多數(shù)情況下并不明顯。因此，在選擇綁定方式時(shí)，應(yīng)優(yōu)先考慮代碼的可讀性和維護(hù)性，而不是過(guò)早進(jìn)行性能優(yōu)化。
4.3 最佳實(shí)踐建議
- 優(yōu)先使用單向綁定：在大多數(shù)情況下，單向綁定已經(jīng)足夠滿足需求，并且能提供更可預(yù)測(cè)的數(shù)據(jù)流。
- 表單場(chǎng)景使用雙向綁定：在處理表單輸入時(shí)，v-model 可以顯著簡(jiǎn)化代碼，提高開(kāi)發(fā)效率。
- 復(fù)雜組件謹(jǐn)慎使用雙向綁定：在大型應(yīng)用或復(fù)雜組件中，過(guò)多的雙向綁定可能會(huì)使數(shù)據(jù)流變得混亂，難以調(diào)試。
- 結(jié)合使用兩種綁定方式：在實(shí)際開(kāi)發(fā)中，兩種綁定方式往往是結(jié)合使用的，單向綁定用于展示和組件通信，雙向綁定用于表單處理。
五、實(shí)戰(zhàn)案例：用戶信息表單
讓我們通過(guò)一個(gè)完整的實(shí)戰(zhàn)案例，展示如何在實(shí)際項(xiàng)目中合理使用 v-bind 和 v-model：
<template>
<div class="user-form">
<h2>用戶信息表單</h2>
<form @submit.prevent="handleSubmit">
<!-- 使用v-model進(jìn)行雙向綁定 -->
<div class="form-group">
<label :for="usernameId">用戶名:</label>
<input
type="text"
:id="usernameId"
v-model.trim="userInfo.username"
:class="{ 'invalid': !isUsernameValid }"
placeholder="請(qǐng)輸入用戶名"
>
<span v-if="!isUsernameValid" class="error-message">用戶名不能為空</span>
</div>
<div class="form-group">
<label :for="emailId">郵箱:</label>
<input
type="email"
:id="emailId"
v-model.trim="userInfo.email"
:class="{ 'invalid': !isEmailValid && emailTouched }"
@blur="emailTouched = true"
placeholder="請(qǐng)輸入郵箱"
>
<span v-if="!isEmailValid && emailTouched" class="error-message">請(qǐng)輸入有效的郵箱地址</span>
</div>
<div class="form-group">
<label>性別:</label>
<div class="radio-group">
<label>
<input type="radio" v-model="userInfo.gender" value="male"> 男
</label>
<label>
<input type="radio" v-model="userInfo.gender" value="female"> 女
</label>
</div>
</div>
<div class="form-group">
<label :for="interestsId">興趣愛(ài)好:</label>
<div class="checkbox-group">
<label v-for="interest in allInterests" :key="interest.value">
<input
type="checkbox"
v-model="userInfo.interests"
:value="interest.value"
> {{ interest.label }}
</label>
</div>
</div>
<div class="form-group">
<label :for="educationId">學(xué)歷:</label>
<select :id="educationId" v-model="userInfo.education">
<option value="">請(qǐng)選擇</option>
<option value="highschool">高中</option>
<option value="college">大專(zhuān)</option>
<option value="bachelor">本科</option>
<option value="master">碩士</option>
<option value="phd">博士</option>
</select>
</div>
<div class="form-group">
<label :for="introductionId">個(gè)人簡(jiǎn)介:</label>
<textarea
:id="introductionId"
v-model.lazy="userInfo.introduction"
rows="4"
placeholder="請(qǐng)輸入個(gè)人簡(jiǎn)介"
></textarea>
</div>
<button
type="submit"
:disabled="!isFormValid"
:class="{ 'disabled-btn': !isFormValid }"
>
提交
</button>
</form>
<!-- 預(yù)覽區(qū)域，使用v-bind進(jìn)行單向綁定 -->
<div class="preview-section" v-if="showPreview">
<h3>信息預(yù)覽</h3>
<div class="preview-card">
<p><strong>用戶名:</strong> {{ userInfo.username }}</p>
<p><strong>郵箱:</strong> {{ userInfo.email }}</p>
<p><strong>性別:</strong> {{ userInfo.gender === 'male' ? '男' : '女' }}</p>
<p><strong>興趣愛(ài)好:</strong> {{ userInfo.interests.join(', ') || '未選擇' }}</p>
<p><strong>學(xué)歷:</strong> {{ getEducationLabel(userInfo.education) }}</p>
<p><strong>個(gè)人簡(jiǎn)介:</strong> {{ userInfo.introduction || '無(wú)' }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userInfo: {
username: '',
email: '',
gender: 'male',
interests: [],
education: '',
introduction: ''
},
allInterests: [
{ value: 'reading', label: '閱讀' },
{ value: 'sports', label: '運(yùn)動(dòng)' },
{ value: 'music', label: '音樂(lè)' },
{ value: 'travel', label: '旅行' }
],
emailTouched: false,
showPreview: false
}
},
computed: {
// 生成唯一ID用于label綁定
usernameId() {
return `username-${Date.now()}`;
},
emailId() {
return `email-${Date.now()}`;
},
interestsId() {
return `interests-${Date.now()}`;
},
educationId() {
return `education-${Date.now()}`;
},
introductionId() {
return `introduction-${Date.now()}`;
},
// 表單驗(yàn)證
isUsernameValid() {
return this.userInfo.username.trim().length > 0;
},
isEmailValid() {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(this.userInfo.email);
},
isFormValid() {
return this.isUsernameValid && this.isEmailValid && this.userInfo.education;
}
},
methods: {
handleSubmit() {
// 提交表單數(shù)據(jù)
console.log('提交用戶信息:', this.userInfo);
this.showPreview = true;
// 模擬API請(qǐng)求
setTimeout(() => {
alert('表單提交成功！');
}, 500);
},
getEducationLabel(value) {
const labels = {
'highschool': '高中',
'college': '大專(zhuān)',
'bachelor': '本科',
'master': '碩士',
'phd': '博士'
};
return labels[value] || '未選擇';
}
}
}
</script>
<style scoped>
.user-form {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
input.invalid, select.invalid, textarea.invalid {
border-color: #f44336;
}
.error-message {
color: #f44336;
font-size: 0.8em;
margin-top: 4px;
display: block;
}
.radio-group, .checkbox-group {
display: flex;
gap: 15px;
}
.radio-group label, .checkbox-group label {
font-weight: normal;
display: flex;
align-items: center;
gap: 5px;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button.disabled-btn {
background-color: #ccc;
cursor: not-allowed;
}
.preview-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.preview-card {
border: 1px solid #eee;
padding: 15px;
border-radius: 4px;
background-color: #f9f9f9;
}
</style>在這個(gè)案例中，我們：
- 使用 v-model 處理各種表單元素的雙向綁定，包括文本輸入、單選按鈕、復(fù)選框、下拉列表和文本區(qū)域
- 使用 v-bind 綁定 id、class、disabled 等屬性
- 結(jié)合使用 v-model 修飾符（.trim, .lazy）優(yōu)化表單處理
- 實(shí)現(xiàn)了表單驗(yàn)證和動(dòng)態(tài)反饋
- 在預(yù)覽區(qū)域使用單向綁定展示用戶輸入的信息
這個(gè)例子展示了如何根據(jù)不同的場(chǎng)景選擇合適的綁定方式，以及如何將它們有機(jī)結(jié)合起來(lái)，構(gòu)建一個(gè)功能完整、用戶體驗(yàn)良好的表單組件。
六、總結(jié)與思考
Vue 的數(shù)據(jù)綁定機(jī)制是其核心優(yōu)勢(shì)之一，通過(guò) v-bind 實(shí)現(xiàn)的單向綁定和 v-model 實(shí)現(xiàn)的雙向綁定，為開(kāi)發(fā)者提供了靈活而高效的工具來(lái)處理數(shù)據(jù)與視圖的關(guān)系。
單向綁定（v-bind）適用于大多數(shù)場(chǎng)景，特別是展示性?xún)?nèi)容和組件通信，它提供了可預(yù)測(cè)的數(shù)據(jù)流和更好的性能。雙向綁定（v-model）則在表單處理中大放異彩，通過(guò)簡(jiǎn)化代碼大幅提高開(kāi)發(fā)效率。
理解這兩種綁定方式的工作原理、使用場(chǎng)景和優(yōu)缺點(diǎn)，對(duì)于編寫(xiě)高質(zhì)量的 Vue 代碼至關(guān)重要。在實(shí)際開(kāi)發(fā)中，我們應(yīng)該根據(jù)具體需求靈活選擇合適的綁定方式，而不是固守一種模式。
隨著 Vue 框架的不斷發(fā)展，數(shù)據(jù)綁定機(jī)制也在持續(xù)優(yōu)化，特別是 Vue 3 中引入的 Composition API，為處理復(fù)雜場(chǎng)景下的數(shù)據(jù)綁定提供了新的思路和工具。作為開(kāi)發(fā)者，我們需要不斷學(xué)習(xí)和實(shí)踐，才能充分發(fā)揮 Vue 數(shù)據(jù)綁定的威力，構(gòu)建出更加優(yōu)秀的前端應(yīng)用。
希望本文能幫助你深入理解 Vue 的數(shù)據(jù)綁定機(jī)制，在實(shí)際項(xiàng)目中運(yùn)用自如，編寫(xiě)出更優(yōu)雅、更高效的 Vue 代碼！
到此這篇關(guān)于Vue 數(shù)據(jù)綁定深入淺出：從 v-bind 到 v-model 的實(shí)戰(zhàn)指南的文章就介紹到這了,更多相關(guān)vue v-bind 到 v-model 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中簡(jiǎn)單使用Mock.js方法實(shí)例分析
這篇文章主要介紹了Vue3中簡(jiǎn)單使用Mock.js方法,mock.js在模擬后端接口數(shù)據(jù)響應(yīng)與協(xié)調(diào)統(tǒng)一前后端開(kāi)發(fā)接口規(guī)范方面有著重要的應(yīng)用,需要的朋友可以參考下2023-04-04
vue 數(shù)據(jù)遍歷篩選 過(guò)濾 排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過(guò)濾 排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue?3引入了Composition?API，這是一套新的API用于編寫(xiě)組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下2023-02-02
vue keep-alive的簡(jiǎn)單總結(jié)
這篇文章主要介紹了vue中的keep-alive的相關(guān)資料，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue3 中 Lottie動(dòng)畫(huà)庫(kù)的使用指南
Lottie 是 Vue3 項(xiàng)目中實(shí)現(xiàn)高品質(zhì)動(dòng)畫(huà)的最佳選擇之一,通過(guò)封裝通用組件可快速集成到項(xiàng)目中,結(jié)合其豐富的 API 能實(shí)現(xiàn)靈活的交互控制,本文來(lái)介紹一下Lottie動(dòng)畫(huà)庫(kù)的使用,通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
這篇文章主要介紹了詳解如何在vue-cli中使用vuex，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue router自動(dòng)判斷左右翻頁(yè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果
最近公司項(xiàng)目比較少終于有空來(lái)記錄一下自己對(duì)vue-router的一些小小的使用心得，本文給大家分享vue router自動(dòng)判斷左右翻頁(yè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果，感興趣的朋友一起看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue封裝全局過(guò)濾器的方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹的是Vue組件間的通信方式，本文將系統(tǒng)的介紹了幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2023-04-04
下面小編就為大家分享一篇基于Vue2.X的路由和鉤子函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02