VUE3 学习笔记（4）：VUE 事件处理、传参、事件修饰

常见的Web事件

页面事件

Onload --加载

Onunload --取消

Onscroll --滚动

Onresize --大小改变

表单事件

Onsubmit --提交

onchange --变更

Onselect --选择

Onreset --重置

焦点事件

Onfocus --得到焦点

Onblur --失去焦点

鼠标事件

Onclick --点击

Ondbclick --双击

onmouseup --松开

Onmousemove --移动

Onmouseover --停留

Onmouseout --移出

键盘事件

Onkeydown --按下

Onkeyup --松开

Onkeypress --按住

媒体事件

Play --播放

Pause --暂停

ended --停止

内联与外联

内联就是直接在对应事件上写功能，外联则是在JS里统一写，然后在事件上调用自定义函数（也有人叫方法，意思相同）。

示例

<template>
  <div>
    <!-- 内联测试   -->
    <!-- 完整写法   -->
    <button v-on:click="num++">内联事件演示 累加</button>
    <!-- 简写   -->
    <button @:click="num--">内联事件演示 累减</button>
    <p>{{num}}</p>
    <button @:click="add">外联事件演示 累加</button>
    <button @:click="sub">外联事件演示 累减</button>
  </div>
</template>

<script> 
  export default {
    data(){
      return{
        num:0
      }
    },
    methods:{
      add(){
        this.num++
      },
      sub(){
        this.num--
      }
    }
  }
</script>

  传参

事件中的event对象与JS中一样

示例

<template>
  <div>

    <button @:click="add">外联事件演示 累加</button>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        num:0
      }
    },
    methods:{
      add(e){
        console.log(e.target.innerHTML)
        e.target.innerHTML='累加'+this.num
        this.num++
      },
      sub(){
        this.num--
      }
    }
  }
</script>

自定义函数最大的意义在于传值（或传参），否则意义不大。

  传参示例

<template>
  <div>

    <button @:click="add(1,2)">外联事件演示 累加</button>
    <p>{{num}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        num:0
      }
    },
    methods:{
      add(a,b){

        this.num=a+b
      }
    }
  }
</script>

  深入一下，实现对渲染列表中信息的识别

<template>
  <div>

    <p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        num:0,
        numList:[1,2,3,4,5]
      }
    },
    methods:{
      showMsg(a){
        alert(a)
      }
    }
  }
</script>

  再深入一下，尝试把event对象也传一下

<template>
  <div>
    <p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p>
    <p v-for="item in numList" :key="item" @click="showMsgAndEven(item,$event)">{{item}}</p>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        numList:[1,2,3,4,5]
      }
    },
    methods:{
      showMsg(a){
        alert(a)
      },
      showMsgAndEven(a,e){
        alert(a+' '+e.target.innerHTML)
      }
    }
  }
</script>

  修饰

由于VUE是模板式，所以可以直接集成了相应的事件修饰，而不用再在去event去做处理。

更多关于事件修饰说明可以进入官方查看

  以下示例用于阻止跳转的代码示例

<template>
  <div>
    <p v-for="item in numList" :key="item" @click="showMsg(item)">{{item}}</p>
    <a @click.prevent="showMsg(1)" href="https://www.baidu.com">baidu.com</a>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        num:0,
        numList:[1,2,3,4,5]
      }
    },
    methods:{
      showMsg(a){
        alert(a)
      },

    }
  }
</script>