Vue笔记(2)-列表渲染（未完）

.v-for:列表渲染

  一、把一个数组对应为一组元素

    1、v-for ：根据一组数组的选项列表进行渲染。

     v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="app_1">
    <ul>
        <li v-for="food in foodList">{{food.name+":"+food.price}}</li>
    </ul>
</div>

var app1=new Vue({
    el:"#app_1",
    data:{
        foodtime:"今日菜价",
        foodList:[
            {name:"葱",price:10},
            {name:"姜",price:5},
            {name:"蒜",price:8},
        ]
    }
})

       2、在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

        item in items中in可以用of代替

<ul>
  <li v-for="(food,index) in foodList">{{foodtime}}-{{index}}-{{food.name}}-{{food.price}}</li>
</ul>

二、一个对象的 v-for

   1、用v-for通过一个对象的属性迭代

<ul id="v-for-obj">
    <li v-for="info in food">{{info}}</li>
</ul>

new Vue({
    el:"#v-for-obj",
    data:{
        food:{
            name:"葱",
            price：10
        }
    }
})

   2、提供第二个可选参数key

<ul id="v-for-obj">
    <li v-for="(info,key) in food">{{key}}:{{info}}</li>
</ul>

   3、第三个可选参数index

<ul id="v-for-obj">
    <li v-for="(info,key,index) in food">{{index}}.{{key}}:{{info}}</li>
</ul>

遍历对象，按照object.keys()的结果遍历，但是不能保证在不同的js引擎下结果相同。

   4、属性key（:key)：建议尽可能在使用v-for时提供key

      key的作用 https://www.zhihu.com/question/61064119

      理想的 key 值是每项都有的唯一 id(最好不要使用index),它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值

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

三、数组更新检测

1.变异方法

 会改变方法调用的原始数组，可以触发视图更新

push()      //数组末尾添加
pop()       //删除数组的最后一个元素
shift()     //删除数组的第一个元素
unshift()   //数组的开头添加元素
splice()    //从数组添加/删除项目
sort()      //数组的元素进行排序,并返回数组
reverse()   //数组反转

2.替换数组

不会改变原始数组，返回一个新数组

filter()   //把数组的某些元素过滤掉，返回剩下的元素
contat()   //连接两个或多个数组
slice()    //从已有的数组中返回选定的元素

3.注意事项

    由于 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 // 不是响应性的

 解决上面问题并且触发状态更新的方法，

(1) Vue.set(vm.items, indexOfItem, newValue)
   = vm.$set(vm.items, indexOfItem, newValue)
   = vm.items.splice(indexOfItem, 1, newValue)

(2)vm.items.splice(newLength)

四、对象更改检测注意事项

 由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

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

vm.b = 2
// 'vm.b' 不是响应式的

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

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

你可以添加一个新的 age 属性到嵌套的 userInfo 对象：

 Vue.set(vm.userInfo, 'age', 27)
=vm.$set(vm.userInfo, 'age', 27)

2.为已有对象赋予多个新属性，比如使用了object.assign()或者_.extend()。这种情况要用两个对象的属性创建一个新的对象，so

(这里还不太明白，没用过object.assign()，先做标记)

vm.userInfo=Object.assign({},vm.userInfo,{
    age:27,
    name:"join"
})

五、显示过滤/排序结果

(1)计算属性:想要显示一个数组的过滤或排序副本，不改变原始数据，因此需要创建返回过滤或排序数组的计算属性。

<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
        })
    }
}

(2)method方法：在计算属性不适用的情况下，（例如，嵌套v-for循环中）可以使用一个method方法:

<li v-for="n in even(numbers)">{{n}}</li>

data{
    numbers:[1,2,3,4,5]
},
methods:{
    even:function(numbers){
        return numbers.filter(function(number){
            return number % 2 === 0
        })
    }
}

六、一段取值范围的 v-for

<div>
    <span v-for="n in 6">{{n}}</span>
</div>

结果：1 2 3 4 5 6

七、v-for on a <template>

类似于 v-if，你也可以利用带有 v-for 的 <template> 渲染多个元素。

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

八、v-for width v-if

1.当处于同一节点时，v-for的优先级比v-if更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">{{todo}}</li>

上面的代码只传递了未完成的 todos。

2.若你的目的是有条件的跳过循环的执行，那么可以将v-if置于外层元素（或<template>）。

<ul v-if="todo.length">
    <li v-for="todo in todos">{{todo}}</li>
</ul>
<p v-else>No todos left!</p>

九、一个组件的v-for 

这一点等我学习了组件理解之后添加