vue.js中指令Directives詳解

想必喜歡前端開發(fā)的小伙伴們都或多或少接觸過(guò)MVVM這個(gè)概念，說(shuō)起MVVM，第一時(shí)間想到的便是angularjs，knockoutjs等已經(jīng)被廣泛運(yùn)用的MVVM框架，之前我也沒(méi)有在這方面有很多了解，最近在做項(xiàng)目的過(guò)程中接觸了Vue.js,這是一個(gè)小巧精致，性能優(yōu)異的MVVM框架，可以說(shuō)對(duì)初學(xué)者是比較容易入門的，該框架的英文文檔寫得很好，但是中文版訪問(wèn)還不太穩(wěn)定，翻譯也有待改進(jìn)，所以自己一遍學(xué)習(xí)，一遍記錄自己的思考，與各位共享學(xué)習(xí)的經(jīng)驗(yàn)。 

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)北塔,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220

vue.js中指令Directives詳解

第一篇主要是想談?wù)剉ue.js中的Directives即指令，在vue.js中指令就是一個(gè)通知庫(kù)進(jìn)行某些具體的dom操作的口令，在html中表現(xiàn)為如下形式：

<element
 prefix-directiveId="[argument:] expression [| filters...]">
</element>

Directives分為1.Reactive Directives、2.Literal Directives、3.Empty Directives，下面結(jié)合具體的api闡述他們的作用：

1.Reactive Directives（響應(yīng)式指令）

Reactive Directives可以綁定在Vue實(shí)例或者在Vue實(shí)例上下文中求值的表達(dá)式上，當(dāng)綁定的對(duì)象發(fā)生改變時(shí)，指令中的update()會(huì)在下一個(gè)系統(tǒng)單位時(shí)間發(fā)生異步響應(yīng)，我們來(lái)看看具體的用法：

v-text:更新元素的textContent，事實(shí)上在html中{{mustache}}形式的插入值也會(huì)被編譯為針對(duì)一個(gè)textNode的v-text指令。

v-html:更新元素的innerHTML，由于可能插入惡意代碼，使用時(shí)要注意保證來(lái)源安全。

v-show:根據(jù)綁定值的true或false來(lái)決定所在元素在網(wǎng)頁(yè)中正常顯示還是顯示為空。

v-class：這個(gè)指令有一個(gè)可選參數(shù)，無(wú)參數(shù)時(shí)將綁定值（一般為class名）添加到所在元素的classlist當(dāng)中，并且一旦檢測(cè)綁定值有改動(dòng)，便隨之改變classlist里對(duì)應(yīng)的class；提供參數(shù)時(shí)參數(shù)的true或false將決定綁定值（class）是否被添加到所在元素的classlist中，示例如下：

<span v-class="
 red : hasError,
 bold : isImportant,
 hidden : isHidden
"></span>

v-attr:更新所在元素的某些屬性（由參數(shù)表示）。

<canvas v-attr="width:w, height:h"></canvas>

v-style:更新所在元素的樣式，會(huì)智能添加瀏覽器供應(yīng)商前綴，方便我們書寫樣式。這個(gè)指令有一個(gè)可選參數(shù)，無(wú)參數(shù)時(shí)，若綁定值為String則將綁定值設(shè)置為元素的style.cssText，若綁定值為Object則將Object中的樣式鍵值對(duì)放入元素的style object當(dāng)中；

<div v-></div>
// myStyles can either be a String:
"color:red; font-weight:bold;"
// or an Object:
{
 color: 'red',
 // both camelCase and dash-case works
 fontWeight: 'bold',
 'font-size': '2em'
}

提供參數(shù)時(shí)，參數(shù)指明了css屬性的對(duì)應(yīng)值:

<div v-style="
 top: top + 'px',
 left: left + 'px',
 background-color: 'rgb(0,0,' + bg + ')'
"></div>

v-on:為元素添加并更新事件監(jiān)聽器，參數(shù)可以是一個(gè)處理函數(shù)或者一個(gè)函數(shù)語(yǔ)句。

<div id="demo">
 <a v-on="click: onClick">Trigger a handler</a>
 <a v-on="click: n++">Trigger an expression</a>
</div>

我們可以為處理函數(shù)提供參數(shù)，其中this指的是當(dāng)前的ViewModel，如下例中通過(guò)傳入this參數(shù)改變?cè)氐膖ext值：

<ul id="list">
 <li v-repeat="items" v-on="click: toggle(this)">{{text}}</li>
</ul>
new Vue({
 el: '#list',
 data: {
 items: [
  { text: 'one', done: true },
  { text: 'two', done: false }
 ]
 },
 methods: {
 toggle: function (item) {
  item.done = !item.done
 }
 }
})

我們還可以傳入$event表示觸發(fā)處理函數(shù)的DOM事件，如下例傳入$event阻止事件冒泡：

<button v-on="click: submit('hello!', $event)">Submit</button>

/* ... */
{
 methods: {
 submit: function (msg, e) {
  e.stopPropagation()
 }
 }
}
/* ... */

在監(jiān)聽鍵盤事件時(shí)由于要判斷按鍵值，可以結(jié)合filter寫成如下兩種形式：

<!-- only call vm.submit() when the keyCode is 13 -->
<input v-on="keyup:submit | key 13">
<!-- same as above -->
<input v-on="keyup:submit | key enter">

當(dāng)ViewModel銷毀時(shí)，v-on綁定的事件會(huì)自動(dòng)消除，我們不必親自去清理這些綁定事件，這也防止了內(nèi)存的泄露。 

v-model:為表單元素創(chuàng)建一個(gè)雙向綁定，詳細(xì)介紹請(qǐng)看這里 

v-if:根據(jù)綁定值的true或false來(lái)插入或移除元素，如例子中我們將根據(jù)test的正確與否決定兩個(gè)<p>元素是否插入<template>當(dāng)中

<template v-if="test">
 <p>hello</p>
 <p>world</p>
</template>
 

v-repeat:為綁定數(shù)組或?qū)ο笾械拿恳粋€(gè)item創(chuàng)建一個(gè)子ViewModel，或者為綁定的數(shù)字值創(chuàng)建對(duì)應(yīng)數(shù)量的子ViewModel。并根據(jù)綁定值的改變隨時(shí)更新。沒(méi)有提供參數(shù)時(shí)子ViewModel會(huì)直接使用綁定數(shù)組中的分配單元作為它的$data，如果值不是一個(gè)對(duì)象，則會(huì)創(chuàng)建一個(gè)數(shù)據(jù)包裝對(duì)象，而值會(huì)被設(shè)置在別名為$value的 key 上。

<ul>
 <li v-repeat="users">
 {{name}} {{email}}
 </li>
</ul>

如果提供了參數(shù)，我們將創(chuàng)建一個(gè)數(shù)據(jù)包裝對(duì)象，將參數(shù)作為對(duì)象的key，從而訪問(wèn)對(duì)象模板中的屬性：

<ul>
 <li v-repeat="user : users">
 {{user.name}} {{user.email}}
 </li>
</ul>

v-with：這個(gè)指令只能結(jié)合接下來(lái)講到的v-component指令使用，作用是讓子ViewModel可以繼承父ViewModel的數(shù)據(jù)，我們可以傳入父ViewModel的屬性對(duì)象或單個(gè)屬性，在子ViewModel中訪問(wèn)：

// parent data looks like this
{
 user: {
 name: 'Foo Bar',
 email: 'foo@bar.com'
 }
}

繼承對(duì)象：

<my-component v-with="user">
 <!-- you can access properties without `user.` -->
 {{name}} {{email}}
</my-component>

繼承單個(gè)屬性：

<my-component v-with="myName: user.name, myEmail: user.email">
 <!-- you can access properties with the new keys -->
 {{myName}} {{myEmail}}
</my-component>

v-events：這個(gè)指令也只能結(jié)合接下來(lái)講到的v-component指令使用，它使得父ViewModel能夠監(jiān)聽子ViewModel上的事件，我們要注意區(qū)分v-on與v-events,v-events監(jiān)聽的是通過(guò)vm.$emit()創(chuàng)建的 Vue 組件系統(tǒng)事件，而不是 DOM 事件。我們舉例說(shuō)明：

<!-- inside parent template -->
<div v-component="child" v-events="change: onChildChange"></div>

當(dāng)子ViewModel調(diào)用this.$emit('change', …)時(shí)會(huì)觸發(fā)父ViewModel的onChildChange()方法，并且把emit函數(shù)中附加的參數(shù)傳給onChildChange()方法。 

2.Literal Directives(字面指令)

字面指令并沒(méi)有綁定到某一個(gè)對(duì)象上，字面指令是把它們的參數(shù)作為純字符串傳給bind()函數(shù)中執(zhí)行一次，字面指令可以接受{{mustache}}表達(dá)式，但是該表達(dá)式只會(huì)在編譯階段執(zhí)行一次，不會(huì)綁定數(shù)據(jù)的改變：

下面看一看具體的api：

v-component：之前提到過(guò)，這是使用我們提前聲明并注冊(cè)好的組件構(gòu)造器將當(dāng)前元素編譯為子ViewModel，從而實(shí)現(xiàn)數(shù)據(jù)繼承，之后的文章會(huì)詳細(xì)介紹組件系統(tǒng)。 

v-ref：在父ViewModel中創(chuàng)建子ViewModel的引用，方便父ViewModel中的$對(duì)象訪問(wèn)子組件：

<div id="parent">
 <div v-component="user-profile" v-ref="profile"></div>
</div>

var parent = new Vue({ el: '#parent' })
// 訪問(wèn)子組件
var child = parent.$.profile

這個(gè)指令只能與v-component和v-repeat一起使用，與v-repeat一起使用時(shí)，其value是與綁定數(shù)據(jù)數(shù)組對(duì)應(yīng)的子組件數(shù)組。 

v-el：為當(dāng)前dom元素創(chuàng)建一個(gè)引用，供其自身vue實(shí)例使用，例如<div v-el="hi">可以使得vm.$$.hi訪問(wèn)到該dom元素 

v-partial：將當(dāng)前dom元素中的innerHTML替換為事先注冊(cè)的partial，有兩種寫法，{{ mustache}}可以讓dom元素隨數(shù)據(jù)改變而更新: 

<!-- content will change based on vm.partialId -->
<div v-partial="{{partialId}}"></div>

另一種寫法則沒(méi)有數(shù)據(jù)跟隨更新的效果：

<div>{{> my-partial}}</div>

v-transition：為當(dāng)前dom元素在指定參數(shù)值作用時(shí)添加動(dòng)畫效果，后續(xù)文章會(huì)詳細(xì)介紹 

3.Empty Directives(字面指令)

v-pre：這個(gè)指令是通知編譯器跳過(guò)當(dāng)前dom元素和其所有子元素，這是為了在我們編程過(guò)程中對(duì)無(wú)需編譯的元素節(jié)省編譯時(shí)間

v-cloak：在當(dāng)前元素編譯完成之前改指令都會(huì)存在，我們一般使用這個(gè)指令來(lái)在元素編譯未完成時(shí)隱藏原始的 {{ Mustache }} 模板，可以在css中這樣寫：

[v-cloak] { display: none }

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前文章：vue.js中指令Directives詳解
文章位置：http://muchs.cn/article28/ijdccp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站營(yíng)銷、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司

廣告

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

商城網(wǎng)站建設(shè)