Vue模板

是基于HTML的模板语法，可以使用自闭合标签

文本

“Mustache”语法 (双大括号{{**}**}) 的文本插值
{{}}插入表达式

原始HTML

使用v-html指令
只对可信任的内容使用HTML插值，绝不要对用户提供的内容使用插值
**

Attribute

HTML的属性中，Mustache语法并不能用，应使用v-bind指令
对于布尔值attribute，如的disabled属性，值为null、undefined、false，则disabled属性根本不会被渲染出来在元素中

支持js表达式

完全支持表达式，如：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

但不支持语句和流控制

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

**v-** 前缀开头的特殊attribute，指令的值预期是单个js表达式（v-for除外）
如：v-html v-on v-bind 等指令去操作DOM
v-if v-for 等指令实现条件判断和循环
v-bind 用法（绑定属性）：

你好

参数

一些指令能够接受一个“参数”，在指令后以冒号表示，如v-bind和v-on

动态参数

用方括号[]括起来的js表达式作为指令参数，同样适用于v-bind和v-on

值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告

表达式的约束

空格和引号放在HTML attribute名里是无效的，使用计算属性代替复杂表达式，避免大写字符来命名键名

修饰符

是以半角句号 . 指明的特殊后缀，指出一个指令应以特殊方式绑定例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

缩写

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

指令详解

v-bind

你好

v-on

+1
xxx
<button v-on:cliclk=”n+=1’>xxx 缩写 +1

v-model

v-model="xxx"
在input标签里是
v-bind:value="xxx"
v-on:input="xxx=$event.target.value"
这两句代码的语法糖

v-if&v-if-else&v-else（条件渲染）

在