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>