當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue—基础概念—指令

發(fā)布時(shí)間：2024/4/15 vue 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue—基础概念—指令小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

原文地址：Vue指令

5.指令

什么是指令？

指令 (Directives) 是帶有?v-?前綴的特殊特性。指令特性的預(yù)期值是：單個(gè) JavaScript 表達(dá)式。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM。

例如我們?cè)谌腴T案例中的v-on，代表綁定事件。

5.1.插值表達(dá)式

5.1.1.花括號(hào)

格式：

說明：

該表達(dá)式支持JS語法，可以調(diào)用js內(nèi)置函數(shù)（必須有返回值）
表達(dá)式必須有返回結(jié)果。例如 1 + 1，沒有結(jié)果的表達(dá)式不允許使用，如：var a = 1 + 1;
可以直接獲取Vue實(shí)例中定義的數(shù)據(jù)或函數(shù)

示例：

HTML：

JS:

var app = new Vue({el:"#app",data:{name:"Jack"} })

5.1.2.插值閃爍

使用{{}}方式在網(wǎng)速較慢時(shí)會(huì)出現(xiàn)問題。在數(shù)據(jù)未加載完成時(shí)，頁面會(huì)顯示出原始的{{}}，加載完畢后才顯示正確數(shù)據(jù)，我們稱為插值閃爍。

我們將網(wǎng)速調(diào)慢一些，然后試試看剛才的案例：

刷新頁面：

5.1.3.v-text和v-html

使用v-text和v-html指令來替代{{}}

說明：

v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)作為普通文本輸出
v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)被渲染

示例：

HTML:

JS:

var vm = new Vue({el:"#app",data:{hello: "<h1>大家好，我是峰哥</h1>"} })

效果：

并且不會(huì)出現(xiàn)插值閃爍，當(dāng)沒有數(shù)據(jù)時(shí)，會(huì)顯示空白。

5.2.v-model

剛才的v-text和v-html可以看做是單向綁定，數(shù)據(jù)影響了視圖渲染，但是反過來就不行。接下來學(xué)習(xí)的v-model是雙向綁定，視圖（View）和模型（Model）之間會(huì)互相影響。

既然是雙向綁定，一定是在視圖中可以修改數(shù)據(jù)，這樣就限定了視圖的元素類型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定義組件）

基本上除了最后一項(xiàng)，其它都是表單的輸入項(xiàng)。

舉例：

html：

<div id="app"><input type="checkbox" v-model="language" value="Java" />Java<br/><input type="checkbox" v-model="language" value="PHP" />PHP<br/><input type="checkbox" v-model="language" value="Swift" />Swift<br/><h1>你選擇了：{{language.join(',')}}</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{language: []}}) </script>

多個(gè)CheckBox對(duì)應(yīng)一個(gè)model時(shí)，model的類型是一個(gè)數(shù)組，單個(gè)checkbox值默認(rèn)是boolean類型
radio對(duì)應(yīng)的值是input的value值
input?和textarea?默認(rèn)對(duì)應(yīng)的model是字符串
select單選對(duì)應(yīng)字符串，多選對(duì)應(yīng)也是數(shù)組

效果：

5.3.v-on

5.3.1.基本用法

v-on指令用于給頁面元素綁定事件。

語法：

v-on:事件名="js片段或函數(shù)名"

示例：

<div id="app"><button v-on:click="num++">增加一個(gè)</button><br/><button v-on:click="decrement">減少一個(gè)</button><br/><h1>有{{num}}個(gè)女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el:"#app",data:{num:100},methods:{decrement(){this.num--;}}}) </script>

效果：

另外，事件綁定可以簡(jiǎn)寫，例如v-on:click='add'可以簡(jiǎn)寫為@click='add'

5.3.2.事件修飾符

在事件處理程序中調(diào)用?event.preventDefault()?或?event.stopPropagation()?是非常常見的需求。盡管我們可以在方法中輕松實(shí)現(xiàn)這點(diǎn)，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。

為了解決這個(gè)問題，Vue.js 為?v-on?提供了事件修飾符。修飾符是由點(diǎn)開頭的指令后綴來表示的。

.stop?：阻止事件冒泡到父元素
.prevent：阻止默認(rèn)事件發(fā)生
.capture：使用事件捕獲模式
.self：只有元素自身觸發(fā)事件才執(zhí)行。（冒泡或捕獲的都不執(zhí)行）
.once：只執(zhí)行一次

阻止默認(rèn)事件

<div id="app"><button v-on:contextmenu.prevent="num++">增加一個(gè)</button><br/><button v-on:contextmenu="decrement($event)">減少一個(gè)</button><br/><h1>有{{num}}個(gè)女神迷戀峰哥</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {num: 100},methods: {decrement(ev) {//此種定義方法的寫法需要idea中設(shè)置javascript的版本為ECMAScript6// ev.preventDefault();this.num--;}}}) </script>

效果：（右鍵“增加一個(gè)”，不會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件；右鍵“減少一個(gè)”，會(huì)觸發(fā)默認(rèn)的瀏覽器右擊事件）

5.3.3.按鍵修飾符

在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為?v-on?在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：

<input v-on:keyup.13="submit">

記住所有的?keyCode?比較困難，所以 Vue 為最常用的按鍵提供了別名：

<input v-on:keyup.enter="submit"> <input @keyup.enter="submit">

前提是:事件源對(duì)象要獲得焦點(diǎn)

全部的按鍵別名：

.enter
.tab
.delete?(捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

5.3.4.組合按鈕

可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

.ctrl
.alt
.shift

例如：

<input @keyup.alt.67="clear"> <div @click.ctrl="doSomething">Do something</div>

5.4.v-for

遍歷數(shù)據(jù)渲染頁面是非常常用的需求，Vue中通過v-for指令來實(shí)現(xiàn)。

5.4.1.遍歷數(shù)組

語法：

v-for="item in items"

items：要遍歷的數(shù)組，需要在vue的data中定義好。
item：迭代得到的數(shù)組元素的別名

示例

<div id="app"><ul><li v-for="user in users">{{user.name}} - {{user.gender}} - {{user.age}}</li></ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {users:[{name:'柳巖', gender:'女', age: 21},{name:'峰哥', gender:'男', age: 18},{name:'范冰冰', gender:'女', age: 24},{name:'劉亦菲', gender:'女', age: 18},{name:'古力娜扎', gender:'女', age: 25}]},}) </script>

效果：

5.4.2.數(shù)組下標(biāo)

在遍歷的過程中，如果我們需要知道數(shù)組下標(biāo)，可以指定第二個(gè)參數(shù)：

語法

v-for="(item,index) in items"

items：要迭代的數(shù)組
item：迭代得到的數(shù)組元素別名
index：迭代到的當(dāng)前元素索引，從0開始。

示例

<ul><li v-for="(user, index) in users">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>

效果：

5.4.3.遍歷對(duì)象

v-for除了可以迭代數(shù)組，也可以迭代對(duì)象。語法基本類似

語法：

v-for="value in object" v-for="(value,key) in object" v-for="(value,key,index) in object"

1個(gè)參數(shù)時(shí)，得到的是對(duì)象的屬性值
2個(gè)參數(shù)時(shí)，第一個(gè)是屬性值，第二個(gè)是鍵
3個(gè)參數(shù)時(shí)，第三個(gè)是索引，從0開始

示例：

<div id="app"><ul><li v-for="(value, key, index) in user">{{index + 1}}. {{key}} - {{value}}</li></ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{user:{name:'峰哥', gender:'男', age: 18}}}) </script>

效果：

5.4.4.key

當(dāng) Vue.js 用?v-for?正在更新已渲染過的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單復(fù)用此處每個(gè)元素，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。

這個(gè)功能可以有效的提高渲染的效率。

但是需要DOM 元素來匹配數(shù)據(jù)項(xiàng)時(shí)，你需要給Vue一些提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一?key?屬性。理想的?key?值是每項(xiàng)都有的且唯一的 id。

示例：

這里使用了一個(gè)特殊語法：:key=""?我們后面會(huì)講到，它可以讓你讀取vue中的屬性，并賦值給key屬性
這里我們綁定的key是item.id，是唯一的

5.5.v-if和v-show

5.5.1.基本使用

v-if，顧名思義，條件判斷。當(dāng)?shù)玫浇Y(jié)果為true時(shí)，所在的元素才會(huì)被渲染。

語法：

v-if="布爾表達(dá)式"

示例：

效果：

5.5.2.與v-for結(jié)合

當(dāng)v-if和v-for出現(xiàn)在一起時(shí)，v-for優(yōu)先級(jí)更高。也就是說，會(huì)先遍歷，再判斷條件。

修改v-for中的案例，添加v-if：

<ul><li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}</li></ul>

效果：

只顯示女性用戶信息

5.5.3.v-else

你可以使用?v-else?指令來表示?v-if?的“else 塊”：

v-else?元素必須緊跟在帶?v-if?或者?v-else-if?的元素的后面，否則它將不會(huì)被識(shí)別。

v-else-if，顧名思義，充當(dāng)?v-if?的“else-if 塊”，可以連續(xù)使用：

<div id="app"><button v-on:click="random=Math.random()">點(diǎn)我呀</button><span>{{random}}</span><h1 v-if="random >= 0.75">看到我啦？！if</h1><h1 v-else-if="random > 0.5">看到我啦？！if 0.5</h1><h1 v-else-if="random > 0.25">看到我啦？！if 0.25</h1><h1 v-else>看到我啦？！else</h1> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {random: 1}}) </script>

類似于?v-else，v-else-if?也必須緊跟在帶?v-if?或者?v-else-if?的元素之后。

演示：

5.5.4.v-show

另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是?v-show?指令。用法大致一樣：

<h1 v-show="ok">Hello!</h1>

不同的是帶有?v-show?的元素始終會(huì)被渲染并保留在 DOM 中。v-show?只是簡(jiǎn)單地切換元素的 CSS 屬性?display。

示例：

代碼：

5.6.v-bind

html屬性不能使用雙大括號(hào)形式綁定，只能使用v-bind指令。

<div id="app"><div v-bind:title="title" style="border: 1px solid red; width: 50px; height: 50px;"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {title: "title",}}) </script>

效果：

在將?v-bind?用于?class?和?style?時(shí)，Vue.js 做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組。

5.6.1.綁定class樣式

數(shù)組語法

我們可以借助于v-bind指令來實(shí)現(xiàn)：

HTML：

<div id="app"><div v-bind:class="activeClass"></div><div v-bind:class="errorClass"></div><div v-bind:class="[activeClass, errorClass]"></div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var app = new Vue({el: "#app",data: {activeClass: 'active',errorClass: ['text-danger', 'text-error']}}) </script>

渲染后的效果：（具有active和errorClass的樣式）

對(duì)象語法

我們可以傳給?v-bind:class?一個(gè)對(duì)象，以動(dòng)態(tài)地切換 class：

上面的語法表示?active?這個(gè)?class 存在與否將取決于數(shù)據(jù)屬性?isActive?的?truthiness（所有的值都是真實(shí)的，除了false,0,“”,null,undefined和NaN）。

你可以在對(duì)象中傳入更多屬性來動(dòng)態(tài)切換多個(gè) class。此外，v-bind:class?指令也可以與普通的 class 屬性共存。如下模板:

和如下 data：

data: {isActive: true,hasError: false }

結(jié)果渲染為：

active樣式和text-danger樣式的存在與否，取決于isActive和hasError的值。本例中isActive為true，hasError為false，所以active樣式存在，text-danger不存在。

通常情況下，綁定的數(shù)據(jù)對(duì)象不必內(nèi)聯(lián)定義在模板里：

數(shù)據(jù)：

data: {classObject: {active: true,'text-danger': false} }

效果和之前一樣：

5.6.2.綁定style樣式

數(shù)組語法

數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到同一個(gè)元素上：

數(shù)據(jù)：

data: {baseStyles: {'background-color': 'red'},overridingStyles: {border: '1px solid black'} }

渲染后的結(jié)果：

對(duì)象語法

v-bind:style?的對(duì)象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號(hào)括起來) 來命名：

數(shù)據(jù)：

data: {activeColor: 'red',fontSize: 30 }

效果：

直接綁定到一個(gè)樣式對(duì)象通常更好，這會(huì)讓模板更清晰：

<div v-bind:style="styleObject"></div> data: {styleObject: {color: 'red',fontSize: '13px'} }

效果同上。

5.6.3.簡(jiǎn)寫

v-bind:class可以簡(jiǎn)寫為:class

5.7.計(jì)算屬性

在插值表達(dá)式中使用js表達(dá)式是非常方便的，而且也經(jīng)常被用到。

但是如果表達(dá)式的內(nèi)容很長(zhǎng)，就會(huì)顯得不夠優(yōu)雅，而且后期維護(hù)起來也不方便，例如下面的場(chǎng)景，我們有一個(gè)日期的數(shù)據(jù)，但是是毫秒值：

data:{birthday:1529032123201 // 毫秒值 }

我們?cè)陧撁驿秩?#xff0c;希望得到y(tǒng)yyy-MM-dd的樣式：

<h1>您的生日是：{{new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()}} </h1>

雖然能得到結(jié)果，但是非常麻煩。

Vue中提供了計(jì)算屬性，來替代復(fù)雜的表達(dá)式：

var vm = new Vue({el:"#app",data:{birthday:1429032123201 // 毫秒值},computed:{birth(){// 計(jì)算屬性本質(zhì)是一個(gè)方法，但是必須返回結(jié)果const d = new Date(this.birthday);return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();}} })

計(jì)算屬性本質(zhì)就是方法，但是一定要返回?cái)?shù)據(jù)。然后頁面渲染時(shí)，可以把這個(gè)方法當(dāng)成一個(gè)變量來使用。

頁面使用：

<div id="app"><h1>您的生日是：{{birth}} </h1></div>

效果：

我們可以將同一操作定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這就意味著只要birthday還沒有發(fā)生改變，多次訪問?birthday?計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。

5.8.watch

watch可以讓我們監(jiān)控一個(gè)值的變化。從而做出相應(yīng)的反應(yīng)。

示例：

<div id="app"><input type="text" v-model="message"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app",data:{message:""},watch:{message(newVal, oldVal){console.log(newVal, oldVal);}}}) </script>

效果：

總結(jié)

以上是生活随笔為你收集整理的Vue—基础概念—指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。