1. Vue的几个常用指令
v-if：条件判断 v-else-if v-else
v-show：条件判断
v-for：遍历循环使用
v-on：绑定事件
v-bind：绑定属性
v-model：input中使用 ，就会把它的值当做是输入框的value值
标签上v-html，就会把它的值插入到该标签内部 v-text
1. v-show和v-if的区别
v-if 渲染还是不渲染 ---- 运行时消耗更大
v-show 显示还是隐藏 ----- 初始渲染消耗更大
相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
2. class与style绑定
当数据来源是后端提供的时候，需要在v-bind中的class添加条件判断来绑定数据，有两种方式，一种是对象一种是数组。对象方式，是在class中给css属性做判断，如果是true那就给它绑定该css样式。而数组方式是把css样式的名称以值得方式存储在data中，给class添加键名，就能绑定该属性。
- 对象：
<style>
.active {
font-size: 40px; color: #f66;
}
</style>
<div :class="{active: flag}">
如果vue项目中的active样式是由flag的值控制的
</div>
data: { flag: true }
- 数组
<style>
.active {
font-size: 40px;
color: #f66;
}
.test {
background-color: #ccc;
}
</style>
<div :class="[activeClass, testClass]">
数组写法就是先把数据定义好，直接数组包裹即可
</div>
data: {
activeClass: 'active',
testClass: 'test'
}
3. 绑定属性
绑定属性必然跟标签相关
<div id="app">
<div msg="msg">原生的属性，只能是定值</div>
<div v-bind:msg="msg">
利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量
</div>
1<img src="img" alt="">
2<img v-bind:src="img" alt="">
</div>
const app = new Vue({
el: '#app',
data: {
msg: 'hello vue', img: 'https://cn.vuejs.org/images/logo.png'
}
})
4. 循环遍历
v-for = “item of/in list” :key="唯一性的值"
v-for = “(item, index) of/in list” :key="index"
可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法）
