被迫走上前端之路第三课之vue的v-on事件监听

在vue的事件处理中，使用v-on来监听DOM事件，并在事件触发时执行对应的 JavaScript。

DOM事件：DOM（document object model）事件是指在HTML文档中发生的特定交互瞬间，如点击、鼠标移动、键盘按键等。

语法

<button v-on:click="handler">{{ count }}</button>

简写方式：

<button @click="handler">{{ count }}</button>

事件处理器 (handler) 的值可以是：

• 内联事件处理器：事件被触发时执行的内联 JavaScript 语句
• 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

可能很多同学单凭这两句话不是很理解到底什么是内联事件什么是方法事件，但先别急，我们接着看下面的例子你就理解了

举个栗子

这里我们定义一个点击事件，使button按钮的值随着我们点击的次数而改变，很显然这是用户与页面的交互

• 内联事件处理器的实现

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <!-- 事件触发时直接执行绑定的JavaScript相关语句 -->
  <button @click="count++">count is: {{ count }}</button>
</template>

• 方法事件处理器

<script setup>
import { ref } from 'vue'

const count = ref(0)
const handler=()=>{
  count.value++;
}
// // 写法二
// function handler(){
//   count.value++;
// }
</script>

<template>
  <!-- html中的事件绑定指向JavaScript中的方法名 -->
  <button @click="handler">count is: {{ count }}</button>
</template>

更多关于事件处理的内容详见官网：https://cn.vuejs.org/guide/essentials/event-handling.html