浅谈Vue_01

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添加键名，就能绑定该属性。

• 对象：

  如果vue项目中的active样式是由flag的值控制的

data: { flag: true }

• 数组

  数组写法就是先把数据定义好，直接数组包裹即可


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. 循环遍历

v-for = “item of/in list” :key="唯一性的值"
v-for = “(item, index) of/in list” :key="index"

可以遍历数组，可以遍历对象，还可以遍历字符串，一定要记得加 key 值（钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法）