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算法）

浅谈Vue_01