vue小白入手（二），对你多多少少会有一点帮助的vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue

王叔叔又来了，小白第二篇为大家献上

一，列表循环

功能：根据一组数据的选项列表进行渲染（自动for循环）。语法： value,key in items / value,key for items

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。

（1）遍历对象

<div id="app">
  <ul>
    <li v-for="(val, key, index) in me">{{index}}. {{key}}: {{val}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    me: {
      name: 'Dale',
      age: 22,
      sex: 'male',
      height: 170
    }
  }
});

这里，v-for 接收的参数相对较复杂，但是可以分为三个部分

（1）括号及其内的遍历结果信息（val, key, index）

其中，val 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="val in me"；

（2）遍历关键词 in

其实也有疑惑in of 有什么区别

in 可以使用 of 替代，官方的说法是“它是最接近 JavaScript 迭代器的语法”，但其实使用上并没有任何区别；

me 是绑定在实例 data属性上的一个属性，实际上，它是有一个执行环境的，也即是我们接触最多的 vue 实例，模板中，我们仍旧可以像在 methods 以及计算属性中一样，通过 this 访问到它，这里的 me 其实就相当于 this.me，模板中直接写 this.me 也是可行的。

渲染结果如下：

（二）遍历数组

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}. {{item}}</li>
  </ul>
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    items: ['apple', 'tomato', 'banana', 'watermelon']
  }
});

和遍历对象相类似，最大的不同点在于对象的 “key” 和 “index” 是一致的，所以这里我们只需要取一个 index 即可，上面代码的渲染结果如下：

（三）项目中

<div id="app">
   <ul class="persons">
    <li v-for="(person,index) in persons" :key="index">name: {{person.name}}, age: {{person.age}};</li>
  </ul> 
</div>
...
var vm = new Vue({
  el: '#app',
  data: {
    persons: [
      {
        name: 'Dale',
        age: 22
      }, 
      {
        name: 'Tim',
        age: 30
      },
      {
        name: 'Rex',
        age: 23
      }
    ]
  }
});

v-for 一样，在不绑定 key 属性的情况下，vue 默认会重用元素以提高性能，如果不需要它的默认行为，显式绑定一个唯一的 key 即可。本质上是遍历的一个数组，但是数组的每个元素却是一个对象，也就是上面的 person，我们可以通过 [] 以及 . 两种方式去访问这个对象的属性，比如这里的 name / age，渲染结果如下：

实际上，更加常用且强大的模式，是使用组件与数组/对象进行组合，操作方式与上面相类似

（四）v-for 和 v-if 同时使用的坑

原因：v-for比v-if优先级高，所以不会执行v-if，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。


  <ul>
<li
  v-for="user in users"
  v-if="user.isActive"
  :key="user.id"
>
  {{ user.name }}
</li>
  </ul>

如上情况，即使100个user中之需要使用一个数据，也会循环整个数组

正确应该是把你要判断的数据放到vue的计算属性里，它会把数据依据你的条件判断出来然后再进行循环

computed: {
activeUsers: function () {
return this.users.filter(function (user) {
  return user.isActive
})
}
}
<ul>
<li
  v-for="user in activeUsers"
  :key="user.id"
>
{{ user.name }}
</li>
</ul>

vue提供一组方法，对数组进行操作的时候，会触发视图更新（map()不会触发） ,但其并不是原生的方法，原生的方法是不会触发视图的更新

push()   |  pop()   |  shift()  |  unshift()
  splice() | sort()   | reverse()

2. 事件处理器（指令，绑定事件） — v-on=""

功能：用来监听DOM事件触发代码。语法： v-on:eventName = "eventHandle" 指令简写： @eventName = "eventHandle"

事件处理函数：写在Vue实例的methods中统一进行管理。

事件对象是事件系统提供的，在事件处理函数中获取

a) 当行间不触发的时候

v-on:keyup.enter = "addTodo"   
addTodo(ev){  ｝  //这里的ev就是事件对象

b) 当行间触发的时候（也就是加了个执行的括号）

v-on:keyup.enter = "addTodo(123,$event)"   //行间传入事件对象$event
addTodo(data,ev){  }  //需要在页面传参的时候，第一个参数为传入的参数，第二个参数才是事件对象

事件修饰符

事件处理函数只有纯粹的逻辑判断，不处理DOM事件的细节。

例如，阻止冒泡，取消默认行为、判断按键修饰符位置：以“.”写在事件名称后面。（ v-on:eventName.修饰符 = "xxx")

.stop（冒泡） | .prevent（默认事件） | .capture（捕获） | .self | .once（执行一次）

如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event，把它传入到methods中的方法中

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次

4 键盘修饰符

.enter：回车键
..tab：制表键
.delete：含delete和backspace键
.esc：返回键
.up：向上键
.down：向下键
.left：向左键
.space: 空格键
.right：向右键

条件渲染 — v-show=""

根据表达式的值，用来显示/隐藏元素** 语法： v-show="表达式"，根据表达式的值true和false，来判断显示或隐藏元素会被渲染到页面中，只是根据表达式的值进行css切换（display:none） Eg：数据list数组是否有内容 v-show="!list.length" v-if = "xxx"，是不在页面渲染的

6 动态绑定class

-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）

:class="{ 'active': isActive }"

判断是否绑定一个active、

:class="{'active':isActive==-1}"  
或者
:class="{'active':isActive==index}"

绑定并判断多个

第一种（用逗号隔开）
:class="{ 'active': isActive, 'sort': isSort }"
第二种（放在data里面）
//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样
:class="classObject"
data() {
  return {
    classObject:{ active: true, sort:false }
  }
}
第三种（使用computed属性）
:class="classObject"
data() {
  return {
    isActive: true,
    isSort: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      sort:this.isSort
    }
  }
}

*数组与三元运算符结合判断选择需要的class （注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染）

:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"

今天的内容到这里就结束了，这些都是一些很基础很基础一些东西，可以帮助小白更好的学习，对老人也可以起到一个简单的回忆吧，期待下一篇的到来

vue小白入手（二），对你多多少少会有一点帮助的

一， 列表循环