vue指令有哪些及怎么使用

今天小編給大家分享一下vue指令有哪些及怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

vue指令以“v-”開頭。在Vue中，指令是作用于HTML元素的帶有“v-”前綴的特殊特性；指令的作用是：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM。將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為，因此可以將指令看作特殊的HTML特性（attribute）。

vue.js指令是什么？作用是什么？

Vue.js指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預(yù)期是單個(gè) JavaScript 表達(dá)式 (v-for 是例外情況)。

Vue.js作用于HTML元素，指令提供了一些特殊的特性，將指令綁定在元素上時(shí)，指令會(huì)為綁定的目標(biāo)元素添加一些特殊的行為，我們可以將指令看作特殊的HTML特性（attribute）。

指令的作用是：當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

每個(gè)指令都有自己的用途，當(dāng)其綁定的表達(dá)式發(fā)生改變的時(shí)候，會(huì)響應(yīng)式的影響dom的變化。而變化的具體則是看每個(gè)指令其本身的用途。比如v-bind指令是綁定屬性值，當(dāng)綁定的表達(dá)式發(fā)生改變，dom上屬性的值也會(huì)發(fā)生對(duì)應(yīng)的改變。

指令的語法是：v-指令:參數(shù)="表達(dá)式"（參數(shù)并不是絕對(duì)需要的）

參數(shù)

:后面跟著的就是參數(shù)，但并不一定所有的指令都會(huì)有參數(shù)，只有特定的指令會(huì)需要參數(shù)，這是由于指令的性質(zhì)決定的。這里的參數(shù)和函數(shù)的參數(shù)是類似的，就好比我這個(gè)指令需要對(duì)應(yīng)的參數(shù)才能使功能生效。

拿v-bind:type="type"來說，v-bind指令用于綁定屬性值，那么需要綁定什么屬性呢，光靠這個(gè)指令無法確定，所以需要參數(shù)來進(jìn)一步確定。也就是v-bind:type，冒號(hào)后面跟著的type就是傳入指令中的參數(shù)。告訴指令，我要綁定屬性type和表達(dá)式的關(guān)聯(lián)。

上面我們也說了，并不是所有的指令都需要參數(shù)。比如v-html指令，這個(gè)指令是綁定元素內(nèi)部的html，功能點(diǎn)已經(jīng)非常明確，不需要額外的參數(shù)去確定，只需要指令和表達(dá)式即可完成指令的功能。

表達(dá)式

""引號(hào)內(nèi)的值就是表達(dá)式，表達(dá)式一般可以是一個(gè)可執(zhí)行的js表達(dá)式。它與指令本身是有綁定關(guān)聯(lián)的，類似傳入指令的值。并且當(dāng)表達(dá)式內(nèi)的響應(yīng)式數(shù)據(jù)發(fā)生變化，也會(huì)引發(fā)dom的變化。

常用的指令

指令一般都是vue內(nèi)嵌實(shí)現(xiàn)的，我們只需要用就可以了。vue中是可以自定義指令的，但這不是我們本節(jié)的重點(diǎn)。接下來主要說說一些常用指令的用法和注意點(diǎn)。

v-bind

描述：綁定dom屬性，綁定表達(dá)式與dom屬性

語法：v-bind:屬性="表達(dá)式" or :屬性="表達(dá)式"

示例： 綁定輸入框的類型為數(shù)值類型且禁用

<input :type="type" :disabled="disabled" />

data: {
    type: 'number',
    disabled: true
}

v-on

描述：綁定事件，監(jiān)聽dom上的事件，并綁定回調(diào)函數(shù)

語法：v-on:事件名="回調(diào)函數(shù)" or @事件名="回調(diào)函數(shù)"。事件綁定指令的表達(dá)式一般是回調(diào)函數(shù)，且該函數(shù)接受一個(gè)參數(shù)$event。當(dāng)綁定的事件被觸發(fā)就會(huì)執(zhí)行綁定的函數(shù)

示例：當(dāng)點(diǎn)擊按鈕的時(shí)候彈出對(duì)話框

<button @click="alert">有種你點(diǎn)我</button>

methods: {
    alert($event) {
        alert('有種你打我呀！')
    }
}

事件綁定的函數(shù)一般是在methods中定義的函數(shù)，但這邊并不是絕對(duì)的。對(duì)于實(shí)例上存在的函數(shù)，都可以作為事件綁定的回調(diào)函數(shù)。

v-if

描述：dom元素顯示判斷，當(dāng)表達(dá)式為真的時(shí)候，顯示dom元素，否則銷毀dom

語法：v-if="表達(dá)式"。只要表達(dá)式不一定必須是true，只要能判斷為真即顯示dom元素

示例：

<p v-if="show">{{title}}</p>

data: {
    show: true
    title: 'v-if的用法'
}

除此之外，v-if還可以和v-else-if、v-else搭配使用，其邏輯和js中的if、else if、else是類似的，都是由上至下的執(zhí)行指令，當(dāng)指令的表達(dá)式為真的時(shí)候則該指令生效，顯示該dom操作，然后不再執(zhí)行后續(xù)的判斷

示例：

<p v-if="student === 'll'">lili</p>
<p v-else-if="student === 'mm'">mingming</p>
<p v-else-if="student === 'hh'">hanhan</p>
<p v-else>無</p>

data: {
    student: 'mm'
}

當(dāng)判斷到第二個(gè)條件成立后，即顯示dom元素，并不再繼續(xù)向下執(zhí)行，v-else不需要表達(dá)式判斷，若以上情況都不滿足該指令執(zhí)行。

這里需要注意的是，這里的顯示更像是初始化，當(dāng)每次判斷為真后都會(huì)初始化該元素，而判斷為假則會(huì)銷毀該元素。所以使用v-if類的指令對(duì)dom的操作開銷較大，會(huì)在一定程度上影響性能。

v-show

描述：dom元素顯示判斷，當(dāng)表達(dá)式為真的時(shí)候，顯示dom元素，否則隱藏dom。 看到這里，是不是發(fā)現(xiàn)和v-if很相似呢？從功能上看是的，但從實(shí)現(xiàn)原理來說這兩個(gè)則完全不同，這個(gè)我們后面在討論。

語法：v-show="show"

示例：

<p v-show="show">{{title}}</p>

data: {
    show: true
    title: 'v-if的用法'
}

當(dāng)表達(dá)式為真的時(shí)候則顯示元素，否則則隱藏元素。

v-show和v-if的區(qū)別

v-show和v-if最根本的區(qū)別在于顯示和隱藏元素的方式。

• v-show是采用樣式的方式控制元素的顯示和隱藏，也就是我們常用的display: none，此時(shí)雖然元素是隱藏狀態(tài)，但在html代碼中還是存在的。

• v-if則是通過直接控制元素代碼的方式在控制顯示和隱藏。也就是說當(dāng)元素隱藏的時(shí)候，該元素本身在html是不存在的。所以v-if的顯示和隱藏，我更喜歡用初始化和銷毀來描述。

示例：我們直接來看一下他們?cè)趆tml中的表現(xiàn)形式，因?yàn)樵陲@示的情況下，他們幾乎看不出區(qū)別，所以這里我們隱藏來看看他們之間的差異。

<p v-if="show" class="if">{{title}}</p>
<p v-show="show" class="show">{{title}}</p>

data: {
    show: false
    title: 'v-if的用法'
}

為了更直觀，我為兩個(gè)元素打上標(biāo)識(shí)

可以看到v-if的html代碼是通過注釋符替代現(xiàn)隱藏元素，而v-show則是通過css樣式display: none來隱藏元素。

這兩種控制元素顯隱方式各有優(yōu)劣，適用于不同的場(chǎng)景。這里暫時(shí)不詳細(xì)說，大家有興趣也可以去了解一下，后面我也會(huì)針對(duì)這點(diǎn)去展開說說。

v-model

描述：數(shù)據(jù)雙向綁定，這個(gè)指令多用于需要綁定值和修改值的操作，比如輸入框

語法：v-model="value"

示例：綁定input的值為value，并當(dāng)改變input的值的時(shí)候改變value的值

<div id="app">
    <p>{{value}}</p>
    <input type="text" v-model="value">
</div>

<script>
let config = {
  el: '#app',
  data: {
    value: '我是初始值'
  }
}
let vm = new Vue(config)
</script>

value的值會(huì)與輸入框的值綁定，且當(dāng)編輯輸入框的內(nèi)容的時(shí)候也會(huì)修改value的值，這就是雙向綁定。

雙向綁定其實(shí)是一種語法糖，它主要有兩個(gè)操作來實(shí)現(xiàn)：<input type="text" :value="value" @input="value=$event.target.value">

它基本的原理就是，先綁定元素的value值，然后監(jiān)聽input事件，當(dāng)觸發(fā)input事件后，改變value（data中）的值，從而實(shí)現(xiàn)雙向綁定。但需要注意，這里只是說簡(jiǎn)單的實(shí)現(xiàn)，真實(shí)情況可能比這個(gè)復(fù)雜，不同的類型所使用的監(jiān)聽事件類似是不同的，但他們中心原理都是類似的，理解基礎(chǔ)實(shí)現(xiàn)原理即可。

v-for

描述：用于循環(huán)列表。v-for指令最基本的功能就是用于渲染一些樣式相對(duì)重復(fù)的dom，最常使用的就是列表

語法：v-for="item in list" :key="item.id"。v-for指令的表達(dá)式與普通表達(dá)不同，它基本是確定的，list是需要循環(huán)的數(shù)組，item則是list遍歷的子元素。且不同其他指令，v-for還要搭配key來使用，這主要是為了做唯一標(biāo)識(shí)的作用。item和list都是可以自定義的。比如你也可以寫成v-for="data in datas" :key="data.id"。

我們除了可以接收遍歷的子元素的值，還可以接收遍歷的序號(hào)：v-for="(item, i) in list" :key="i"。

要點(diǎn)：將v-for指令綁定到需要循環(huán)渲染的元素中，有點(diǎn)類似js的 for in 的用法。并指定好key值。key一般是數(shù)據(jù)中的唯一值，如果實(shí)在沒有唯一值，也可以用序號(hào)索引

示例：渲染名稱列表，

<div id="app">
<ul>
  <li v-for="item in list" :key="item.id">
    {{item.name}}
  </li>
</ul>
</div>

<script>
let config = {
  el: '#app',
  data: {
    list: [{
      id: 1,
      name: 'lili'
    }, {
      id: 2,
      name: 'mingming'
    }]
  }
}
let vm = new Vue(config)

</script>

以上就是“vue指令有哪些及怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。