Vue3基础笔记（2）事件

一.事件处理

1.内联事件处理器

<button v-on:click="count++">count+1</button>

直接将事件以表达式的方式书写~ 

每次单击可以完成自增+1的操作~ 

2.方法事件处理器

<button @click="addcount('啦啦啦~')">count+2</button>

 如上，一方面v-on可以简写为“@”；另一方面，“啦啦啦”作为参数传入了方法中。

// 所有的方法都写在methods里面
        methods:{
          // data里面的对象通过this.得出
          addcount(msg){
      
            this.count+=2;
            console.log(msg);
          }}

msg即形参，将啦啦啦作为参数值传入。

每次单击完成自增+2.

后台点击一次即输出一次传入的“啦啦啦”。 

二.事件参数

事件参数可以获取event对象和通过事件传递数据。

<button @click="boot">成长值</button>

          boot(e){   
            e.target.innerHTML="成长值:"+this.count      
              this.count+=1;
          }

如上，单击按钮即可修改当前元素，并完成自增+1。 

添加$event，可以继续传输event对象~

<p @click.prevent="printName(item,$event)"   v-for="(item,index) of club":key="index" >{{ item }}</p>

          printName(name2,e){
            console.log(name2);
            console.log(e);
          }

event对象可以被正常打印~

三.事件修饰符

v-on提供了诸多事件修饰符，可以阻止默认事件等。

  <div @click="divc">
    <p @click.stop="pc">事件冒泡测试~</p>
  </div>

divc(){
            console.log("divC~");
          },
          pc(){
            console.log("pC~");
          },

如下，由于stop属性的存在，点击子元素阻止了父元素事件的响应。 

四.数组变化侦听

1.变更方法

Vue能够侦听响应式数组的变更方法，并且在他们被调用的时候触发相关的更新。

  <ul>
    <li v-for="(item,index) in club":key="index">{{ item }}</li>
  </ul>
  <button @click="addclub1">添加元素</button>
  <button @click="addclub2">无显示的添加</button>

          addclub1(){
            this.club.push("勒沃库森");
          },

2.替换数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更，相对的，有一些不可变的方法，他们不会改变原数组，而总是返回一个新数组。

          addclub2(){
            console.log(this.club.concat(["霍芬海姆"]));
            this.club=this.club.concat(["法兰克福"]);
            // 反向赋值回去
          }  

如上，使用concat只会拼接出来一个新的数组，而不会替换原来的数组；但是可以用this反向赋值回去，实现和变更方法一样的效果。

五.计算属性

把模版语法里面可能出现的复杂逻辑放入到独立的计算属性之中。

<div>{{ testNum }}</div>

 computed:{
        testNum(){
          return this.club.length>0?"德甲存在球队" : "德甲解散了";
        }
      }

 computed和method、data同级。

重点区别：

• 计算属性：计算属性值会基于其响应式依赖被缓存~
• 方法：方法调用总是会在渲染发生时再执行函数

概括地说，就是计算属性效率更高~