vuejs学习2.2 vue语法——计算属性，事件监听，js高阶函数

本文链接：https://blog.csdn.net/qq_39225271/article/details/107921571

vue语法

计算属性
事件监听
- 方法的参数问题
- v-on修饰符
js高阶函数

计算属性

在模板中需要显示一些data的数据，但是有时需要对数据进行转化再显示，或者需要多个数据结合进行显示，可以使用计算属性computed，计算属性是一个对象，对象中每个数据为一个函数，通过return返回数据，而再html中表示时不需要加括号，用函数名就能表示
例如：需要将firstName和lastName连接并且中间空格隔开

<div id="app">
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      firstName:'Lebron',
      lastName:'James',
    },
    computed:{
      fullName() {
        return this.firstName+" "+this.lastName;
      }
    }
  })
</script>

例如：显示书的总价格

<div id="app">
  <h2>书的总价格：{{allPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      books:[{id:110,name:'代码大全',price:119},
        {id:110,name:'深入计算机原理',price:119},
        {id:110,name:'操作系统',price:119}
      ]
    },
    computed:{
      allPrice () {
        let result=0;
        for(let i = 0;i<this.books.length;i++){
          result+=this.books[i].price;
        }
        return result;
      }
    }
  })
</script>

计算属性一般是只读属性，一般没有set属性，全部表示为

fullName:{
        set:function(newValue){
          console.log("调用了set方法"+newValue)
        },
        get:function () {
          return this.firstName+" "+this.lastName;
        }
      }

计算属性或者methods都可以实现功能，但是计算属性具有缓存功能，如果使用多次，他只会调用一次，但是methods中的方法会调用多次

事件监听

前端开发中，经常进行交互，比如：点击，拖拽，键盘事件等等，在vue中我们通过v-on来实现，v-on的语法糖是@，v-on通过方法实现，方法定义在methods中，methods为一个对象，内部都是函数，例如监听点击：@click=“method”，后面写函数名，有参数需要加括号
例如：通过按钮来进行加减

<body>
<div id="app">
  <h2>{{message}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:0
    },
    methods:{
      increment(){
        this.message++;
      },
      decrement(){
        this.message--;
      }
    }
  })
</script>
</body>

在这里插入图片描述

方法的参数问题

1，如果方法没有参数，可以直接@click="btn1click()"或者不需要后面的括号 @click="btn2click"都正确
2，如果方法有参数 btn3click(abc)
2.1，如果@click后方法不写括号，直接报错，例如@click=“btn3click”
2.2，如果@click后方法写括号，不写参数，不会报错，会自动返回浏览器默认产生的event对象
3，如果方法的参数中包含event对象btn5click(abc,event)
正确的调用方法：@click=“btn5click(123,$event)”，或者@click="btn5click(123）实现效果相同4
总结：
如果函数需要参数，但是没有传，形参为undefined
如果省略括号，这时候vue会默认将浏览器生产的event对象传递到函数

v-on修饰符

<body>
<div id="app">
  //.stop修饰符的使用
  <div @click="divClick">
    <button @click.stop="btnClick">按钮1</button>
  </div>
  //.prevent修饰符的使用,阻止默认行为
  <form action="baidu">
    <input type="submit" value="提交" @click="submitClick()">
  </form>
  //监听某个键盘的键帽,下面表示监听回车
  <input type="text" @keyup.enter="keyUp()"><br>
  //.once修饰符的使用,第一次点有反应，之后点击没有反应
  <button @click.once="btn2Click()">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    },
    methods:{
      btnClick(){
        console.log('btnClick');
      },
      divClick(){
        console.log('divClick');
      },
      submitClick(){
        console.log('submitClick');
      },
      keyUp(){
        console.log('keyUp');
      },
      btn2Click(){
        console.log('btn2Click');
      },
    }
  })
</script>
</body>

js高阶函数

for循环等价性

let totalPrice=0;
 for(let i=0;i<this.books.length;i++){
   totalPrice+=this.books[i].price*this.books[i].count;
}

等价于：

let totalPrice=0;
 for(let i in this.books){
   totalPrice+=this.books[i].price*this.books[i].count;
}

等价于

let totalPrice=0;
 for(let book of this.books){
   totalPrice+=book.price*book.count;
}

例如：nums=[10,20,110,140,234,400]

filter

当回调函数返回true时加入新的数组中，返回false时会自动去掉

let num1=nums.filter(function(n){//会回调6次
	return n<100
})
//表示返回小于100的数加到num1数组中

map

let num2 = num1.map(function(n){
	return n*2
})
//表示num1数组中的每一个数乘以2

reduce

对数组中所有内容进行汇总

//函数包含两个参数
let num3 = num2.reduce(function(preValue,n){
	//preValue表示上一个返回值
	return preValue+n
},0)
//0表示初始化值

高阶函数简写

参数=>返回值
例如：

let num1=nums.filter(n => n<100) ;
let num2 = num1.map(n => n*2);
let num3 = num2.reduce((preValue,n) => preValue+n ,0);

//整合如下：
let num3 = nums.filter(n => n<100).map(n => n*2).reduce((preValue,n) => preValue+n ,0);