深入了解Vue中的調試工具和指令
- 青灯夜游轉載
- 2022-05-26 11:11:012968瀏覽
這篇文章帶大家繼續學習Vue，詳細介紹一下Vue入門必備知識中的調試工具和指令，希望對大家有幫助！
vue 的偵錯工具
#（1）安裝vue-devtools 偵錯工具
#vue 官方提供的vue-devtools 偵錯工具，能夠方便開發者對vue 專案進行偵錯與開發。 （學習影片分享：vue影片教學）
#1️⃣ Chrome 瀏覽器線上安裝vue-devtools：
- v除錯工具：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd - vue 3.x 偵錯工具：
## https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
2️⃣ #如果無法使用Chrome 瀏覽器在線安裝，下面我也給予兩個資源包，點選位址即可點選立即下載囉! ! !
- vue 2.x 偵錯工具：
#https:// download.csdn.net/download/battledao/85047060 - vue 3.x 偵錯工具：
https://download.csdn.net/download/battledao/85047073
?溫馨提醒?：vue2 和vue3 的瀏覽器偵錯工具不能交叉使用！
（2）配置Chrome 瀏覽器中的vue-devtools
點擊Chrome 瀏覽器右上角三小點的按鈕，選擇更多工具→ 擴充功能→ Vue.js devtools 詳細信息，並勾選如下的兩個選項：
（3）使用vue-devtools 偵錯vue 頁面
在瀏覽器中造訪一個使用了vue 的頁面，開啟瀏覽器的開發者工具，切換到Vue 面板，即可使用vue-devtools 偵錯目前的頁面。
四、Vue 指令
（1）指令的概念
1️⃣ 指令（Directives）是vue 為開發者提供的範本語法，用於輔助開發者渲染頁面的基本結構。
2️⃣ vue 中的指令依照不同的用途可以分為如下6 大類：
- 內容渲染指令
- #屬性綁定指令
- 事件綁定指令
- 雙向綁定指令
- 條件渲染指令
- 清單渲染指令
#?溫馨提醒?：指令是vue 開發中最基礎、最常用、最簡單的知識點。
（2）內容渲染指令
內容渲染指令用來輔助開發者渲染DOM 元素的文字內容 。常用的內容渲染指令有如下3 個：
- v-text
- {<!-- -->{ }}
- v-html
#2.1 v-text
程式碼示範如下：
?溫馨提醒?：v-text 指令會覆寫元素內預設的值。
2.2 {{ }} 語法
#vue 提供的{<!-- -->{ }} 語法，專門用來解決v-text 會覆蓋預設文字內容的問題。這種 {<!-- -->{ }} 語法的專業名稱是插值表達式（英文名為：Mustache）。
程式碼示範如下：
?溫馨提醒?：相對於v-text 指令來說，插值表達式在開發中更常用一些！ 因為它不會覆蓋元素中預設的文字內容。
2.3 v-html
v-text 指令和插值表達式只能渲染純文字內容。如果要把包含 HTML 標籤的字串渲染為頁面的 HTML 元素，則需要用到 v-html 這個指令。
程式碼示範如下：
<!-- 假设data 中定义了名为 desc 的数据，数据的值为包含 HTML 标签的字符串 --> <!-- info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>' --> <p v-html="info"></p>
2.4 內容渲染指令- 完整程式碼示範
<!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 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<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. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'battledao',
gender: '男',
info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习 vue.js</h4>'
}
})
</script>
</body>
</html>（3）屬性綁定指令
##如果需要為元素的屬性動態綁定屬性值，則需要用到v-bind 屬性綁定指令。用法範例如下：
3.1 屬性綁定指令的簡寫形式
由於v-bind 指令在開發中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的: ）。
3.2 使用Javascript 表達式
在vue 提供的範本渲染語法中，除了支援綁定簡單的資料值之外，也支援Javascript 運算式的運算，例如：
#3.3 屬性綁定指令- 完整程式碼示範<!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 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<div id="app">
<input type="text" :placeholder="tips">
<hr>
<!-- vue 规定 v-bind: 指令可以简写为 : -->
<img :src="photo" alt="" style="width: 150px;">
<hr>
<div>1 + 2 的结果是：{{ 1 + 2 }}</div>
<div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</div>
<div :title="'box' + index">这是一个 div</div>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
tips: '请输入用户名',
photo: 'https://cn.vuejs.org/images/logo.svg',
index: 3
}
})
</script>
</body>
</html>
（4）事件綁定指令
1️⃣ vue 提供了v-on 事件綁定指令，用來輔助程式設計師為DOM 元素綁定事件監聽。語法格式如下：
v-on 綁定的事件處理函數，需要在methods 節點中進行宣告：
4.1 事件綁定的簡寫形式
由於v-on 指令在開發中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的@ ）。
4.2 事件參數物件
在原生的DOM 事件綁定中，可以在事件處理函數的形參處，接收事件參數物件event。同理，在v-on 指令（簡寫為@ ）所綁定的事件處理函數中，同樣可以接收到事件參數物件event，範例程式碼如下：
4.3 綁定事件並傳參
在使用v-on 指令綁定定事件時，可以使用( ) 進行傳參，範例程式碼如下：
4.4 事件綁定指令- 完整程式碼示範<!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 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<div id="app">
<p>count 的值是：{{ count }}</p>
<!-- 在绑定事件处理函数的时候，可以使用 () 传递参数 -->
<!-- v-on: 指令可以被简写为 @ -->
<button @click="add(1)">+1</button>
<button @click="sub">-1</button>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
count: 0
},
// methods 的作用，就是定义事件的处理函数
methods: {
add(n) {
// 在 methods 处理函数中，this 就是 new 出来的 vm 实例对象
// console.log(vm === this)
console.log(vm)
// vm.count += 1
this.count += n
},
sub() {
// console.log('触发了 sub 处理函数')
this.count -= 1
}
}
})
</script>
</body>
</html>
4.5 $event
$event 是vue 提供的特殊變數，用來表示原生的事件參數物件event。 $event 可以解決事件參數物件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 能够控制下面的这个 div，帮我们在把数据填充到 div 内部 -->
<div id="app">
<p>count 的值是：{{ count }}</p>
<!-- 如果 count 是偶数，则 按钮背景变成红色，否则，取消背景颜色 -->
<!-- <button @click="add">+N</button> -->
<!-- vue 提供了内置变量，名字叫做 $event，它就是原生 DOM 的事件对象 e -->
<button @click="add($event, 1)">+N</button>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
count: 0
},
methods: {
add(e, n) {
this.count += n
console.log(e)
// 判断 this.count 的值是否为偶数
if (this.count % 2 === 0) {
// 偶数
e.target.style.backgroundColor = 'red'
} else {
// 奇数
e.target.style.backgroundColor = ''
}
}
},
})
</script>
</body>
</html>
4.6 事件修飾符
在事件處理函數中呼叫event.preventDefault () 或event.stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程式設計師更方便的對事件的觸發進行控制。常用的5 個事件修飾符如下：
#.prevent |
阻止預設行為（例如：阻止a 連線的跳轉、封鎖表單的提交等） | |
.stop |
阻止事件冒泡 | |
| 以捕捉模式觸發目前的事件處理函數 | ||
| 綁定的事件只觸發1次 | ||
| 只有在event.target 是當前元素本身時觸發事件處理函數 |
| 修饰符 | 作用 | 示例 |
|---|---|---|
| .number | 自动将用户的输入值转为数值类型 | 212c9b820fea7d60ce59063860d96592 |
| .trim | 自动过滤用户输入的首尾空白字符 | 76f3c4d9861826f22bb262479bd6be1b |
| .lazy | 在“change”时而非“input”时更新 | fc12e6c6f28d67b3056d94049ec9c49a |
完整代码演示如下：
<!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 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<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. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'battledao',
n1: 1,
n2: 2
},
methods: {
showName() {
console.log(`用户名是："${this.username}"`)
}
},
})
</script>
</body>
</html>（6）条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
- v-if
- v-show
代码演示如下：
6.1 v-if 和 v-show 的区别（面试常问）
实现原理不同：
-
v-if指令会动态地创建或移除DOM 元素，从而控制元素在页面上的显示与隐藏； -
v-show指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；
性能消耗不同：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：
- 如果需要非常频繁地切换，则使用 v-show 较好；
- 如果在运行时条件很少改变，则使用 v-if 较好；
6.2 v-else
v-if 可以单独使用，或配合 v-else 指令一起使用：
?温馨提醒?：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
6.3 v-else-if
v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
?温馨提醒?：v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！
6.4 条件渲染指令 - 完整代码演示
<!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 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<p v-if="flag">这是被 v-if 控制的元素</p>
<p v-show="flag">这是被 v-show 控制的元素</p>
<hr>
<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
<!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
// 如果 flag 为 true，则显示被控制的元素；如果为 false 则隐藏被控制的元素
flag: false,
type: 'A'
}
})
</script>
</body>
</html>（7）列表渲染指令
vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法，其中：
- items 是待循环的数组；
- item 是被循环的每一项；
代码演示如下：
7.1 v-for 中的索引
v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：
?温馨提醒?：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist
7.2 列表渲染指令 - 完整代码演示
<!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 能够控制下面的这个 div，帮我们把数据填充到 div 内部 -->
<div id="app">
<table class="table table-bordered table-hover table-striped">
<thead>
<th>索引</th>
<th>Id</th>
<th>姓名</th>
</thead>
<tbody>
<!-- 官方建议：只要用到了 v-for 指令，那么一定要绑定一个 :key 属性 -->
<!-- 而且，尽量把 id 作为 key 的值 -->
<!-- 官方对 key 的值类型，是有要求的：字符串或数字类型 -->
<!-- key 的值是千万不能重复的，否则会终端报错：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. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
<script src="./lib/vue-2.6.12.js"></script>
<!-- 2. 创建 Vue 的实例对象 -->
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
// el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '张三' },
]
}
})
</script>
</body>
</html>7.3 使用 key 维护列表的状态
1️⃣ 当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。
2️⃣ 为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 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>
<!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
<div id="app">
<!-- 添加用户的区域 -->
<div>
<input type="text" v-model="name">
<button @click="addNewUser">添加</button>
</div>
<!-- 用户列表区域 -->
<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: '',
// 下一个可用的 id 值
nextId: 3
},
methods: {
// 点击了添加按钮
addNewUser() {
this.userlist.unshift({ id: this.nextId, name: this.name })
this.name = ''
this.nextId++
}
},
})
</script>
</body>
</html>7.4 key 的注意事项
key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为index 的值不具有唯一性）
建議使用v-for 指令時一定要指定key 的值（既提升效能、又防止清單狀態紊亂）
以上是深入了解Vue中的調試工具和指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！
JavaScript chrome vue.js html if for 字符串 循环 .net 值类型 Event 数字类型 形参 JS number 对象 事件 dom display input 键盘事件 https 性能优化
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除