模板語法
- 插值: 文本，純html，屬性，js表達式
- 指令：參數(shù)，修飾符
- Filter: 過濾器, 過濾器函數(shù)
- 縮寫 : v-bind, v-on
插值
文本：mustache 語法 => 純文本
<span>Message: {{ msg }} </span>
<span v-once>This will never change: {{ msg }}</span>
HTML: v-html 指令 XSS 攻擊
<div v-html="rawHtml"></div>
屬性：v-bind 指令
<div v-bind:id="dynamicId"></div>
<button v-bind:disabled="someDynamicCondition">Button</button>
javascript表達式：
這些表達式會在所屬 Vue 實例的數(shù)據(jù)作用域下作為 JavaScript 被解析
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
指令 Directives
v-xxx 屬性
<p v-if="seen">Now you see me</p>
參數(shù)：使用半角冒號（:）指明 只1個參數(shù)
<a v-bind:href="url"></a>
<a v-on:click="doSomething">
修飾符 Modifiers 使用半角句號（.）指明
<form v-on:submit.prevent="onSubmit"></form>
Filter
格式化文本 (更復(fù)雜的數(shù)據(jù)變換，你應(yīng)該使用計算屬性)
用在 mustache表達式 或者 v-bind中，表達式后面
用 pipe | 分割
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
過濾器函數(shù)
總接受表達式的值作為第一個參數(shù)
可以接受其他參數(shù)
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
{{ message | filterA('arg1', arg2) }}
縮寫
v-bind
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
