Vue学习笔记三

朱雀 2022-06-09 11:16 226阅读 0赞

#### 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>