Vuejs --03 模板文法

標籤：function   mit   函數   eth   ref   bin   tac   流控   模板   

一、插值     1、文本

<span>{{msg}}</span>     //mustache文法 <span v-once>{{msg}}</span>     //一次性插值，當資料改變時，不會響應式更新

         2、純HTML     你的網站上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對使用者提供的內容插值。

<div v-html="rawHtml"></div>

      3、特性          3.1     mustache 文法不能作用在HTML特性上（也就是只能資料賦值，不能屬性賦值，屬性賦值用v-bind指令）          3.2     v-bind指令同樣適用布爾類型：如果求值結果是 falsy 的值，則該特性將會被刪除      4、適用JavaScript運算式

{{num + 1}}{{num > 0 ? num++ : num}}{{ message.split(‘‘).reverse().join(‘‘) }}<div v-bind:id="‘list-‘ + id"></div>

//以下報錯： <!-- 這是語句，不是運算式 -->{{ var a = 1 }}<!-- 流量控制也不會生效，請使用三元運算式 -->{{ if (ok) { return message } }}

 

二、指令

     1、是帶v-首碼的特殊屬性，預期是單個JavaScript運算式。 指令的職責：當運算式值發生改變時，將其產生的連帶影響，響應式地作用於DOM      2、參數：可以是HTML 屬性，事件名等

<a v-bind:href="url"></a><a v-on:click="btnEvent"></a>

     3、修飾符     修飾符（Modifiers）是以半形句號  . 指明的特殊尾碼，用於指出一個指令應該以特殊方式綁定。

<form v-on:submit.prevent="onSubmit"></form>

 三、過濾器     1、解釋：上一個過濾器的輸出成為下一個過濾器的輸入，然後再次過濾     eg.    {{ msg | capitalize }}  --> 將輸入的字串轉換成大寫字母的過濾器。     2、Vuejs允許自訂過濾器，用於一些常見的文字格式設定化，可以用在兩個地方：mustache、v-bind運算式。 過濾器應該被添加在 JavaScript 運算式的尾部，由“管道”符指示

<!-- in mustaches -->{{ message | capitalize }}     // message 結果是 capitalize 的輸入<!-- in v-bind --><div v-bind:id="rawId | formatId"></div> <script>     new Vue({        // ...        filters: {            capitalize: function(value) {     //value，是上一個過濾器的輸出得出的結果，先成為此過濾器的輸入，即value=message                if (!value) return ‘‘                value = value.toString()                return value.charAt(0).toUpperCase() + value.slice(1)            }        }    }) </script>

     3、過濾器可以串聯

{{ message | filterA | filterB }}

     4、過濾器可以接受參數（因為過濾器是JavaScript函數）

{{ message | filterA(‘arg1‘, arg2) }}

 四、縮寫

<!-- 完整文法 --><a v-bind:href="url"></a><!-- 縮寫 --><a :href="url"></a> <!-- 完整文法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>

 

  

Vuejs --03 模板文法