Vue指令入門之聊聊六大常用內建指令

指令分類

指令（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個常用的

<!--舉個例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳轉到百度</button>

按鍵修飾符

只能在觸發鍵盤事件時，使用的修飾符，以下列舉2個常用的

<!--舉個例子-->
<!--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使用的修飾符

<!--舉個例子-->
<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">

（學習視訊分享：、）

以上就是Vue指令入門之聊聊六大常用內建指令的詳細內容，更多請關注TW511.COM其它相關文章！