Vue中常用的指令總結(jié)

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:33:10

Vue中常用的指令總結(jié)

Vue中常用的指令總結(jié):本篇文章分享給大家的內(nèi)容是關(guān)于Vue中常用的指令總結(jié)，內(nèi)容很詳細(xì)，接下來(lái)我們就來(lái)看看具體的內(nèi)容，希望可以幫助到有需要的朋友。1 常用指令v-if指令v-show指令v-else指令v-for指令v-bind指令v-modelv-on指令v-text指令1.1 v-if是條件渲染指令，

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue中常用的指令總結(jié):本篇文章分享給大家的內(nèi)容是關(guān)于Vue中常用的指令總結(jié)，內(nèi)容很詳細(xì)，接下來(lái)我們就來(lái)看看具體的內(nèi)容，希望可以幫助到有需要的朋友。1 常用指令v-if指令v-show指令v-else指令v-for指令v-bind指令v-modelv-on指令v-text指令1.1 v-if是條件渲染指令，

本篇文章分享給大家的內(nèi)容是關(guān)于Vue中常用的指令總結(jié)，內(nèi)容很詳細(xì)，接下來(lái)我們就來(lái)看看具體的內(nèi)容，希望可以幫助到有需要的朋友。

1 常用指令

v-if指令

v-show指令

v-else指令

v-for指令

v-bind指令

v-model

v-on指令

v-text指令

1.1 v-if是條件渲染指令，它根據(jù)表達(dá)式的真假來(lái)刪除和插入元素，它的基本語(yǔ)法如下：

v-if="expression"

expression是一個(gè)返回bool值的表達(dá)式，表達(dá)式可以是一個(gè)bool屬性，也可以是一個(gè)返回bool的運(yùn)算式。例如：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
 </head>
 <body>
 <div id="app">
 <h1>Hello, Vue.js!</h1>
 <h1 v-if="yes">Yes!</h1>
 <h1 v-if="no">No!</h1>
 <h1 v-if="age >= 25">Age: {{ age }}</h1>
 <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
 </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
 
 var vm = new Vue({
 el: '#app',
 data: {
 yes: true,
 no: false,
 age: 28,
 name: 'keepfool'
 }
 })
 </script>
</html>

顯示結(jié)果如下、

注意：v-if指令是根據(jù)條件表達(dá)式的值來(lái)執(zhí)行元素的插入或者刪除行為。

1.2 v-for指令

v-for指令基于一個(gè)數(shù)組渲染一個(gè)列表，它和JavaScript的遍歷語(yǔ)法相似：

v-for="item in items"

items是一個(gè)數(shù)組，item是當(dāng)前被遍歷的數(shù)組元素。

示例代碼：

<body>
 <div id="app">
 <table style="width: 400px; height: 600px;" border="1" cellspacing="0">
 <thead>
 <tr>
 <th>name</th>
 <th>age</th>
 </tr>

 </thead>
 <tbody>
 <tr v-for="item in items">
 <td align="center"> {{item.name}}</td>
 <td> {{item.age}}</td>
 </tr>
 </tbody>
 </table>
 </div>
</body>

<script type="text/javascript">
 var app = new Vue({
 el:'#app',
 data:{
 items:[{name:'well',age:'20'},{name:'good',age:'19'},{name:'nice',age:'18'},{name:'ok',age:'17'},]
 }
 })
</script>

1.3 v-bind 指令可以在其名稱后面帶一個(gè)參數(shù)，中間放一個(gè)冒號(hào)隔開(kāi)，這個(gè)參數(shù)通常是HTML元素的特性（attribute），例如：v-bind:class

v-bind:argument="expression"

1.4 v-model

v-model（表單元素設(shè)置了之后會(huì)忽略掉value，checked，selected），常用在表單 <input> 及 <textarea>

讓表單元素和數(shù)據(jù)實(shí)現(xiàn)雙向綁定（映射關(guān)系）

示例代碼

<p id="app">
 <p v-text="message"> </p>
 <input type="text" v-model="message">
</p>

</body>

<script type="text/javascript"> var app = new Vue({
 el:"#app",
 data:{
 message:"nice to meet you"
 }
 })</script>

1.5 v-on 指令用于給監(jiān)聽(tīng)DOM事件，它的用語(yǔ)法和v-bind是類似的，例如監(jiān)聽(tīng)<a>元素的點(diǎn)擊事件：

<a v-on:click="doSomething">

有兩種形式調(diào)用方法：綁定一個(gè)方法（讓事件指向方法的引用），或者使用內(nèi)聯(lián)語(yǔ)句。
Greet按鈕將它的單擊事件直接綁定到greet()方法，而Hi按鈕則是調(diào)用say()方法。

在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見(jiàn)的需求。Vue.js 為 v-on 提供了事件修飾符。之前提過(guò)，修飾符是由點(diǎn)開(kāi)頭的指令后綴來(lái)表示的。

.stop

.prevent

.capture

.self

.once

.passive

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽(tīng)器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<p v-on:click.self="doThat">...</p>

Vue.js為最常用的兩個(gè)指令v-bind和v-on提供了縮寫方式。v-bind指令可以縮寫為一個(gè)冒號(hào)，v-on指令可以縮寫為@符號(hào)。

<!--完整語(yǔ)法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--縮寫語(yǔ)法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<!--完整語(yǔ)法-->
<button v-on:click="greet">Greet</button>
<!--縮寫語(yǔ)法-->
<button @click="greet">Greet</button>

1.6 v-text指令主要是防止頁(yè)面首次加載時(shí) {{}} 出現(xiàn)在頁(yè)面上