一、展示内容
1、表达式
{
{ object.a }} // 表达式
{
{ n+1 }} // 可以写任何运算
{
{ fn(n) }} // 可以调用函数 （一般在methods里面找到函数且调用）
如果值为 undefined 或 null 就不显示，这是经过Vue处理的
另一种写法为
2、HTML内容
假设 data.x 值为 hi
即可显示粗体的 hi
3、就想展示{ { n }} 的花括号的话
```js
如：
{
{ n }}
就添加：v-pre 因为它不会对模板进行编译
二、绑定属性
1、绑定 src
```js
<img v-bind:src="x" />
可以简写为：
<img :src="x" />
2、绑定对象
<div
:style="{border:'1px solid red', height:100}">
</div>
这里把'100px'写成100，Vue默认即为100为100px，当需要100em时，自己需要写100em
三、绑定事件
方法：v-on:事件名
可以缩写为： @事件名
不同的三种方式：
例如：
1、
<button v-on:click="add">-1</button>
//点击之后，Vue会运行 add()
<button @click="add">-1</button>//这是缩写
2、
<button v-on:click="xxx(1)">-1</button>
//点击后，Vue会运行 xxx(1)
PS：如果xxx(1)返回一个函数，怎么办呢？
那就直接把xxx(1)的这个函数给赋值到一个变量，比如： 赋值给一个add，然后就直接写add就好了。 但是不推荐这样用。
3、
<button v-on:click="n+=1">xxx</button>
//点击后，Vue会运行 n+=1
总结：如果发现函数就加个括号调用，否则就直接运行代码
四、条件判断
<div v-if="x>0">
x 大于 0
</div>
<div v-else-if="x===0">
x 为 0
</div>
<div v-else>
x 小于 0
</div>
五、循环
for(value,key) in 对象或数组
//数组例子
<ul>
<li v-for="(u,index) in users" :key="index"> //后面这个 :key="xxx" 必须写，不然会报错
索引:{
{
index}} 值:{
{
u.name}}
</li>
</ul>
//对象例子
<ul>
<li v-for="(value,name) in obj" :key="name"> //key后面最好放一个唯一性的值进去
属性名:{
{
name}} 属性值:{
{
name}}
</li>
</ul>
六、显示、隐藏
v-show
<div v-show="n%2===0">
n 是偶数
</div>
//真就显示，假就不显示
总结：
Vue模板的主要特点：
使用 XML 语法
使用{
{}}插入表达式
使用v-html 、 v-on 、-v-bind 等指令操作DOM
使用v-if 、 v-for 等指令实现条件判断和循环
