模板语法
Vue模板主要特点：
- 使用XML语法
- 使用 {{ }} 插入表达式
- 使用v-html v-on v-bing等指令操作DOM
- 使用v-if v-for 等指令实现条件判断和循环
表达式：
{{ object.a }} 表达式
{{ n + 1 }} 可以写任何运算
{{ fn(n) }} 可以调用函数
如果值为undefined或null则不显示
另一种写法为<div v-text="表达式"></div>（基本没人用）
HTML内容
假设data.x值为<strong>hi</strong>
<div v-html="x"></div>即可显示为
hi
指令Directive:
在Vue中，v-xxx 就是指令
语法：v-指令名:参数=值，例如 v-on:click=add
Vue指令中有两个缩写
v-on:=>@v-bind:=>:
-
v-text 输出普通文本
-
v-html 输出真正的html
-
v-pre 预览：不对模板进行编译
-
v-bind：绑定src--标准写法
<img v-bind:src="x" />，简写为<img :src="x" /> -
绑定对象
-
v-on:事件名，例:
<button v-on:click="add">+1</button>，点击后Vue会运行add()
<button v-on:click="n+=1">xxx</button>，点击后会直接运行n+=1
缩写：<button @click="add">+1</button>（正常人都用缩写）
- 条件判断：
if...else
<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else>x小于0（其他）</div>
- 循环
v-for
for(value,key) in 对象或数组
- v-show
<div v-show="n%2===0">n是偶数</div>
如果条件为true，div会显示，如果为false，则不显示。
修饰符：
有些指令支持修饰符，例如
@click.stop=add 表示阻止事件传播/冒泡
@click.prevent=add 表示阻止默认动作
@click.stop.prevent=add 同时表示两种意思
v-on支持的修饰符有
-
.{keycode|keyAlias}
-
.stop
-
.prevent
-
.capture
-
.self
-
.once
-
.passive
-
.native
快捷键相关：
-
.ctrl
-
.alt
-
.shift
-
.meta
-
.exact
鼠标相关
-
.left
-
.right
-
.middle
v-bind支持的
-
.prop
-
.camel
-
.sync
v-model支持的
-
.lazy
-
.number
-
.trim
（以上修饰符中，加粗的需要特别熟悉）
