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){  }  //须要在页面传参的时候，第一个参数为传入的参数，第二个参数才是事件对象
复制代码

3. 事件修饰符

事件处理函数只有纯粹的逻辑判断，不处理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：向右键
 

 

5. 条件渲染 — 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']"

复制代码

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