指令分類
指令（Directives），是vue為開發者提供的 模板語法 ，用于輔助開發者渲染頁面的基本結構
所用到的數據定義在實例的 data 中，事件定義在實例的 methods 中
- 內容渲染指令：輔助開發者渲染DOM元素的文本內容
- 屬性綁定指令：輔助開發者為元素的屬性動態綁定屬性值
- 事件綁定指令：輔助開發者為元素綁定事件
- 雙向綁定指令：輔助開發者在不操作DOM的前提下，快速獲取表單數據（數據源的變化會同步到頁面上，頁面上的變化也會同步到數據源中）
- 條件渲染指令：輔助開發者按需控制DOM的顯示與隱藏
- 列表渲染指令：輔助開發者基于一個數組來循環渲染一個列表結構
一、內容渲染指令
v-text
只能渲染純文本內容，會覆蓋 標簽內部原本的內容
<p v-text="gender">性別</p>
復制代碼
{{ }} 插值表達式
只能渲染純文本內容，不會覆蓋 標簽內部原本的內容
<p>性別：{{ gender }}</p>
復制代碼
v-html
能將帶標簽的字符串渲染成html內容，會覆蓋 標簽內部原本的內容
<p v-html="info">該內容會被覆蓋</p> <!-- info可以定義為html語句 -->
復制代碼
二、屬性綁定指令
v-bind：或：
為元素的屬性 動態 綁定屬性值
<input v-bind:placeholder="tips"> <!--兩種寫法都可以-->
<input :placeholder="tips"> <!--兩種寫法都可以-->
復制代碼
注意：插值表達式 和 v-bind 還支持JAVAscript表達式的運算
{{ 1 + 2 }} //一元運算
{{ ok ? 'YES' : 'NO'}} //三元運算
{{ message.split('').reverse().join('') }} //字符串的反轉
復制代碼
<div :id="'list-' + id"></div> <!--字符串和變量的拼接-->
復制代碼
三、事件綁定指令
v-on：或@
為元素綁定事件
<button v-on:click="add">+1</button> <!--兩種寫法都可以-->
<button @click="add">+1</button> <!--兩種寫法都可以-->
-----------------------------------------------------------
<script>
//創建vue的實例對象
const vm = new Vue({
methods:{
add(){
this.count ++; //相當于vm.count ++;
}
}
})
</script>
復制代碼
傳參
- 沒有傳參：則會有默認的形參event，它是一個對象，里面的target屬性指向的是當前綁定事件的DOM元素
- 傳一個參：event則會被覆蓋，為了能用自己傳的參又能保留event，則可以手動再傳一個實參$event，形參隨意
<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
//創建vue的實例對象
const vm = new Vue({
methods:{
add(n,event){
//修改
this.count +=n;
//判斷
if(this.count % 2 === 0)
event.target.style.color = 'red';
else
event.target.style.color = '';
}
}
})
</script>
復制代碼
事件修飾符
只要是事件，就能使用的修飾符，以下列舉5個常用的
|
事件修飾符 |
說明 |
|
.prevent |
阻止默認行為（例：阻止a鏈接的跳轉、阻止表單的提交） |
|
.stop |
阻止事件冒泡 |
|
.capture |
以捕獲模式觸發當前的事件處理函數 |
|
.once |
綁定的事件只觸發一次 |
|
.self |
只有在event.target是當前元素自身時觸發事件處理函數 |
<!--舉個例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳轉到百度</button>
復制代碼
按鍵修飾符
只能在觸發鍵盤事件時，使用的修飾符，以下列舉2個常用的
|
按鍵修飾符 |
說明 |
|
.esc |
按鍵盤esc鍵時 |
|
.enter |
按鍵盤enter鍵時 |
<!--舉個例子-->
<!--keyup是事件名稱 .esc是按鍵修飾符 clearInput是事件處理函數-->
<input type="text" @keyup.esc="clearInput">
復制代碼
四、雙向綁定指令
v-model
快速獲取表單數據（只應用于表單元素，如：input、textarea、select）
<input type="text" v-model="username">
復制代碼
<select v-model="city">
<option value="">請選擇城市</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
</select>
復制代碼
專屬修飾符
只能給v-model使用的修飾符
|
專屬修飾符 |
說明 |
|
.number |
自動將用戶輸入的值轉為數值類型 |
|
.trim |
自動過濾用戶輸入的首尾空白字符 |
|
.lazy |
在失去焦點時才自動更新數據（一般情況下都是實時更新的） |
<!--舉個例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>
復制代碼
五、條件渲染指令
v-show
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動態添加/移除display：none樣式 ，一般用于需頻繁切換
<p v-show="flag">這是被 v-show 控制的元素</p>
復制代碼
v-if
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動態創建/移除元素 ，一般用于默認不展示且展示較少
<p v-if="flag">這是被 v-if 控制的元素</p>
復制代碼
v-else-if
配合 v-if 指令一起使用，否則將不會被識別
<div v-if="type === 'A'">優秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
復制代碼
六、列表渲染指令
v-for
基于一個數組來循環渲染一個列表結構，它有特定的語法結構 v-for="item in items"
- item是 被循環的每一項 ，名字隨意
- items是 待循環的數組 ，名字隨意
<table>
<thead>
<th>索引</th>
<th>ID</th>
<th>姓名</th>
<th>性別</th>
</thead>
<tbody>
<!-- v-for還支持一個可選的第二個參數，即當前項的索引。語法格式為(item,index)in items -->
<!-- 注意：item和index都是形參，可以根據需要進行重命名，如：(user,i)in userlist -->
<!-- 注意：item和index除了可以被自己的子元素訪問外，自身也可以使用 -->
<!-- 注意：只有在需要用到索引時，才寫這第二個參數 -->
<tr v-for="(item,index) in list">
<td>{{ index }}</td>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
------------------------------------------------------------
<script>
//創建vue的實例對象
const vm = new Vue({
data: {
list: [
{ id: 1, name:'張三', gender:'男' },
{ id: 2, name:'李四', gender:'女' },
{ id: 3, name:'王五', gender:'男' }
]
}
})
</script>
復制代碼
注意：在.vue文件中，只要用到 v-for指令 ，一定要綁定一個 :key 屬性
- key 的屬性值盡量為 id，為 index 則無意義（因為index不和內容有一個強制的綁定關系）
- key 的屬性值只能是 字符串/數字 類型，否則報錯
- key 的屬性值必須具有唯一性（不重復 且 內容和值有一個強制的綁定關系）
<tr v-for="(item,index) in list" :key="item.id">
作者：用戶2031777005900
鏈接：
https://juejin.cn/post/7105273755168931877
