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

最新推荐文章于 2023-02-14 11:24:36 发布

闲人不梦卿

最新推荐文章于 2023-02-14 11:24:36 发布

阅读量586

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/atu1111/article/details/108092111

版权

vue 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

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>