vue中v-on:(@)事件监听

最新推荐文章于 2025-05-26 13:30:00 发布

原创最新推荐文章于 2025-05-26 13:30:00 发布 · 564 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue学习专栏收录该内容

36 篇文章

订阅专栏

本文介绍如何使用Vue.js创建一个简单的计数器应用，涉及事件监听、按钮操作和事件冒泡、阻止与阻止默认行为。通过实例演示了Vue的increment、decrement方法，以及.click修饰符的使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment()">+</button>
    <button @click="decrement()">-</button>
    <button @click="bt3Click(abc,$event)">按钮3</button>
    <!-- .stop修饰符的使用:阻止冒泡事件 -->
    <div @click="divClick">
      aaaaaaa
      <button @click.stop="btnClick">div事件冒泡</button>
    </div>
    <!-- .prevent修饰符的使用:正常打印并阻止提交事件 -->
    <form action="baidu">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
    <!-- 监听键盘的键帽：监听输入事件,.enter监听点击回车事件-->
    <input type="text" @keyup.enter ="keyUp">
    <!-- .once的使用:只点击一次触发事件-->
    <button @click.once="onceClick">onceClick</button>


  </div>
  <script src="../js/vue.js"></script>
  <script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0,
      abc:'why'
    },
    methods:{
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      },
      bt3Click(abc,event){ //$event传入监听事件
        console.log('++++++',abc,event);
      },
      divClick(){
        console.log("divClick");
      },
      btnClick(){
        console.log("btnClick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyUp");
      },
      onceClick(){
        console.log("onceClick");
      }
    }
  })
  </script>
</body>
</html>