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添加键名，就能绑定该属性。
- 对象：
.active {
font-size: 40px;
color: #f66;
}如果vue项目中的active样式是由flag的值控制的data: { flag: true }
- 数组
.active {
font-size: 40px;
color: #f66;
}
.test {
background-color: #ccc;
}数组写法就是先把数据定义好，直接数组包裹即可data: {
activeClass: 'active',
testClass: 'test'
}
3. 绑定属性 绑定属性必然跟标签相关
原生的属性，只能是定值利用vue的绑定属性，给一个名为msg的属性，添加了一个值为msg的变量1
文章图片
2
文章图片
const app = new Vue({
el: '#app',
data: {
msg: 'hello vue', img: 'https://cn.vuejs.org/images/logo.png'
}
})
4. 循环遍历
【浅谈Vue_01】v-for = “item of/in list” :key="唯一性的值"可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法）
v-for = “(item, index) of/in list” :key="index"
