「Vue基础」-事件监听(v-on)

2021-08-19 08:23·90后流水账

公众号：Python野路子

在前端开发中，我们需要经常与UI组件交互时，UI组件能够激发一个相应事件。例如，用户按动按钮、滚动文本、移动鼠标或按下按键等，都将产生一个相应的事件，这个时候我们就必须监听用户发生的事件，在Vue中通过v-on指令来监听DOM事件。

<!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>Hello Vue</title>
    <!-- 直接CDN方式引入vue.js -->
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root">
        <!-- 操作操作数值 -->
        <li>{{num1 + 1}}</li>
        <!-- vue事件绑定：v-on:事件 -->
        <!-- 方法去methods里面找。 -->
        <button v-on:click="fun1()"> vue事件绑定</button>
        <!-- 不写函数，写逻辑 -->
        <button v-on:click='num1+= 2'>不执行函数</button>
        <!-- 事件绑定，使用@作为简写 -->
        <button @click='fun2(3)'>vue事件绑定</button>

    </div>
</body>
<script>
    // 生命周期函数：在某一时刻会自动执行的函数
    const app = Vue.createApp({
        data () {
            return {             
                num1: 1,
            }
        },
        methods:{
            fun1(){
                // 操作num1
                this.num1 +=1
            },
            fun2(num){
                //注意：在vm实例中，如果想要获取data上的的数据，或者调用methods中的方法，
                // 必须通过this.数据属性名或this.方法名来进行访问，这里的this就表示我们创建出来的VM实例对象。
                // 注意，VM实例，会监听自己身上data中所有数据的改变，只要数据发生变化，就会自动把最新的数据，
                // 从data上同步到页面中去【好处：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面】
                this.num1 +=num
            }

        }
    });

    const vm = app.mount('#root')

</script>
</html>



这里要注意，方法一定要写在methods中。v-on:click可以写成@click。所有的原生js的事件使用v-on都可以绑定。

Vue事件绑定，除了支持直接绑定到一个方法外（不需要额外参数，那么方法后的()可以不添加。），就是还可以直接在函数中传递参数。

参数传递

不带参数

 <body>
  <div id="app">
   <!-- 不带参 -->
   <button @click="btnClick1">按钮1</button>
   <button @click="btnClick2">按钮2</button>
   <button @click="btnClick3()">按钮3</button>
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data () {
    return {
                    
                }
   },
   methods: {
    btnClick1() {
     console.log('....', event);  // 默认event对象
    },
    btnClick2(args) {
     console.log(args);  // 事件对象
    },
    btnClick3(args) {
     console.log(args);  // undefined
    }
   }
  }).mount('#app');
 </script>


传递参数

 <body>
  <div id="app">
   <!-- 带参 -->
   <button @click="play('野路子', '泡妞')">按钮1</button>

   <!-- 带参又需要事件对象-->
   <button @click="thinking('野路子', 'make money', $event)">按钮2</button>
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
                }
   },
   methods: {
    play(name, hobby) {
     console.log(name, '喜欢', hobby);
    },
    thinking(name, hobby, event) {
     console.log(name, '喜欢', hobby, event);
    }
   }
  }).mount('#app');
 </script>

如果界面上有多个按钮或表单，你想根据用户的不同操作，响应不同的事件，这时你可以通过监听事件源的方式进行处理。在软件系统中，我们常常见到的打开、保存、导出、打印等多个按钮在同一个功能菜单时，就可以用这种方式。我们也可以获取事件，上面例子也提现了，这里再举个例子：

<body>
    <div id="root">
        <button @click="say_no">不说话</button>
        <button @click="say('吃饭', $event)">说话</button>
    </div>
</body>
<script>
    // 生命周期函数：在某一时刻会自动执行的函数
    const app = Vue.createApp({
        data() {
            return {
                
            }
      
        },
        methods:{
            say_no(event){
                console.log(event)

            },
            say(msg, event){
                console.log(msg, event)
            }
        }
    })
    const vm = app.mount('#root')
</script>


从上面我们可以看出来，当不传递参数时默认给我们传递了$event对象，但是当我们想要监听事件源，又想要传递参数时，则需要显示的传递$event对象。

事件修饰符

阻止冒泡事件

应用场景 ：以前js阻止冒泡默认事件都用event对象下的自带方法，例如：

<!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>vue实现选项卡功能</title>
  <!-- 直接CDN方式引入vue.js -->
  <script src="https://unpkg.com/vue@next"></script>

  <style>
   .box {
    background: red;
    width: 60px;
    height: 60px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- 阻止冒泡 -->
   <div class="box" @click="boxClick">
    <button @click="btnClick">点我</button>
   </div>
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data () {
    return {
                    
                }
   },
   methods: {
    boxClick() {
     console.log('点击了盒子');
    },
    btnClick() {
     console.log('点击了按钮');
    }
   }
  }).mount('#app');
 </script>
</html>

当点击按钮的时候，发生了冒泡事件，div元素也触发点击事件。

冒泡事件：当多个Dom元素互相嵌套的时候，一个元素触发了某个事件（例如Click事件），那么嵌套此事件的所有元素都会被触发一次Click事件，注意：只会触发他的直系亲属元素，而与其自己，父级，爷级等等同级的亲戚集是不会触发的。

我们可以类似js中一样，在函数中阻止冒泡事件：

btnClick(event) {
    event.stopPropagation();
 console.log('点击了按钮');
}

在Vue中，我们可以通过事件修饰符来阻止冒泡事件：

  <div id="app">
   <!-- 阻止冒泡 -->
   <div class="box" @click="boxClick">
                <!-- 事件修饰符stop-->
    <button @click.stop="btnClick">点我</button>
   </div>
  </div>

阻止默认事件

当我们提交表单的时候，可能会发现提交2次请求，这个时候，

例如：e.preventDefault() ，代码如下：

 <body>
  <div id="app">
   <form action="www.qmpython.com">
    <!-- 点击提交的时候，默认就会往action里面发起请求-->
    <!-- <input type="submit" value="提交">-->
    <!-- 自定义提交，默认会发起两次请求，一次action，一次自定义的-->
    <!-- <input type="submit" value="提交" @click="submitClick" /> -->

    <!-- prevent修饰符阻止默认行为，默认的action就不会请求，只会请求自定义的-->
    <input type="submit" value="提交" @click.prevent="submitClick" />

    <a href="http://www.qmpython.com" @click.prevent="aClick">全民python</a>
   </form>
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
        }
   },
   methods: {
    submitClick() {
     console.log('自定义提交');
    },
    aClick() {
     console.log('点击链接');
    }
   }
  }).mount('#app');
 </script>

按键修饰符

@keyup事件，指按键松开，触发的事件。

 <body>
  <div id="app">
   <input @keyup="getMsg" />
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
                    
        }
   },
   methods: {
    getMsg() {
     console.log(event);
    }
   }
  }).mount('#app');
 </script>

上面，我们看出，只要我们随意敲键盘然后松开，就会触发对应事件。

按键修饰符，只有当事件从特定按键触发时才触发回调。

Vue为最常用的键提供了.enter(回车) 、.tab 、 .delete (捕获“删除”和“退格”键)、.esc(取消)、.up(上)、.down(下)、.left(左)、.right(右)等。

 <body>
  <div id="app">
   <input @keyup.enter="getMsg" />
  </div>
 </body>
 <script>
  // 生命周期函数：在某一时刻会自动执行的函数
  const app = Vue.createApp({
   data() {
    return {
    
        }
   },
   methods: {
    getMsg() {
     console.log(event);
    }
   }
  }).mount('#app');
 </script>

通过按键修饰符（回车键）修饰之后，只要敲回车键才触发对应事件。


#vue#

举报
评论 0
    热门：