1. v-text

1. 更新元素的content text，如果要更新部分的content text，需要使用{{ content text }}插值
2. 栗子

<div v-text="msg"></div>
<div>{{msg}}</div>

2. v-html

1. 更新元素的innerHTML
2. 栗子

<div v-html="html"></div>

3. v-show

1. 根据表达式值的真假，切换元素的display属性
2. 栗子

<div v-show="true">show time</div>

4. v-if

1. 根据表达式值的真假条件渲染元素
2. 栗子

<div v-if="true">hello</div>

5. v-else

1. 前一兄弟必须有v-if或v-else-if
2. 栗子

<div v-if="Math.random()" > 0.5">hello</div>
<div v-else>hello vue</div>

6. v-else-if

1. 前一兄弟必须有v-if或者v-else
2. 栗子

<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

1. 循环渲染元素
2. 栗子

<div v-for="for item in items">
    {{ item }}
<div>
<div v-for="for  (item, index) in items">
    {{ index }} : {{ item }}
</div>

8. v-on

1. 绑定事件监听器
2. 栗子

<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

1. 动态绑定一个或者多个属性，或一个组件的prop到表达式
2. 栗子

<div v-bind:background="bg"></div>
<img :src="images" />
<div :class="{bg: isred}"></div>

10. v-model

1. 在表单控件或着组件上创建双向绑定
2. 栗子

<input v-model="message" placeholder="input me" />
<div>{{ message }}</div>

that's all