Vue方法与事件(简单讲解)

最新推荐文章于 2025-09-24 11:35:34 发布

原创最新推荐文章于 2025-09-24 11:35:34 发布 · 649 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

本文详细解析Vue中事件处理的方式，包括@click方法调用、事件对象传递、preventDefault使用及事件修饰符的实践，通过具体示例展示了如何在Vue应用中有效控制DOM事件。

Vue方法与事件

下面这段定义讲解，我只是敲了大概的实现，对定义不是很了解

        1. @click方法名可以不加(),默认会将原生事件对象 event 传入。
        2..Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件
        3.使用的preventDefault()也可以用 Vue 事件的修饰符来实现，在＠绑定的事件后加 小圆点“．”，再跟一个后缀来使用修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="clickFunc(10)">点击+10：{{count}}</button>
        <br>
        <a href="http://www.baidu.com" target="_self" @click = "clickStopFunc">百度</a>
        <br>
        <a href="https://www.sougou.com/" target="_self" @click = "clickStopFunc($event)">搜狗</a>

        <a href="https://www.360.cn/" target="_self" @click.prevent = "stopFunc($event)">360</a>
        <!-- 在上例使用的preventDefault()也可以用 Vue 事件的修饰符来实现，在＠绑定的事件后加 小圆点“．”，再跟一个后缀来使用修饰符 -->

    </div>
    <script src="vue.js">

    </script>
    <script>
           var app = new Vue({
               el:"#app",
               data:{
                   count:0
               },
               methods:{
                  clickFunc:function(count){
                      this.count = this.count + count;
                      
                  },
                  clickStopFunc:function(event){
                    // 默认会将原生事件对象 event 传入
                    console.log(event);
                    event.preventDefault();
                    alert('阻止a连接打开');
                    // Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件
                      
                  },
                  stopFunc:function(event){
                    // 默认会将原生事件对象 event 传入
                    console.log(event);

                    alert('阻止a连接打开');
                    // Vue 提供了一个特殊变量$event，用于访问原生 DOM 事件
                      
                  }
               }

           })
    </script>
</body>
</html>

展示效果：
在这里插入图片描述