• 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

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

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

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

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

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

  • 相关阅读:
    Xamarin.FormsShell基础教程(3)Shell项目构成
    Xamarin.FormsShell基础教程(2)创建Shell解决方案
    Xamarin.Forms Shell基础教程(1)
    点击按钮,返回顶部
    三角形(css3)
    改变字体大小的媒体查询代码封装
    将毫秒格式化为分钟和秒 ,并补0
    节流函数
    打乱数组方法
    css使用总结
  • 原文地址:https://www.cnblogs.com/fangmc/p/6545842.html
Copyright © 2020-2023  润新知