Vue学习记录-v-on参数传递，修饰符

最新推荐文章于 2022-05-25 09:32:12 发布

原创最新推荐文章于 2022-05-25 09:32:12 发布 · 218 阅读

CC 4.0 BY-SA版权

本文深入探讨了Vue.js中事件处理的各种方式，包括点击事件、按键事件、事件修饰符如.stop和.prevent，以及如何使用$event获取事件对象。同时，介绍了事件监听的一次性触发特性。

<div id="app">
  {{message}}
  <!-- @==v-on: -->

  <!-- 事件调用无参数 -->
  <button @click="btn1Click()">1</button>
  <button @click="btn1Click">1</button>
  <!-- 当定义事件时，写函数省略了小括号，但方法本身需要一个参数 -->

  <!-- <button @click="btn2Click(2)">2</button> -->
  <!-- 当没传时，形参为undefine -->
  <button @click="btn2Click()">2</button>
  <!-- 当需要参数，但省略了括号，vue会默认将浏览器生成的event事件传到方法中 -->
  <button @click="btn2Click">2</button>
  <!-- 方法定义时，需要event对象，又需要其他参数 -->
  <!-- abc会传入event，而event会传入undefine -->
  <button @click="btn3Click">3</button>
  <!-- 需要event时，正确写法：$event -->
  <button @click="btn3Click(3,$event)">3</button>

  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        methods: {
          btn1Click(){
            console.log('btn1');
          },
          btn2Click(a){
            console.log('btn',a);
            
          },
          btn3Click(a,event){
            console.log('btn',a,event);
            
          }

        }
     })
  </script>

 <div id="app">
  <div @click="divClick">
    <!-- .stop防止冒泡 -->
    <button @click.stop="btnClick">1</button>
  </div>
  <!-- .prevent 阻止默认事件-->
  <form action="b">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  <!-- 监听键入 -->
  <input type="text" @keyup.enter="keyUp">
  </div>
  <script src="js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        methods: {
          divClick(){
            console.log('div');
          },
          btnClick(){
            console.log('btn');
          },
          submitClick(){
            console.log('sub');
            
          },
          keyUp(){
            console.log('up');
            
          }
        }
     })
  </script>

.once

只触发一次回调