Vue常用內置指令有哪些

這篇文章主要介紹了Vue常用內置指令有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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常用內置指令有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue常用內置指令有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。