模板语法

1. 插值: 文本，纯html，属性，js表达式
2. 指令：参数，修饰符
3. Filter: 过滤器, 过滤器函数
4. 缩写 : 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 实例的数据作用域下作为 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>

参数：使用半角冒号（:）指明 只1个参数

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

修饰符 Modifiers 使用半角句号（.）指明

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

Filter

格式化文本 (更复杂的数据变换，你应该使用计算属性)
用在 mustache表达式 或者 v-bind中，表达式后面
用 pipe | 分割

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数
总接受表达式的值作为第一个参数
可以接受其他参数

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>