Vue插值、表達式、分隔符、指令知識小結

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

插值

基本用法

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

有時候只需要渲染一次數據，后續數據變化不再關心，可以通過“*”實現

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

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

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

表達式

表達式是各種數值、變量、運算符的綜合體

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

無效示例

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

添加過濾器，允許過濾器串聯，還支持傳入參數

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

分隔符

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

delimiters

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

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

unsafeDelimiters

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

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

指令

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

用在input、select、text、CheckBox、radio等表單控件元素上創建雙向數據綁定

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

v-modal上可以加多個參數number、lazy、debounce

v-for 數據重復渲染指令

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提供的內置過濾器和排序數據一起使用。

 （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數據會根據輸入的值，在users的name字段中過濾出我們想要的信息，并展示出來。

(2) orderBy

語法：orderBy sortKey [reverseKey]

用法：

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

在ul標簽中根據field變量代表的tag字段正序排列數據

v-text

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

v-html

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

不建議在網站上直接動態渲染任意的HTML片段，容易導致XSS攻擊。

v-bind

v-bind指令用于響應更新Html特性，將一個或多個attribute，或者一個組件prop動態綁定到表達式。v-bind可以簡寫：

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

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

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

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

v-on

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

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

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

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

v-ref

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

當v-ref和v-for一起使用時，注冊的值是一個數組，包含所有子組件，對應于綁定數組；

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

v-el

為DOM元素注冊一個索引，方便通過所屬實例的els訪問這個元素。可以用v−el:some−el設置this. els訪問這個元素。可以用v−el:some−el設置this.els訪問這個元素。可以用v-el:some-el 設置this.els.someEl.

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

通過this.$els獲取響應的DOM元素：

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

v-pre

編譯時跳過當前元素和它的子元素。可以用來顯示原始的Mustache標簽。跳過大量沒有指令的節點會加快編譯。

v-cloak

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

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

下面看下去除vue插值表達式{{}}

vue 提供了v-cloak指令，該指令會綁定在元素上直到關聯實例結束編譯。

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

直到實例準備完畢。

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

總結

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