溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue中的調(diào)試工具和指令怎么使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue中的調(diào)試工具和指令怎么使用”吧！
點(diǎn)擊 Chrome 瀏覽器右上角三小點(diǎn)的按鈕，選擇更多工具 → 擴(kuò)展程序 → Vue.js devtools 詳細(xì)信息，并勾選如下的兩個(gè)選項(xiàng)：
在瀏覽器中訪問一個(gè)使用了 vue 的頁(yè)面，打開瀏覽器的開發(fā)者工具，切換到 Vue 面板，即可使用 vue-devtools 調(diào)試當(dāng)前的頁(yè)面。
1?? 指令（Directives）是 vue 為開發(fā)者提供的模板語(yǔ)法，用于輔助開發(fā)者渲染頁(yè)面的基本結(jié)構(gòu)。
2?? vue 中的指令按照不同的用途可以分為如下 6 大類：
內(nèi)容渲染指令
屬性綁定指令
事件綁定指令
雙向綁定指令
條件渲染指令
列表渲染指令
?溫馨提醒?：指令是 vue 開發(fā)中最基礎(chǔ)、最常用、最簡(jiǎn)單的知識(shí)點(diǎn)。
內(nèi)容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有如下 3 個(gè)：
v-text
{
{ }}
v-html
代碼演示如下：
?溫馨提醒?：v-text 指令會(huì)覆蓋元素內(nèi)默認(rèn)的值。
vue 提供的 {{ }} 語(yǔ)法，專門用來解決 v-text 會(huì)覆蓋默認(rèn)文本內(nèi)容的問題。這種 {{ }} 語(yǔ)法的專業(yè)名稱是插值表達(dá)式（英文名為：Mustache）。
代碼演示如下：
?溫馨提醒?：相對(duì)于 v-text 指令來說，插值表達(dá)式在開發(fā)中更常用一些！因?yàn)樗粫?huì)覆蓋元素中默認(rèn)的文本內(nèi)容。
v-text 指令和插值表達(dá)式只能渲染純文本內(nèi)容。如果要把包含 HTML 標(biāo)簽的字符串渲染為頁(yè)面的 HTML 元素，則需要用到 v-html 這個(gè)指令。
代碼演示如下：
<!-- 假設(shè)data 中定義了名為 desc 的數(shù)據(jù)，數(shù)據(jù)的值為包含 HTML 標(biāo)簽的字符串 --> <!-- info: '<h5 style="color: red; font-weight: bold;">歡迎大家來學(xué)習(xí) vue.js</h5>' --> <p v-html="info"></p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<p v-text="username"></p>
<p v-text="gender">性別：</p>
<hr>
<p>姓名：{{ username }}</p>
<p>性別：{{ gender }}</p>
<hr>
<div v-text="info"></div>
<div>{{ info }}</div>
<div v-html="info"></div>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
username: 'battledao',
gender: '男',
info: '<h5 style="color: red; font-weight: bold;">歡迎大家來學(xué)習(xí) vue.js</h5>'
}
})
</script>
</body>
</html>如果需要為元素的屬性動(dòng)態(tài)綁定屬性值，則需要用到 v-bind 屬性綁定指令。用法示例如下：
由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡(jiǎn)寫形式（簡(jiǎn)寫為英文的 : ）。
在 vue 提供的模板渲染語(yǔ)法中，除了支持綁定簡(jiǎn)單的數(shù)據(jù)值之外，還支持 Javascript 表達(dá)式的運(yùn)算，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<input type="text" :placeholder="tips">
<hr>
<!-- vue 規(guī)定 v-bind: 指令可以簡(jiǎn)寫為 : -->
<img :src="photo" alt="" style="width: 150px;">
<hr>
<div>1 + 2 的結(jié)果是：{{ 1 + 2 }}</div>
<div>{{ tips }} 反轉(zhuǎn)的結(jié)果是：{{ tips.split('').reverse().join('') }}</div>
<div :title="'box' + index">這是一個(gè) div</div>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
tips: '請(qǐng)輸入用戶名',
photo: 'https://cn.vuejs.org/images/logo.svg',
index: 3
}
})
</script>
</body>
</html>1?? vue 提供了 v-on 事件綁定指令，用來輔助程序員為 DOM 元素綁定事件監(jiān)聽。語(yǔ)法格式如下：
?溫馨提醒?：原生 DOM 對(duì)象有 onclick、oninput、onkeyup 等原生事件，替換為 vue 的事件綁定形式后，分別為：v-on:click、v-on:input、v-on:keyup
2?? 通過 v-on 綁定的事件處理函數(shù)，需要在 methods 節(jié)點(diǎn)中進(jìn)行聲明：
由于 v-on 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡(jiǎn)寫形式（簡(jiǎn)寫為英文的 @ ）。
在原生的 DOM 事件綁定中，可以在事件處理函數(shù)的形參處，接收事件參數(shù)對(duì)象 event。同理，在 v-on 指令（簡(jiǎn)寫為 @ ）所綁定的事件處理函數(shù)中，同樣可以接收到事件參數(shù)對(duì)象 event，示例代碼如下：
在使用 v-on 指令綁定事件時(shí)，可以使用 ( ) 進(jìn)行傳參，示例代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<p>count 的值是：{{ count }}</p>
<!-- 在綁定事件處理函數(shù)的時(shí)候，可以使用 () 傳遞參數(shù) -->
<!-- v-on: 指令可以被簡(jiǎn)寫為 @ -->
<button @click="add(1)">+1</button>
<button @click="sub">-1</button>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
count: 0
},
// methods 的作用，就是定義事件的處理函數(shù)
methods: {
add(n) {
// 在 methods 處理函數(shù)中，this 就是 new 出來的 vm 實(shí)例對(duì)象
// console.log(vm === this)
console.log(vm)
// vm.count += 1
this.count += n
},
sub() {
// console.log('觸發(fā)了 sub 處理函數(shù)')
this.count -= 1
}
}
})
</script>
</body>
</html>$event 是 vue 提供的特殊變量，用來表示原生的事件參數(shù)對(duì)象 event。$event 可以解決事件參數(shù)對(duì)象event被覆蓋的問題。示例用法如下：
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<p>count 的值是：{{ count }}</p>
<!-- 如果 count 是偶數(shù)，則 按鈕背景變成紅色，否則，取消背景顏色 -->
<!-- <button @click="add">+N</button> -->
<!-- vue 提供了內(nèi)置變量，名字叫做 $event，它就是原生 DOM 的事件對(duì)象 e -->
<button @click="add($event, 1)">+N</button>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
count: 0
},
methods: {
add(e, n) {
this.count += n
console.log(e)
// 判斷 this.count 的值是否為偶數(shù)
if (this.count % 2 === 0) {
// 偶數(shù)
e.target.style.backgroundColor = 'red'
} else {
// 奇數(shù)
e.target.style.backgroundColor = ''
}
}
},
})
</script>
</body>
</html>在事件處理函數(shù)中調(diào)用event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對(duì)事件的觸發(fā)進(jìn)行控制。常用的 5 個(gè)事件修飾符如下：
| 事件修飾符 | 說明 |
|---|---|
.prevent | 阻止默認(rèn)行為（例如：阻止 a 連接的跳轉(zhuǎn)、阻止表單的提交等） |
.stop | 阻止事件冒泡 |
| .capture | 以捕獲模式觸發(fā)當(dāng)前的事件處理函數(shù) |
| .once | 綁定的事件只觸發(fā)1次 |
| .self | 只有在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)事件處理函數(shù) |
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<a href="http://www.baidu.com" @click.prevent="show">跳轉(zhuǎn)到百度首頁(yè)</a>
<hr>
<div style="height: 150px; background-color: pink; padding-left: 100px; line-height: 150px;"
@click="divHandler">
<button @click.stop="btnHandler">按鈕</button>
</div>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {},
methods: {
show() {
console.log('點(diǎn)擊了 a 鏈接')
},
btnHandler() {
console.log('btnHandler')
},
divHandler() {
console.log('divHandler')
}
},
})
</script>
</body>
</html>在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要判斷詳細(xì)的按鍵。此時(shí)，可以為鍵盤相關(guān)的事件添加按鍵修飾符。
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {},
methods: {
clearInput(e) {
console.log('觸發(fā)了 clearInput 方法')
e.target.value = ''
},
commitAjax() {
console.log('觸發(fā)了 commitAjax 方法')
}
},
})
</script>
</body>
</html>vue 提供了 v-model 雙向數(shù)據(jù)綁定指令，用來輔助開發(fā)者在不操作 DOM 的前提下，快速獲取表單的數(shù)據(jù)。
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們?cè)诎褦?shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<p>用戶的名字是：{{ username }}</p>
<input type="text" v-model="username">
<hr>
<input type="text" :value="username">
<hr>
<select v-model="city">
<option value="">請(qǐng)選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
username: 'battledao',
city: '2'
}
})
</script>
</body>
</html>為了方便對(duì)用戶輸入的內(nèi)容進(jìn)行處理，vue 為 v-model 指令提供了 3 個(gè)修飾符，分別是：
| 修飾符 | 作用 | 示例 |
|---|---|---|
| .number | 自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型 | < input v-model.number=“age” /> |
| .trim | 自動(dòng)過濾用戶輸入的首尾空白字符 | < input v-model.trim=“msg” /> |
| .lazy | 在“change”時(shí)而非“input”時(shí)更新 | < input v-model.lazy=“msg” /> |
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們把數(shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}</span>
<hr>
<input type="text" v-model.trim="username">
<button @click="showName">獲取用戶名</button>
<hr>
<input type="text" v-model.lazy="username">
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
username: 'battledao',
n1: 1,
n2: 2
},
methods: {
showName() {
console.log(`用戶名是："${this.username}"`)
}
},
})
</script>
</body>
</html>條件渲染指令用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個(gè)，分別是：
v-if
v-show
代碼演示如下：
實(shí)現(xiàn)原理不同：
v-if 指令會(huì)動(dòng)態(tài)地創(chuàng)建或移除DOM 元素，從而控制元素在頁(yè)面上的顯示與隱藏；
v-show 指令會(huì)動(dòng)態(tài)為元素添加或移除 style=“display: none;” 樣式，從而控制元素的顯示與隱藏；
性能消耗不同：v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此：
如果需要非常頻繁地切換，則使用 v-show 較好；
如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好；
v-if 可以單獨(dú)使用，或配合 v-else 指令一起使用：
?溫馨提醒?：v-else 指令必須配合 v-if 指令一起使用，否則它將不會(huì)被識(shí)別！
v-else-if 指令，顧名思義，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：
?溫馨提醒?：v-else-if 指令必須配合 v-if 指令一起使用，否則它將不會(huì)被識(shí)別！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們把數(shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<p v-if="flag">這是被 v-if 控制的元素</p>
<p v-show="flag">這是被 v-show 控制的元素</p>
<hr>
<div v-if="type === 'A'">優(yōu)秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
// 如果 flag 為 true，則顯示被控制的元素；如果為 false 則隱藏被控制的元素
flag: false,
type: 'A'
}
})
</script>
</body>
</html>vue 提供了 v-for 列表渲染指令，用來輔助開發(fā)者基于一個(gè)數(shù)組來循環(huán)渲染一個(gè)列表結(jié)構(gòu)。v-for 指令需要使用 item in items 形式的特殊語(yǔ)法，其中：
items 是待循環(huán)的數(shù)組；
item 是被循環(huán)的每一項(xiàng)；
代碼演示如下：
v-for 指令還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。語(yǔ)法格式為 (item, index) in items，示例代碼如下：
?溫馨提醒?：v-for 指令中的 item 項(xiàng)和 index 索引都是形參，可以根據(jù)需要進(jìn)行重命名。例如 (user, i) in userlist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<!-- 希望 Vue 能夠控制下面的這個(gè) div，幫我們把數(shù)據(jù)填充到 div 內(nèi)部 -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>Id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- 官方建議：只要用到了 v-for 指令，那么一定要綁定一個(gè) :key 屬性 -->
<!-- 而且，盡量把 id 作為 key 的值 -->
<!-- 官方對(duì) key 的值類型，是有要求的：字符串或數(shù)字類型 -->
<!-- key 的值是千萬不能重復(fù)的，否則會(huì)終端報(bào)錯(cuò)：Duplicate keys detected -->
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
</tr>
</tbody>
</table>
</div>
<!-- 1. 導(dǎo)入 Vue 的庫(kù)文件，在 window 全局就有了 Vue 這個(gè)構(gòu)造函數(shù) -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 創(chuàng)建 Vue 的實(shí)例對(duì)象 -->
<script>
// 創(chuàng)建 Vue 的實(shí)例對(duì)象
const vm = new Vue({
// el 屬性是固定的寫法，表示當(dāng)前 vm 實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
el: '#app',
// data 對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
data: {
list: [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '張三' },
]
}
})
</script>
</body>
</html>1?? 當(dāng)列表的數(shù)據(jù)變化時(shí)，默認(rèn)情況下，vue 會(huì)盡可能的復(fù)用已存在的DOM 元素，從而提升渲染的性能。但這種默認(rèn)的性能優(yōu)化策略，會(huì)導(dǎo)致有狀態(tài)的列表無法被正確更新。
2?? 為了給 vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能。此時(shí)，需要為每項(xiàng)提供一個(gè)唯一的 key 屬性：
完整代碼演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在頁(yè)面中聲明一個(gè)將要被 vue 所控制的 DOM 區(qū)域 -->
<div id="app">
<!-- 添加用戶的區(qū)域 -->
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用戶列表區(qū)域 -->
<ul>
<li v-for="(user, index) in userlist" :key="user.id">
<input type="checkbox" />
姓名：{{user.name}}
</li>
</ul>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
// 用戶列表
userlist: [
{ id: 1, name: 'zs' },
{ id: 2, name: 'ls' }
],
// 輸入的用戶名
name: '',
// 下一個(gè)可用的 id 值
nextId: 3
},
methods: {
// 點(diǎn)擊了添加按鈕
addNewUser() {
this.userlist.unshift({ id: this.nextId, name: this.name })
this.name = ''
this.nextId++
}
},
})
</script>
</body>
</html>key 的值只能是字符串或數(shù)字類型
key 的值必須具有唯一性（即：key 的值不能重復(fù)）
建議把數(shù)據(jù)項(xiàng) id 屬性的值作為 key 的值（因?yàn)?id 屬性的值具有唯一性）
使用 index 的值當(dāng)作 key 的值沒有任何意義（因?yàn)閕ndex 的值不具有唯一性）
建議使用 v-for 指令時(shí)一定要指定 key 的值（既提升性能、又防止列表狀態(tài)紊亂）
感謝各位的閱讀，以上就是“Vue中的調(diào)試工具和指令怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue中的調(diào)試工具和指令怎么使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼