指令分類

指令（Directives），是vue為開(kāi)發(fā)者提供的 模板語(yǔ)法 ，用于輔助開(kāi)發(fā)者渲染頁(yè)面的基本結(jié)構(gòu)

所用到的數(shù)據(jù)定義在實(shí)例的 data 中，事件定義在實(shí)例的 methods 中

• 內(nèi)容渲染指令：輔助開(kāi)發(fā)者渲染DOM元素的文本內(nèi)容
• 屬性綁定指令：輔助開(kāi)發(fā)者為元素的屬性動(dòng)態(tài)綁定屬性值
• 事件綁定指令：輔助開(kāi)發(fā)者為元素綁定事件
• 雙向綁定指令：輔助開(kāi)發(fā)者在不操作DOM的前提下，快速獲取表單數(shù)據(jù)（數(shù)據(jù)源的變化會(huì)同步到頁(yè)面上，頁(yè)面上的變化也會(huì)同步到數(shù)據(jù)源中）
• 條件渲染指令：輔助開(kāi)發(fā)者按需控制DOM的顯示與隱藏
• 列表渲染指令：輔助開(kāi)發(fā)者基于一個(gè)數(shù)組來(lái)循環(huán)渲染一個(gè)列表結(jié)構(gòu)

一、內(nèi)容渲染指令

v-text

只能渲染純文本內(nèi)容，會(huì)覆蓋 標(biāo)簽內(nèi)部原本的內(nèi)容

<p v-text="gender">性別</p>
復(fù)制代碼

{{ }} 插值表達(dá)式

只能渲染純文本內(nèi)容，不會(huì)覆蓋 標(biāo)簽內(nèi)部原本的內(nèi)容

<p>性別：{{ gender }}</p> 
復(fù)制代碼

v-html

能將帶標(biāo)簽的字符串渲染成html內(nèi)容，會(huì)覆蓋 標(biāo)簽內(nèi)部原本的內(nèi)容

<p v-html="info">該內(nèi)容會(huì)被覆蓋</p> <!-- info可以定義為html語(yǔ)句 -->
復(fù)制代碼

二、屬性綁定指令

v-bind：或：

為元素的屬性 動(dòng)態(tài) 綁定屬性值

<input v-bind:placeholder="tips"> <!--兩種寫法都可以-->
<input :placeholder="tips"> <!--兩種寫法都可以-->
復(fù)制代碼

注意：插值表達(dá)式 和 v-bind 還支持JAVAscript表達(dá)式的運(yùn)算

{{ 1 + 2 }}  //一元運(yùn)算
{{ ok ? 'YES' : 'NO'}}  //三元運(yùn)算
{{ message.split('').reverse().join('') }}  //字符串的反轉(zhuǎn)
復(fù)制代碼

<div :id="'list-' + id"></div>  <!--字符串和變量的拼接-->
復(fù)制代碼

三、事件綁定指令

v-on：或@

為元素綁定事件

<button v-on:click="add">+1</button> <!--兩種寫法都可以-->
<button @click="add">+1</button> <!--兩種寫法都可以-->
-----------------------------------------------------------
<script>
    //創(chuàng)建vue的實(shí)例對(duì)象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相當(dāng)于vm.count ++;
            }
        }
    })
</script>
復(fù)制代碼

傳參

• 沒(méi)有傳參：則會(huì)有默認(rèn)的形參event，它是一個(gè)對(duì)象，里面的target屬性指向的是當(dāng)前綁定事件的DOM元素
• 傳一個(gè)參：event則會(huì)被覆蓋，為了能用自己傳的參又能保留event，則可以手動(dòng)再傳一個(gè)實(shí)參$event，形參隨意

<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //創(chuàng)建vue的實(shí)例對(duì)象
    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>
復(fù)制代碼

事件修飾符

只要是事件，就能使用的修飾符，以下列舉5個(gè)常用的

<!--舉個(gè)例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳轉(zhuǎn)到百度</button>
復(fù)制代碼

按鍵修飾符

只能在觸發(fā)鍵盤事件時(shí)，使用的修飾符，以下列舉2個(gè)常用的

<!--舉個(gè)例子-->
<!--keyup是事件名稱     .esc是按鍵修飾符     clearInput是事件處理函數(shù)-->
<input type="text" @keyup.esc="clearInput">
復(fù)制代碼

四、雙向綁定指令

v-model

快速獲取表單數(shù)據(jù)（只應(yīng)用于表單元素，如：input、textarea、select）

<input type="text" v-model="username">
復(fù)制代碼

<select v-model="city">
    <option value="">請(qǐng)選擇城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">廣州</option>
</select>
復(fù)制代碼

專屬修飾符

只能給v-model使用的修飾符

<!--舉個(gè)例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>
復(fù)制代碼

五、條件渲染指令

v-show

控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動(dòng)態(tài)添加/移除display：none樣式 ，一般用于需頻繁切換

<p v-show="flag">這是被 v-show 控制的元素</p>
復(fù)制代碼

v-if

控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動(dòng)態(tài)創(chuàng)建/移除元素 ，一般用于默認(rèn)不展示且展示較少

<p v-if="flag">這是被 v-if 控制的元素</p>
復(fù)制代碼

v-else-if

配合 v-if 指令一起使用，否則將不會(huì)被識(shí)別

<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>
復(fù)制代碼

六、列表渲染指令

v-for

基于一個(gè)數(shù)組來(lái)循環(huán)渲染一個(gè)列表結(jié)構(gòu)，它有特定的語(yǔ)法結(jié)構(gòu) v-for="item in items"

• item是 被循環(huán)的每一項(xiàng) ，名字隨意
• items是 待循環(huán)的數(shù)組 ，名字隨意

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性別</th>
    </thead>

    <tbody>
        <!-- v-for還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。語(yǔ)法格式為(item,index)in items -->
        <!-- 注意：item和index都是形參，可以根據(jù)需要進(jìn)行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素訪問(wèn)外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引時(shí)，才寫這第二個(gè)參數(shù) -->
        <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>
    //創(chuàng)建vue的實(shí)例對(duì)象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:'張三', gender:'男' },
                { id: 2, name:'李四', gender:'女' },
                { id: 3, name:'王五', gender:'男' }
            ]
        }
    })
</script>
復(fù)制代碼

注意：在.vue文件中，只要用到 v-for指令 ，一定要綁定一個(gè) :key 屬性

• key 的屬性值盡量為 id，為 index 則無(wú)意義（因?yàn)閕ndex不和內(nèi)容有一個(gè)強(qiáng)制的綁定關(guān)系）
• key 的屬性值只能是 字符串/數(shù)字 類型，否則報(bào)錯(cuò)
• key 的屬性值必須具有唯一性（不重復(fù) 且 內(nèi)容和值有一個(gè)強(qiáng)制的綁定關(guān)系）

<tr v-for="(item,index) in list" :key="item.id">

作者：用戶2031777005900
鏈接：
https://juejin.cn/post/7105273755168931877