Vue使用基于HTML的模板语法
- 模板编译为虚拟DOM渲染函数
- 状态改变
- Vue计算渲染组件最小代价更新DOM
也可不用模板，使用render函数，jsx语法渲染
1.插值
<div v-bind:id="id" :name="id">{{text}}</div>
<!-- bind once -->
<div v-once="text"></div>
<!-- bind html -->
<div v-html="html"></div>
<input :readonly="readonly"></input>
<!-- 使用javascript表达式 -->
<div>{{number + 1}}</div>
<div>{{true ? 1: 0}}</div>
<div>{{message.toUpperCase()}}</div>
2.指令
带有v-前缀的特殊属性，值为javascript表达式
<div v-if="show">hello</div>
<!-- 某些指令能接收一个"参数"，如：v-bind, v-on -->
<a v-bind:href="url" >link</a>
<!-- .修饰符,用于指出指令以某种特殊方式绑定 -->
<a v-on:click.stop="funClick">link</a>
3.缩写
v-前缀用来辨识模板中Vue特定特性，Vue为v-bind和v-on提供了特定简写
<!-- v-bind缩写为: -->
<a v-bind:href="url">link</a>
<a :href="url">link</a>
<!-- v-on缩写为@ -->
<a v-on:click="funClick">link</a>
<a @click="funClick">link</a>
