Mr_ven

8、列表渲染-vue渐进式javascript框架基础
使用v-for把一个数组对应为一组元素 我们使用v-for指令根据一组数组的选项列表进行渲染,v-for指令需要使...
扫描右侧二维码阅读全文
21
2019/05

8、列表渲染-vue渐进式javascript框架基础

使用v-for把一个数组对应为一组元素

我们使用v-for指令根据一组数组的选项列表进行渲染,v-for指令需要使用item in items这样的特殊语法,items是源数据,item是根据源数据迭代的别名

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在v-for中拥有父作用域的完全控制权限,v-for还支持可选的当前项索引

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

可以使用of替代in作为分隔符

<div v-for="item of items"></div>

一个对象的v-for

可以使用v-for通过一个对象的属性来迭代

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

可以使用第二个键名的参数:

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

在对象的循环中第三个参数为索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

在遍历对象的时候是根据 ==Object.keys()== 的结果遍历,不能保证在不同的javascript引擎中是一致的。

key

vue.js对于list默认渲染模式是高效的,但是只适用于 不依赖子组件状态或临时dom状态(例如表单输入值)的列表渲染输出。

为了给vue一个识别每个节点身份,从而重新排序现有元素,需要给每项提供一个key,理想的key是每项都有一个唯一的id,它的工作方式类似一个属性,可以用v-bind进行动态绑定值

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

尽可能在使用v-for时提供key,除非内容非常简单或者刻意依赖默认行为获取性能上的提升

==不要使用数组或对象中的非原始类型值作为key== 用字符串或数类型的值代替

数组更新检测

#变异方法

Vue包含了观察数组变化的变异方法,所以他们也将触发视图更新,方法如下:

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

#替换数组

变异方法会改变被这些方法调用的原始数据,非变异方法如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新的数组,当使用非变异方法的时候,可以用新的数组替换旧数组:

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

#注意事项

由于JavaScript的限制,Vue不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,
    例如:vm.items[indexOfItem] = newValue
  2. 改变数组长度时,例如: vm.items.length = newLength

举个例子

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为解决这两种问题,使用以下方法可以实现和 ==vm.items[indexOfItem] = newValue== 相同的方法并且同时触发状态更新:

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

也可以使用 ==vm.$set== 实例方法,该方法是全局方法 ==Vue.set== 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

为解决第二个问题可以使用splice

vm.items.splice(newLength)

对象更改检测注意事项

由于JavaScript的限制vue 不能检测对象属性的增加或删除

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例,vue不能动态的添加根级别的响应式属性,可以使用Vue.set(object, key, value)方法向嵌套对象添加相应式属性,例如:

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

可以添加新的age到嵌套的userProfile中

Vue.set(vm.userProfile, 'age', 27)

也可以使用vm.$set实例方法,他是全局Vue.set的别名

vm.$set(vm.userProfile, 'age', 27)

有时可能需要对现有的对象增加多个新的属性,这种情况下应该用两个对象的属性创建一个新的对象。

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

反例:

Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤/排序效果

有时我们需要显示过滤或排序后的副本而不实际的去改变原始数据,这种情况下可以创建返回过滤排序数组的计算属性,例:

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不适用的情况下可以使用一个method方法:

<li v-for="n in even(numbers)">{{ n }}</li>
data:{
    numbers:[1,2,3,4,5,6,7,8]
},
methods:{
    even:function(numbers){
        return numbers.filter(function(number){
            return number%3==0
        })
    }
}

一段取值范围的v-for

v-for可以取整,这种情况下将会重复多次模板

<li v-for="n in 10">{{n}}</li>

v-for on a < template>

可以利用带v-for的template渲染多个元素

<template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation">11</li>
</template>

v-for with v-if

不推荐同时使用v-for和v-if,他们处于同一个节点的时候,v-for的优先级比v-if要高,当你想为仅有的一些项渲染节点的时候,这种优先级机制十分有用。

如果你的目的是跳过整个循环的话,就需要v-if写在v-for外面。

一个组件的v-for

在自定义组件中可以像普通元素一样使用v-for

在2.2.0版本后,当组件使用v-for时,key是必须要存在的

<my-component v-for="item in items" :key="item.id"></my-component>

任何数据都不会自动传递到组件中去,因为组件有自己独立的作用域,为了吧迭代的数据传到组件中,我们需要用到props

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>
Vue.component("my-component",{
    props:["item"],
    template:"<li>{{item}}</li>"
})

不自动将item传递到组件中的原因是,这样会使得组件与v-for的运作紧密耦合,明确组件数据来源能够使组件在其他场合重复使用。

<div id="test1" >
    <form @submit.prevent="addNewTodo">
        <label for="new-todo">Add Todo</label>
        <input v-model="nextName" id="new-todo" placeholder="请输入..." />
        <button>add</button>
    </form>
    <ul>
      <li is="my-component"
          v-for="(item, index) in items"
          v-bind:item="item"
          v-bind:index="index"
          v-bind:key="item.id"
        ></li>
    </ul>
</div>
Vue.component("my-component",{
    props:["item"],
    template:"<li>{{item.id}}:{{item.name}}</li>"
})
var test1=new Vue({
    el:"#test1",
    data:{
        nextName:"",
        nextId:3,
        items:[{id:1,name:"test1"},{id:2,name:"test2"}]
    },
    methods:{
        addNewTodo:function(){
            this.items.push({
                id:this.nextId++,
                name:this.nextName
            })
            this.nextName="";
        }
    }
})

这里的is="my-component"属性,这种做法使用dom模板时十分必要,因为ul标签中只有li元素才能被看成有效标签,这样做的效果与相同,但是可以避开一些潜在的浏览器解析错误。

最后修改:2019 年 05 月 21 日 02 : 46 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论