发表于: 2019-12-14 01:03:43

3 1115


今天完成的事情:

1.学习了三个高阶函数filter ,map ,reduce。

目前接触到的用法:主要是用来对数组进行处理,比如一个数组如下:

  let num = [11,20,50,120,150,180,222,80,90];

我需要筛选出小于100的数组可以直接用

  let newnum = num.filter(function(n) {
    return n < 100;
  })

或者用箭头函数如下:

num.filter(n => n < 100)

效果跟回调函数一样。

如果想让数组中的数字每个都做一些四则运算就用map函数,使用方法跟filter函数类似,可以通过回调函数的方式也可以用箭头函数。

如果想对数组中的数字求和,我们可以用reduce函数,他的使用方法比较特别,同样有两种写法,如果用回调函数的写法,我们需要在函数中传入两个参数,同时在函数后面加上一个初始值,通常默认为0如下

  let newnums = num.reduce(function(value,n){
    return value + n;
  },0)

如果用箭头函数表示的话

  let newnums = num.reduce((value,n=> value + n);

这样省去了要写for循环的麻烦,两种写法的优缺点在于,回调函数的形式可以通过回调函数重复的执行一些别的操作有一定的扩展性(因为这三个高阶函数都是在做for循环,循环次数等于数组中的对象数量)。箭头形式就是写起来比较简洁,但是因该不可以执行更多的操作。

2.三个修饰符,有lazy ,number还有trim

lazy用于v-model双向绑定的时候,如果没有lazy修饰符,输入框和文本会同步变化,如果加上lazy修饰符,则会在输入框失去焦点或者点击回车的时候对文本进行更新。

number的话用于强制字符串变成数字。

trim的话失去掉输入框输入文本的两头的空格。

使用方法都是在v-model后面加上.lazy或者其他两个。

3.vue组件概念的学习

vue为了我们更快的实现一个页面,让我们自己制作很多的组件提高代码的复用率

这一块的知识点我还没有学完

目前知道如何把组件块代码摘出,在html中写template标签,然后加上id就好,需要注意的是如果组件中有多个子标签,需要放到同一个父div标签里面,不然显示会出错(不知道是为什么)。

<template id="cpn">
        <div>
            <h2>当前计数:{{content}}</h2>
            <button @click='reduce'>-</button>
            <button @click='increase'>+</button>
        </div>
    </template>

然后js中通过语法糖的形式去写

Vue.component('my-cpn',{
    template: '#cpn',
    data() {
      return {
        content: 0,
      }
    },
    methods: {
      increase() {
        this.content++;
      },
      reduce() {
        this.content--;
      }
    }
  })

component注册一个标签名字叫my-cpn的组件,然后通过template绑定id:cpn,通过然后组件内部也有methods对象,可以写入函数,然后通过data()函数来灵活的改变组件文本。

需要住的是data()是一个函数且必须是一个函数,因为重复的调用函数会生成不同的内存区域,重复调用组件的时候组件之间会不影响,这也是vue开发者考虑到实际运用,所以添加的一个限制。如果是一个对象的话,就会指向同一个内存地址,组件和组件之间会互相影响。


返回列表 返回列表
评论

    分享到