最近这段时间不是很忙，多少想写点东西，思来想去，还是对平时开发项目中用到的vue框架做点小总结吧，总结的知识点会很杂很碎，但都是基础，对需要入门的伙伴，或者长时间不使用的伙伴都会有些帮助，也算是自己的一个复习吧。话不多说，下面开始，这个章节 主要写些vue中常用的指令，及插值语法（或者说是插值表达式）：
1 插值语法（插值表达式）
由于vue是基于数据驱动的，所以当我们需要在页面中显示一段文本时，可以使用如下操作：
export default { data(){ return{ msg:"hello vue" } }, methods:{ handleClick(){ this.msg = "hello change" } } }在模板中输出msg中的值：可以使用{{}}，需要注意的是 我们的模板中必须有一个根节点，也只能有一个根节点 我们的操作都要在这个根节点中。
<template> <div>{{msg}}</div> </template>2 v-html 指令
这个指令主要是帮助我们显示带有标签的文本，比如我们的数据是这样的 msg2:'<span>测试文本</span>'
这种形式的文本我们用插值语法是无法将span标签解析的，这时我们可以使用v-html指令 如下：
<span v-html="msg2"></span>
3 v-if （v-else）和v-show指令
这两个指令主要是用来进行条件判断的，但是这两个指令的区别在于，当我们使用v-if指令时，如果条件为假，节点不会创建（或者节点会被删除），而v-show指令，会创建（隐藏节点），只不过是将display属性设置成none，来进行节点的显示或者隐藏
<span v-if="isShow"> 显示节点</span> <span v-else>显示节点2</span>
v-else 指令和v-if指令可以配合使用，使用方法和我们在js中的使用方式差不多，这里不做过多赘述；
4 v-for 指令
这个指令主要是用来做循环渲染的，类似于js中的for循环 ，使用方法如下： arr:['lisi','zhangsan','wangwu']
<ul> <li v-for="(item,key) in arr" :key="key"> {{item}} ------------ {{key}} </li> </ul>其中item代表的是我们循环出来的每一项，key代表的是改项在数组中的下标，复杂的数据循环同理，如果数据结构有多层的话，可以嵌套使用
5 v-bind指令
该指令主要用来绑定属性使用的 ，比如我们要渲染一张图片，我们可以绑定src属性，再比如我们要改变class类名，我们也可以使用该指令 使用方法如下：src:'https://xyylcdn.weein.cn/group1/M00/06/BF/rBUgBF8WtdWAKPOrAABgCedJ7gk388.jpg?filename=%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_1000750_gaitubao_367x275_gaitubao_345x275.jpg'
绑定src：
<img v-bind:src="src" alt=""> <!-- 简写如下 --> <img :src="src" alt="">
绑定class:
<span v-bind:class="className">类名绑定</span> <!-- 简写如下 --> <span :class="className">类名绑定</span>
v-bind的指令有个简写形式，简写的时候可以把v-bind省略，只留下：即可
6 v-on指令
该指令主要是用来处理事件绑定的，我们在js中使用的事件都可以使用这种方式进行绑定 如下：
<button v-on:click="handleClick">处理点击事件</button> <!-- 简写如下 --> <button @click="handleClick">处理点击事件</button>
methods:{ handleClick(){ this.msg = "hello vue" } }v-on指令也有简写形式，可以将v-on：替换成@符号即可
7 v-cloak指令
如果网速慢，而该标签内容是变量没有请求响应回来的时候，页面上先不显示该标签（vue给该标签加了css样式），当响应回来的时候改标签默认将css样式去除。此指令可以解决使用插值表达式页面闪烁问题
<div class="#app" v-cloak> <p>{{name}}</p> </div> [v-cloak] { display: none; } 未完待续，欢迎交流！
