在html中展示内容的方法
- 表达式
1. <div>{{ object.a }}</div> 表达式
2. <div>{{ n+1 }}</div> 可以写任何运算
3. <div>{{ fn(n) }}</div> 可以调用函数
如果值为 undefined 或 null 就不显示
4. 以上三种可以写成另一种写法（这个方法没什么用，建议有{{}}）
<div v-text="以上三种写法的一种"></div>
v-html 显示HTML里自带的的标签样式呢，比如strong 、 i 、 b 等等
<div v-html="x"></div>
v-pre 不会对模板进行编译，显示{{n}}
<div v-pre>{{ n }}</div>
绑定属性，请使用简写
- 绑定src
<img v-bind:src="x" />
可以简写成
<img :src="x" />
- 在div上绑定对象，写样式
<div :style="{border: '1px solid red', height:100}"></div>
注意： 这里的100px可以写成100，但是如 em 或者其他不能
绑定事件
<button v-on:click="add">+1</button>
简写成
<button @click="add">+1</button>
条件判断v-if，v-else-if，v-else
<div v-if="x > 0"></div>
<div v-else-if="x === 0"></div>
<div v-else="x > 0"></div>
循环遍历修饰符v-for
注意：使用v-for 遍历的对象很复杂，建议后面跟着 :key
<ul>
<li v-for="(u, index) in users" :key="index">{{u.name}}</li>
</ul>
--------------------------------------------------------------------
<ul>
<li v-for="value in users" >{{value}}</li>
</ul>
显示、隐藏v-show
- v-show 指令通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。
<div v-show="n > 0"></div>
如果n > o 就展示该div，否则不展示
修饰符,可直接去看官方文档
<div @click.stop="add"></div>
`.stop` 对应event.stopPropagation 阻止事件冒泡
`.prevent` 对应event.preventDafault 阻止默认事件
`.capture` 设置事件为捕获流中
`.self` 只有event.target 为自身才触发事件
`.once` 事件只触发一次
`.passive` 不检查是否默认事件被阻止 用于触碰滚动时性能会更好
加红的是常用的修饰符
- v-on常用的的修饰符
.stop.prevent - v-bind支持的修饰符.prop .camel
.sync - v-model支持的修饰符 .lazy .number .trim
