Vue插值、表達(dá)式、分隔符、指令知識小結(jié)

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

插值

基本用法

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

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

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

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

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

表達(dá)式

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

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

無效示例

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

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

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

分隔符

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

delimiters

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

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

unsafeDelimiters

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

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

指令

v-if 可以根據(jù)表達(dá)式的值在DOM中生成或移除一個元素。支持template語法，惰性語法-如果初始渲染時條件為假，則什么也不做，在條件第一次為真時才開始局部編譯
v-show 可以根據(jù)表達(dá)式的值顯示或者隱藏HTML元素。不支持template語法。
v-if有更高的切換消耗，而v-show有更高的初始渲染消耗，因此，如果需要頻繁地切換，則使用v-show較好；如果在運(yùn)行時條件不大可能改變，則使用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上可以加多個參數(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)置過濾器和排序數(shù)據(jù)一起使用。

 （1）filterBy

 語法：filterBy searchKey [in dataKey…]

 用法：

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

再輸入框輸入名稱，ul數(shù)據(jù)會根據(jù)輸入的值，在users的name字段中過濾出我們想要的信息，并展示出來。

(2) orderBy

語法：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)站上直接動態(tài)渲染任意的HTML片段，容易導(dǎo)致XSS攻擊。

v-bind

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

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

在綁定prop時，prop必須在子組件中聲明。可以用修飾符指定不同的綁定類型。

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

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

v-on

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

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

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

.stop-調(diào)用event.stopPropagation()
.prevent-調(diào)用event.preventDefault()
.capture-添加事件監(jiān)聽時使用capture模式
.self-只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(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

在父組件上注冊一個子組件的索引，便于直接訪問，不需要表達(dá)式，必須提供參數(shù)id。可以通過父組件的$refs對象訪問子組件。

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

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

v-el

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

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

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

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

v-pre

編譯時跳過當(dāng)前元素和它的子元素?？梢杂脕盹@示原始的Mustache標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)會加快編譯。

v-cloak

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

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

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

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

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

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

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

總結(jié)

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