简介
vue指令的特征是都有着 "v-" 前缀，其本身也是一个属性，不同属性对应不同功能。我们可以来到vue的官网查看：
v-html
在之前的文章中我们介绍到了简单基础的vue实例中，我们可以通过插值表达式来动态渲染页面文本。但是我们想要动态渲染元素（也就是标签）时，插值表达式就不能正确地将代码文本识别成元素：
如果我们想要识别代码文本，将其动态渲染成元素，可以使用v-html指令。
注意，v-html要用在<div>盒子中：
v-show和v-if
v-show和v-if都是控制元素的显示与隐藏。但两者底层上不一样。
v-show：通过控制元素的属性 display:none 来控制显示隐藏。即使隐藏，在客户端的浏览器中会获取到该元素的相关数据。
v-if：根据条件控制元素的 创建 与 移除。当判定为隐藏时，客户端的浏览器中不会获取到该元素的相关数据。
这是显示时的状态：
现在还看不出太多。我们来到控制台：
我们在控制台给flag赋值为false后：
可以看到由v-if控制的盒子元素被移除了，网页数据变成了一行空注释。
使用场景：
v-show适用于局部加载的场景，比如csdn左上角的个人信息缩略栏。如果每次鼠标悬停在个人头像上都要请求一次数据，对服务器的压力很大。所以此时可以使用v-show设置为隐藏。
而对于信息较为敏感需要安全保密的数据，就可以使用v-if。比如同一个系统的不同种类用户之间的可见信息，管理员和普通用户的可见信息肯定不一样。这时候就可以用v-if。
另外则是，隐藏元素会一定程度的影响页面布局，该移除时移除，不要过多影响页面布局。
v-else和v-else-if
用来配合v-if进行判断，跟编程语言中的if...else...一致。所以不多讲，给实例演示：
v-on
在普通的html+js中，处理交互我们需要 监听事件 + 编写处理逻辑，同时还要及时加载数据变动，而且需要分开编写代码，过程较为繁琐。在vue里则简化很多，因为响应式已经被封装好了，而监听事件 + 编写处理逻辑我们可以使用 v-on指令。
v-on的语法：
v-on:事件名 = "内联语句" （你可以理解为就是一段代码）
v-on:事件名 = "methods中的函数名"
v-on也可以简写成 @，也就是 @事件名 = ""
v-on:事件名 = "内联语句"
内联语句能做的事情有限。我们演示一下最基础的内容：
<body>
<div id="app" class="container">
<div class="box">
<button v-on:click="num++">+1</button>
</div>
<div class="box"> {{num}} </div>
<div class="box">
<button v-on:click="num--">-1</button>
</div>
</div>
<script src="your vue's libPath"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num:114514
}
})
</script>
</body>最终效果如下，你可以通过点击+或者-来使得中间的数字加或减。v-on监听该元素上的事件，然后触发时执行内联语句，使得 num 属性的值增加或减少，而num又被vue动态地渲染到页面中
v-on:事件名 = "methods中的函数名"
首先要再讲到methods，创建vue实例有三个参数，其中methods中就用来存储方法：
我们直接上示例：
<body>
<div id="app" class="container">
<div class="box">
<button @click="forshow()">==</button>
</div>
<div v-show="flag" class="box"> Hello vue! </div>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag:true
},
methods: {
//提供方法
forshow(){
if(app.flag){
this.flag = false;
}else {
this.flag = true;
}
}
}
})
</script>
</body>在methods中，可以使用this来指向当前vue实例。
v-bind
v-bind用来动态地设置html的属性，例如src等。
语法和v-on类似：
v-bind:属性名 = ""
其中v-bind可以不写，只写 : ，也就是下面的img标签可以改为<img :src="imgSrc"/>
v-for
主要作用是基于数据循环来多次渲染数据。渲染的数据可以是数组、对象等，这里以数组为例。
基本语法：
v-for = "(item,index) in 数组名"
item：每一项
index：下标 （可省略）
这里要注意，item和index是作为一个可调用参数，给我们的标签使用的，而不是我们要传的参数。我们需要去写的只有数组名。
参数只有item是必要的，指向当前遍历到的元素。v-for本质上并不是编程语言里面的for循环，而是迭代遍历。所以在我们不需要使用到index的时候，index可以省略
v-for默认会尝试修改原本的元素，而不是将其删除。
什么意思呢？比如说有一个list有5个元素，如果不使用key，你删除了下标为3的数据后，下标为3的元素不会删除，而下标为4的元素的数据会前进到下标为3的元素中，最后下标为5的元素会被删除。
如果想要让我们的一些操作正确的指向当前元素，我们还需要使用到key，用来给当前元素起别名，让我们的事务正确指向它。
<body>
<div id="app" class="container">
<ul>
<li v-for="(item, index) in list" :key="item.name">
<h1> 第{{index + 1}}位学生: {{item}}</h1>
<button @click="del(item.name)">删除</button>
</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list:[
{name:"张三"},
{name:"李四"},
{name:"王五"},
{name:"赵六"}
]
},
methods: {
del(name){
this.list = this.list.filter(item => item.name !== name);
}
}
})
</script>
</body>v-model
v-model主要用于表单数据中，讲输入栏的数据与data中的数据绑定，实现数据双向。也就是你在输入栏中输入数据，会实时更新data中绑定的数据，而你在后台中改变了data中的数据，相应的输入栏中的数据也会改变。
<body>
<div id="app" class="container">
账户:<input type="text" v-model="name"><br>
</div>
<script src="lib/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name:''
}
})
</script>
</body>