Vue学习之路---No.4（分享心得，欢迎批评指正）

这里说声抱歉，周末因为有其他事，没有更新博客，那么我们今天继续上周5的说。

老规矩，先回顾一下上一次的重点：

1.利用V-if和v-else来提到show（）和hide（），同时要记住，v-else一定要跟在v-if后面才有效

2.v-show和v-if的区别（ v-show不会渲染dom，只会改变display属性；所以v-if切换速度比v-show慢，而v-show初次渲染比v-if慢 ）

3.v-for循环，及循环中每一个参数所对应的值，这里不具体指出，详情请看学习之路No.3

4.当我们不需要循环数据只需要循环次数的时候（ <div v-for = " n in items ">{{n}}</div>    ）

Ok，温故而知新，下面我们开始第二步---知新

首先，我们先了解一下常用的修饰器，如下：

push()              //在结尾处增加一条或多条数据

pop()　　　　　　//删除最后一条数据

shift()　　　　　　//删除第一条数据并返回

unshift()　　　　　　//从开始增加一条或多条数据，并返回数组长度

splice()　　　　　　//从数组中添加或删除元素，然后返回被删除的元素

sort()　　　　　　  //对数组进行排序

reverse()　　　　　　//颠倒数组的顺序

比如：

example1.items.push( { message } )

//在循环数组的最后加上一条数据，同时我们也改变了它的视图

相应的，有些js方法不修改原始数据，只返回一个新的数组

比如：

filter（）                           //返回条件为真的数据

conact()　　　　　　　　　　//连接两个或多个数组

silce()　　　　　　　　　　//从已有数组中选择一部分元素返回

使用的时候，因为这样的方法不会改变原有数据，只会返回一个新数组，所以需要整体接受一下，代码如下：

example1.items = example1.items.filter( function (){

　　　　return item.message.match(/ foo /)

} )

也许这个时候有人会说，这样整体返回和整体接收会大大影响渲染速度吧，不得不说，你很有想法

但是令人惊奇的就在于 Vue的内置方法会自动重用那些没有进行过改动的数据，这也是Vue为什么快的原因之一。

那么需要之一的地方是，由于javascript的某些限制，我们不能直接对数组进行改动，比如这样：

vm.items[ indexOfItems ] = newValue

vm.items.length = newLength

我们应该这样：

1.  Vue.set（example1.items,indexOfItems,newValue）

　example1.items = example1.items.splice( indexOfItems,1,newVaue )

2.example1.items = example1.items.splice( newLength )

这里我给大家解释一下

第一种情况的方法一为 利用Vue的内置方法set（）改变了下标为indexOfItems的元素

　　　　　　方法二为 通过整体接收，找到某个元素，同时用一个新的值替换从这个元素开始的n个元素，上面n等于1

第二种情况则为 利用整理接收的方法，返回一个新的长度为 newLength的数组

变得比一开始更难理解了？对的，所以，我们减少学习量，一步一步走踏实

进入今天的最后一个环节：

显示过滤或排序后的数据：

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

data: {

　　numbers[ 1,2,3,4,5 ]

},

　　computed : {

　　　　evenNumbers: function(  ){

　　　　　　reutrn this.numbers.filter( function( number ){

　　　　　　　　return number % 2 === 0

} )

}

}

data:{

　　numbers[ 1,2,3,4,5 ]

}

　　method : {

　　　　even : function ( numbers ){

　　　　　　return numbers.filter( function( number ) {

　　　　　　　　return number % 2 === 0　　

} )

}

}

上面两种方法输出的结果都是一样的，都为2，4

一种为计算属性，另一种为方法；之前我们提到过，方法和计算属性可以完成一样的功能，但是相互有区别。

这个地方，当某些地方不能使用计算属性的时候，我们就利用方法来实现，同时仔细观察的同学可以看出

这个方法，我们可以传参。

今天我们就到这里，祝大家工作顺利，学习进步。

明天见~~~~~~欢迎大家留言指出问题，互相交流，共同进步