1. v-text
- 更新元素的content text，如果要更新部分的content text，需要使用{{ content text }}插值
- 栗子
<div v-text="msg"></div>
<div>{{msg}}</div>
2. v-html
- 更新元素的innerHTML
- 栗子
<div v-html="html"></div>
3. v-show
- 根据表达式值的真假，切换元素的display属性
- 栗子
<div v-show="true">show time</div>
4. v-if
- 根据表达式值的真假条件渲染元素
- 栗子
<div v-if="true">hello</div>
5. v-else
- 前一兄弟必须有v-if或v-else-if
- 栗子
<div v-if="Math.random()" > 0.5">hello</div>
<div v-else>hello vue</div>
6. v-else-if
- 前一兄弟必须有v-if或者v-else
- 栗子
<div v-if="Math.random() > 0.5">hello<div>
<div v-else-if="Math.random() < 0.5">hello world</div>
<div v-else>hello vue.js</div>
7. v-for
- 循环渲染元素
- 栗子
<div v-for="for item in items">
{{ item }}
<div>
<div v-for="for (item, index) in items">
{{ index }} : {{ item }}
</div>
8. v-on
- 绑定事件监听器
- 栗子
<div v-on:click="clickme">click</div>
<div @on:click="clickme">click</div>
<div v-on:[event]>click<div>// 动态事件
<div @click.stop="click">click</div>//停止事件冒泡
<div @click.prevent="dosome">click</div>// 阻止默认行为
9. v-bind
- 动态绑定一个或者多个属性，或一个组件的prop到表达式
- 栗子
<div v-bind:background="bg"></div>
<img :src="images" />
<div :class="{bg: isred}"></div>
10. v-model
- 在表单控件或着组件上创建双向绑定
- 栗子
<input v-model="message" placeholder="input me" />
<div>{{ message }}</div>
that's all
