這篇文章主要介紹了Vue常用內(nèi)置指令有哪些的相關知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue常用內(nèi)置指令有哪些文章都會有所收獲，下面我們一起來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到馬尾網(wǎng)站設計與馬尾網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站設計、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋馬尾地區(qū)。

指令分類

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

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

• 內(nèi)容渲染指令：輔助開發(fā)者渲染DOM元素的文本內(nèi)容

• 屬性綁定指令：輔助開發(fā)者為元素的屬性動態(tài)綁定屬性值

• 事件綁定指令：輔助開發(fā)者為元素綁定事件

• 雙向綁定指令：輔助開發(fā)者在不操作DOM的前提下，快速獲取表單數(shù)據(jù)（數(shù)據(jù)源的變化會同步到頁面上，頁面上的變化也會同步到數(shù)據(jù)源中）

• 條件渲染指令：輔助開發(fā)者按需控制DOM的顯示與隱藏

• 列表渲染指令：輔助開發(fā)者基于一個數(shù)組來循環(huán)渲染一個列表結(jié)構

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

v-text

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

<p v-text="gender">性別</p>

{{ }} 插值表達式

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

<p>性別：{{ gender }}</p>

v-html

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

<p v-html="info">該內(nèi)容會被覆蓋</p> <!-- info可以定義為html語句 -->

二、屬性綁定指令

v-bind：或：

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

<input v-bind:placeholder="tips"> <!--兩種寫法都可以-->
<input :placeholder="tips"> <!--兩種寫法都可以-->

注意：插值表達式和 v-bind還支持javascript表達式的運算

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

<div :id="'list-' + id"></div>  <!--字符串和變量的拼接-->

三、事件綁定指令

v-on：或@

為元素綁定事件

<button v-on:click="add">+1</button> <!--兩種寫法都可以-->
<button @click="add">+1</button> <!--兩種寫法都可以-->
-----------------------------------------------------------
<script>
    //創(chuàng)建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>
    //創(chuàng)建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鏈接的跳轉(zhuǎn)、阻止表單的提交）
.stop	阻止事件冒泡
.capture	以捕獲模式觸發(fā)當前的事件處理函數(shù)
.once	綁定的事件只觸發(fā)一次
.self	只有在event.target是當前元素自身時觸發(fā)事件處理函數(shù)

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

按鍵修飾符

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

按鍵修飾符	說明
.esc	按鍵盤esc鍵時
.enter	按鍵盤enter鍵時

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

四、雙向綁定指令

v-model

快速獲取表單數(shù)據(jù)（只應用于表單元素，如：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	自動將用戶輸入的值轉(zhuǎn)為數(shù)值類型
.trim	自動過濾用戶輸入的首尾空白字符
.lazy	在失去焦點時才自動更新數(shù)據(jù)（一般情況下都是實時更新的）

<!--舉個例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、條件渲染指令

v-show

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

<p v-show="flag">這是被 v-show 控制的元素</p>

v-if

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

<p v-if="flag">這是被 v-if 控制的元素</p>

v-else-if

配合 v-if指令一起使用，否則將不會被識別

<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>

六、列表渲染指令

v-for

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

• item是 被循環(huán)的每一項，名字隨意

• items是 待循環(huán)的數(shù)組，名字隨意

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

    <tbody>
        <!-- v-for還支持一個可選的第二個參數(shù)，即當前項的索引。語法格式為(item,index)in items -->
        <!-- 注意：item和index都是形參，可以根據(jù)需要進行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素訪問外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引時，才寫這第二個參數(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的實例對象
    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不和內(nèi)容有一個強制的綁定關系）

• key 的屬性值只能是 字符串/數(shù)字類型，否則報錯

• key 的屬性值必須具有唯一性（不重復且 內(nèi)容和值有一個強制的綁定關系）

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

關于“Vue常用內(nèi)置指令有哪些”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue常用內(nèi)置指令有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：Vue常用內(nèi)置指令有哪些
當前路徑：http://chinadenli.net/article20/piggco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站設計公司、自適應網(wǎng)站、電子商務、企業(yè)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)