Vue学习笔记三

v-for中就地复用原则

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
解决方法：
建议尽可能使用 v-for 来提供 key ，除非 DOM 内容遍历起来非常简单，或者你是有意识的要依赖于默认行为以便获得性能提升。
如果不添加一个唯一的key值，那么选中复选框，删除以后，后面上来的元素还是处于选中状态

<div id="app">        <div v-for="(item,index) in items" :key="item.id">            <p>{{item.name}}---{{item.age}}---{{item.boy}}----<input type="checkbox">-------<span @click="deleteItem(index)">X</span></p>        </div>    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                items:[                    {id:1,name:"xiaoD1",age:20},                    {id:2,name:"xiaoD2",age:21},                    {id:3,name:"xiaoD3",age:22},                    {id:4,name:"xiaoD4",age:23},                ]            },            methods: {                deleteItem: function(index){                    this.items.splice(index,1)                }            }        })    </script>

数组更新中的几个变异方法

<div id="app">        <button @click="_pop">pop</button>        <button @click="_shift">shift</button>        <button @click="_unshift">unshift</button>        <button @click="_reverse">reverse</button>    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                items:[                    {id:1,age:20},                    {id:3,age:21},                    {id:21,age:22},                ]            },            methods: {                _pop: function(){                    var item = this.items.pop()                    // 取出最后一个元素                    console.log(item)                    console.log(this.items)                },                _shift: function(){                    // 取出第一个元素                    var item = this.items.shift(1)                    console.log(item)                    console.log(this.items)                },                _unshift: function(){                    // 添加一个元素，返回长度,添加在最前面                    var length = this.items.unshift({id:4,age:23})                    console.log(length)                    console.log(this.items)                },                _reverse: function(){                    var item = this.items.reverse(1)                    console.log(item)                    console.log(this.items)                }            }        })

不能监测变动数组

利用索引设置一个项的时候

app.items[index] = newValue

解决方法一

app.set(app.items,index,newValue)

解决方法二

app.items.splice(index,1,newValue)

修改数组长度的时候

app.items.length = newLength

解决方法

app.items.splice(newLength)

对象更改监测

增加一个属性

var app = new Vue({            el: "#app",            data: {                items:{                    id:1,                    name:"xiaoD",                }            }        })        Vue.set(app.items,'age',27)

过滤数据

方法一：使用计算属性<div id="app">        <p v-for="n in evenNumbers">{{n}}</p>    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                numbers:[1,2,3,4,5,6]            },            computed: {                evenNumbers: function(){                    return this.numbers.filter(function(value){                        return value % 2 == 0                    })                }            }        })    </script>

方法一：使用方法

<div id="app">        <p v-for="n in even(numbers)">{{n}}</p>    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                numbers:[1,2,3,4,5,6]            },            methods: {                even: function(numbers){                    return numbers.filter(function(number) {                        return number % 2 == 0;                    });                }            }        })    </script>

v-for 和 v-if混合使用

<div id="app">        <p v-for="n in numbers" v-if="n % 2 ==1">{{n}}</p>    </div>    <script type="text/javascript">        var app = new Vue({            el: "#app",            data: {                numbers:[1,2,3,4,5,6]            }        })    </script>