事件监听

1、v-on的参数传递问题：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app"> 
    <!-- 1、在事件监听，并且写的方法中并没有参数，则（）可以直接省略使用 -->
    <!-- <button @click="btnclick1()">按钮1</button>
    <button @click="btnclick1">按钮1</button> -->
    <!-- 此时在事件监听并且方法中没有参数，则可以省去（），两者均可以实现 -->
    <!-- 2、在时间监听并且方法中需要有参数的情况下 -->
     <!-- 正常传入参数，传出的是正常的值
     不传入参数，只是添加（），出现的是undeined。表示未定义
     即不书写参数又不加入（） -->
     <!-- ，此时传入的是时间发生的请款 -->
    <!-- <button @click="btnclick2(123)"> 按钮2</button>

    <button @click="btnclick2()">按钮2</button>
    <button @click="btnclick2">按钮2</button> -->
    <!-- 3、在即需要传入的参数又需要时间点击的各种情况，则使用$event -->
    <button @click="btnclick3(123,$event)">按钮3</button>
    <!-- 在急需要传入参数要需要事件单击的时间。
    如果直接不写括号或者是不写入参数，则会发生错误。若是传入一个参数，则是会
    显示参数和undefined.如果要需要即实现参数又是实现鼠标移动的时间，则是需要$event -->
  </div>

  <script>
   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      btnclick1(){
        console.log('btnclick1')
      },
      btnclick2(abc){
        console.log('---------'+abc);
      },
      btnclick3(abc,event){
        console.log('++++++++++++++',abc,event);
      }
    }
   });
  </script>
</body>

</html>

2、v-on修饰符的使用

.stop:阻止的当前事件的发生

<body>
  <div id ="app"> 
    <div @click="divclick">
      aaaaaaaaa
      <button @click.stop="btnclick">按钮1</button>
      <!-- 使用.stop阻止了当前事件的发生 -->
    </div>
  </div>

  <script>
   //创建Vue实例,得到 ViewModel
   //v-on的修饰符的使用
  //  1、.stop的使用
   var vm = new Vue({
    el: '#app',
    data: {},
    methods: {
      btnclick(){
        console.log('btnclick');
      },
      divclick(){
        console.log('divclick');
      }
    }
   });
  </script>
</body>

.prevent的使用：阻止事件的提交使用

<form action="baidu">
         <input type="submit" value="提交" @click.prevent="submitclick"> 
         <!-- 但是出现没有文件被移交别处 -->
         <!-- 3、监听某个键帽的点击 -->
         <br>
       </form>

@click.enter：表示只监听按下enter下的键

<input type="text" @keyup.enter="keyup">
         <button></button>

　　

 

 .once修饰符的使用：表示只触发一次

<!-- 4、.once：表示只触发事件一次 -->
         <button @click.once="btnclick2"> 按钮2</button>

 

posted @ 2022-03-05 11:43  starter123  阅读(40)  评论(0)    收藏  举报