一些常用的vue指令有：

1. v-text：内容以普通文本text显示

<div v-text="count"></div>等价于<div>{{count}}</div>

2. v-html: 内容以html显示

比如str值为：<span style="color:red;">测试</span>
<div v-html="str"></div>

页面上会显示红色的测试二字

3.v-bind：用于绑定属性，比如 srcUrl值为：.../img/arrow.png

将上面srcUrl绑定到img标签上：

<img v-bind:src="srcUrl" />
可以简写成：
<img :src="srcUrl" />

可以动态绑定多个值:

data() {
  return {
     attrsbind: {
       title: '测试',
       id: 'imgId',
       src: '....'
     }
  }
}

<img v-bind="attrsbind" />

4. v-on: 用于绑定事件

比如在一个button上绑定点击事件：

<button v-on:click="str+'你好'">点击</button>

可以缩写成：

<button @click="str+'你好'">点击</button>

可以绑定多个事件：

<div v-on="{click: func1, mouseover: func2}">...</div>

还可以在v-bind和v-on时设置动态参数，格式为：

<div v-bind:[attrName]="attrValue">...</div>

<div v-on:[eventName]="func">...</div>

v-on下还可以使用.prevent，.stop等修饰符：

<div v-on:click.prevent="func">...</div>

 上述v-on:click.prevent相当于对触发的事件调用event.preventDefault()阻止事件的默认行为。

<div v-on:click.stop="func">...</div>

上述v-on:click.stop相当于对触发的事件调用event.stopPropagation()阻止事件冒泡。

5. v-if、v-else-if、v-else:  根据条件判断是否渲染

<div v-if="color === 'red'">红色</div>
<div v-else-if="color === 'blue'">蓝色</div>
<div v-else>其它颜色</div>

6. v-show: 根据条件判断是否显示

<div v-show="color === 'red'">是红色哦</div>

跟v-if不同的是 v-show是不管显示和隐藏都是一直渲染在页面上的，不会从页面DOM中移除。

7. v-for:  循环

假设有个数组list，值为['red', 'green', 'pink', 'blue', 'orange']

<url>
  <li v-for="it in list" v-bind:key="it">
     颜色是: {{ it }}
  </li>
</ul>

8. v-cloak：在vue实例结束编译前先隐藏标签展示，防止页面上出现{{xxx}}这种未被渲染的数据：

<div v-cloak>测试一下吧</div>

 <style>
     [v-cloak]{
        display: none;
     }
</style>

9. v-pre:  将{{xxx}}原样展示在页面上，不做替换处理：

<div v-pre>{{ test }}</div>

10. v-once: 只渲染一次，当一个组件中内容静态时可以考虑使用，使用后该组件只会渲染一次

<span v-once>{{color}}</span>  // color不变
<span>{{color}}</span> // color随着input中输入内容改变而改变
<input type="text" v-model = "color">