1.模板template的三种写法

首先我们要明白template里面不是html语言而是xml语言，标签是需要闭合的

<input name="username"/>

1.vue完整版，写在html里面

2.vue完整版，写在选项里

3.vue不完整版，配合xxx.vue

2

1.v-bind 绑定属性

<img v-bind:src=:"x" />

简写方式:

<img :src="x"/>

<div :style="border:1px solid red"></div>

2.v-on 绑定事件

v-on:事件名

<button v-on:click="add"></button>

简写方式<button @click="add"></button>

3.条件判断 if...else

<div v-if="x>0">

判断x>0

</div>

4.循环 for(value,key)in 对象/数组

<ul v-for="(u,index) in users" :key="index">

索引:{{index}} value值是{{u.name}}

</ul>

5.显示或者隐藏

<div v-show="n%2===0">n是偶数</div>

元素已经生成存在，只不过可能看不见（display）

6.Vue模板的特点

1.使用XML语法而不是HTML语法

2.表达式采用{{}}

3.使用v-html v-bind v-on等指令来操作dom

4.使用v-if v-for来实现条件判断和循环语句 

7.指令 directive

什么是指令，以v开头的就是指令

v-指令名:参数=值 v-on:click="add"

8.修饰符

一些指令支持修饰符

@click.stop="add"

@click.prevent="add"

@click.stop.prevent="add"

.sync修饰符