快捷導(dǎo)航

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

更新時(shí)間：2018年10月12日 12:42:26 作者：暴走的奶糖

這篇文章主要介紹了Vue插值、表達(dá)式、分隔符、指令的相關(guān)知識(shí)，文中給大家提到了去除vue插值表達(dá)式{{}}的方法,需要的朋友可以參考下

最近打算重溫一遍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)心，可以通過“*”實(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(",") }}

無效示例

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

添加過濾器，允許過濾器串聯(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)的分隔符，則文本插值中的語法{{example}}變成<%example%>

unsafeDelimiters

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

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

指令

這里寫圖片描述

v-if 可以根據(jù)表達(dá)式的值在DOM中生成或移除一個(gè)元素。支持template語法，惰性語法-如果初始渲染時(shí)條件為假，則什么也不做，在條件第一次為真時(shí)才開始局部編譯
v-show 可以根據(jù)表達(dá)式的值顯示或者隱藏HTML元素。不支持template語法。
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)置過濾器和排序數(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ù)會(huì)根據(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)站上直接動(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)寫：

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

在綁定prop時(shí)，prop必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋?。

.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)聽器。事件類型由參數(shù)指定；表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(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)聽時(shí)使用capture模式
.self-只當(dā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è)子組件的索引，便于直接訪問，不需要表達(dá)式，必須提供參數(shù)id?？梢酝ㄟ^父組件的$refs對(duì)象訪問子組件。

當(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è)索引，方便通過所屬實(shí)例的els訪問這個(gè)元素?？梢杂胿−el:some−el設(shè)置this. els訪問這個(gè)元素?？梢杂胿−el:some−el設(shè)置this.els訪問這個(gè)元素?？梢杂胿-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

編譯時(shí)跳過當(dāng)前元素和它的子元素?？梢杂脕盹@示原始的Mustache標(biāo)簽。跳過大量沒有指令的節(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)備完畢，否則在渲染頁面時(shí)，有可能用戶會(huì)先看到Mustache標(biāo)簽，然后看到編譯后的數(shù)據(jù)。