模板语法

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>