Vuejs 事件监听

最新推荐文章于 2024-06-23 12:48:42 发布

苦涩2020

最新推荐文章于 2024-06-23 12:48:42 发布

阅读量438

点赞数

分类专栏： Vuejs 前端文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/108307262

版权

本文介绍了Vue.js中v-on指令的基础用法，包括如何监听用户交互事件如点击、拖拽等，并详细讲解了v-on的参数传递，特别是如何处理方法中的参数与原生事件event的关系，以及v-on修饰符的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等

v-on 基础

<div id='app'>
  <h2>{
  {counter}}</h2>
  <button v-on:click="add">+</button>
  <!-- v-on语法糖写法 @ -->
  <button @click="sub">-</button>
</div>

<script>
  const app = new Vue({
    
    el: '#app',
    data: {
    
      counter: 0,
    },
    methods:{
    
      add(){
    
        this.counter++;
      },
      sub(){
    
        this.counter--;
      }
    }
  })
</script>
</script>