最近打算重溫一遍vue的知識(shí)，正好總結(jié)一份筆記。

插值

基本用法

<span>Text:{{text}}</span> 
<span v-text="text"></span> 這個(gè)屬于指令
<li data-id="{{id}}"></li>

有時(shí)候只需要渲染一次數(shù)據(jù)，后續(xù)數(shù)據(jù)變化不再關(guān)心，可以通過(guò)“*”實(shí)現(xiàn)

<span>Text:{{*text}}</span> 

如果是html片段，可以這樣表示

<span v-html="text"></span> 這個(gè)屬于指令
<span>Text:{{{text}}}</span> 

表達(dá)式

表達(dá)式是各種數(shù)值、變量、運(yùn)算符的綜合體

 {{ cents/100 }}
 {{ true?1:0 }}
 {{ example.split(",") }}

無(wú)效示例

{{ var logo= 'DDFE' }}
{{ if(true) return 'DDFE' }}

添加過(guò)濾器，允許過(guò)濾器串聯(lián)，還支持傳入?yún)?shù)

{{ example | toUpperCase }}
{{ example | filterA | filterB }}
{{ example | filter a b }}

分隔符

Vue.config是一個(gè)對(duì)象，包含了Vue.js的所有全局配置，可以在Vue實(shí)例化前修改其中的屬性

delimiters

Vue.config.delimiters = ["<%","%>"];

如果修改了默認(rèn)的分隔符，則文本插值中的語(yǔ)法{{example}}變成<%example%>

unsafeDelimiters

 Vue.config.unsafeDelimiters = ["<$","$>"];

如果修改了默認(rèn)的HTML插值分隔符，則HTML插值的語(yǔ)法由{{example}}變成<example exampleexample>

指令

v-if 可以根據(jù)表達(dá)式的值在DOM中生成或移除一個(gè)元素。支持template語(yǔ)法，惰性語(yǔ)法-如果初始渲染時(shí)條件為假，則什么也不做，在條件第一次為真時(shí)才開(kāi)始局部編譯
v-show 可以根據(jù)表達(dá)式的值顯示或者隱藏HTML元素。不支持template語(yǔ)法。
v-if有更高的切換消耗，而v-show有更高的初始渲染消耗，因此，如果需要頻繁地切換，則使用v-show較好；如果在運(yùn)行時(shí)條件不大可能改變，則使用v-if較好
v-else
它必須跟著v-if或v-show，充當(dāng)else功能
v-modal

用在input、select、text、CheckBox、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定

 <input type="text" v-modal="data.name" placeholder="" />

v-modal上可以加多個(gè)參數(shù)number、lazy、debounce

v-for 數(shù)據(jù)重復(fù)渲染指令

Vue.js 1.0.17及以后版本支持of分隔符；Vue.js 0.12.8及以后版本支持in分隔符。

 <li v-for="item in items" class="item-{{$index}}">
 {{$index}}-{{item.name}}
 </li>

v-for可以和Vue.js提供的內(nèi)置過(guò)濾器和排序數(shù)據(jù)一起使用。

 （1）filterBy

 語(yǔ)法：filterBy searchKey [in dataKey…]

 用法：

 <input v-modal="searchText">
 <ul>
 <li v-for="user in users | filterBy searchText in 'name'">{{name}}</li>
</ul>

再輸入框輸入名稱(chēng)，ul數(shù)據(jù)會(huì)根據(jù)輸入的值，在users的name字段中過(guò)濾出我們想要的信息，并展示出來(lái)。

(2) orderBy

語(yǔ)法：orderBy sortKey [reverseKey]

用法：

<ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
</ul>

在ul標(biāo)簽中根據(jù)field變量代表的tag字段正序排列數(shù)據(jù)

v-text

v-text指令可以更新元素的textContent，作用和{{Mustache}}一樣

v-html

v-html指令可以更新元素的innerHtml，作用和{{{Mustache}}}一樣

不建議在網(wǎng)站上直接動(dòng)態(tài)渲染任意的HTML片段，容易導(dǎo)致XSS攻擊。

v-bind

v-bind指令用于響應(yīng)更新Html特性，將一個(gè)或多個(gè)attribute，或者一個(gè)組件prop動(dòng)態(tài)綁定到表達(dá)式。v-bind可以簡(jiǎn)寫(xiě)：

 <img v-bind:src="imgSrc">
 <img :src="imgSrc">

在綁定prop時(shí)，prop必須在子組件中聲明。可以用修飾符指定不同的綁定類(lèi)型。

.sync-雙向綁定，只能用于prop
.once-單項(xiàng)綁定，只能用于prop
.camel-將綁定的特性名字轉(zhuǎn)換回駝峰命名。只能用于普通HTML特性的綁定，通常用于綁定用駝峰命名的SVG特性，比如viewBox。

<my-component :prop.sync="someThing"></my-component>

v-on

v-on指令用于綁定事件監(jiān)聽(tīng)器。事件類(lèi)型由參數(shù)指定；表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語(yǔ)句；如果沒(méi)有修飾符，也可以省略。

 <!--方法處理器-->
 <button v-on:click="doThis"></button>
 <!--內(nèi)聯(lián)語(yǔ)句-->
 <button v-on:click="doThis('hello',$event)"></button>
 <!--縮寫(xiě)-->
 <button @click="doThis"></button>

v-on后面可以添加的修飾符：

.stop-調(diào)用event.stopPropagation()
.prevent-調(diào)用event.preventDefault()
.capture-添加事件監(jiān)聽(tīng)時(shí)使用capture模式
.self-只當(dāng)事件是從偵聽(tīng)器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)
.{KeyCode|KeyAlias}-只在指定按鍵上觸發(fā)回調(diào)。Vue.js提供的鍵有：[esc:27、tab:9、enter:13、space:32、'delete':[8,46]、up:38、left:37、right:39、down:40]

v-ref

在父組件上注冊(cè)一個(gè)子組件的索引，便于直接訪問(wèn)，不需要表達(dá)式，必須提供參數(shù)id?？梢酝ㄟ^(guò)父組件的$refs對(duì)象訪問(wèn)子組件。

當(dāng)v-ref和v-for一起使用時(shí)，注冊(cè)的值是一個(gè)數(shù)組，包含所有子組件，對(duì)應(yīng)于綁定數(shù)組；

如果v-for使用在一個(gè)對(duì)象上，注冊(cè)的值是一個(gè)對(duì)象，包含所有子組件，對(duì)應(yīng)于綁定對(duì)象。

v-el

為DOM元素注冊(cè)一個(gè)索引，方便通過(guò)所屬實(shí)例的els訪問(wèn)這個(gè)元素?？梢杂胿−el:some−el設(shè)置this. els訪問(wèn)這個(gè)元素。可以用v−el:some−el設(shè)置this.els訪問(wèn)這個(gè)元素。可以用v-el:some-el 設(shè)置this.els.someEl.

 <span v-el:msg>hello</span>
 <span v-el:other-msg>world</span>

通過(guò)this.$els獲取響應(yīng)的DOM元素：

this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent //-> "world"

v-pre

編譯時(shí)跳過(guò)當(dāng)前元素和它的子元素?？梢杂脕?lái)顯示原始的Mustache標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。

v-cloak

v-cloak這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和css [v-cloak]{display:none}一起使用，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢，否則在渲染頁(yè)面時(shí)，有可能用戶(hù)會(huì)先看到Mustache標(biāo)簽，然后看到編譯后的數(shù)據(jù)。

 <div v-cloak>
 {{message}}
 </div>

下面看下去除vue插值表達(dá)式{{}}

vue 提供了v-cloak指令，該指令會(huì)綁定在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。

[v-cloak] {style:display:none} 和v-cloak一起使用時(shí)，會(huì)隱藏Mustach標(biāo)簽

直到實(shí)例準(zhǔn)備完畢。

具體參考http://vuejs.org.cn/api/#v-cloak

總結(jié)

以上所述是小編給大家介紹的Vue插值、表達(dá)式、分隔符、指令知識(shí)小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論