vue3框架_事件处理

vue3框架_事件处理

一.使用介绍

• 监听事件

  我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件， 并在触发事件时执行一些 JavaScript。用法为 v-on:click=“methodName” 或 使用快捷方式 @click=“methodName”。

• 事件处理方法

  然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写 在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方 法名称。

• 内联处理器中的方法

  我们可以直接叫他 “事件传递参数”

二.实例

<template>
  <div class="hello">
    <button @click="count += 1">一个按钮:cnt = {{ count }}</button>
    <br>
    <button @click="changemsg">{{ msg }}</button>
    <br>
    <button @click="say('Hi')">say hi</button>
    <br>
    <button @click="say('Hello')">say Hello</button>
    <br>
    <ul>
      <li @click="clickhandle(it)" v-for="it in names">{{ it }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      count:1,
      msg:'python',
      names:['hh','xx','qq']
    }
  },
  methods:{
    changemsg(event) {
      this.msg = 'C/C++';
      alert(event.target.innerHTML);
    },
    say(data) {
      alert(data);
    },
    clickhandle(data) {
      console.log(data);
    }
  }
}
</script>