Vue 3 事件处理

同名公众号 - 人生代码

于 2020-10-17 21:24:30 发布

阅读量1.2k

点赞数

分类专栏： Vue3 + TS 进阶之路文章标签： js vue html dom css

本文链接：https://blog.csdn.net/qq_36772866/article/details/109140495

版权

Vue3 + TS 进阶之路专栏收录该内容

129 篇文章 29 订阅 ¥79.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue 3中的事件处理，包括事件监听、内联处理器、多事件处理器和事件修饰符的使用，如按键修饰符、系统修饰键等，强调了Vue事件处理的便利性和解耦优势。

摘要由CSDN通过智能技术生成

事件处理

实验介绍

页面上会有很多的页面交互，例如用户点击按钮，会触发什么样的事件，这个事件要做什么事情，就会涉及到事件处理。

事件监听

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click=”methodName 或使用快捷方式 @click="methodName"，然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<template>
  <div class="template-m-wrap">
    <button @click="count">{
   {counter}}</button>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return