linux 静态IP 数据结构 RabbitMQ go checkbox module primefaces tree transactions air alertifyjs 后台页面模板 jquery遍历元素 bootstrap居中对齐 kubernetes架构 python集合操作 python教程 python排序 python基础代码 java开发环境安装 jdbc连接mysql java将数据写入文件 java中new java字符串格式化 javahttp java安装与配置 登录界面html 易语言进度条 梦幻西游手游助手 js判断字符串相等 spoonwep 视频相册制作软件 自动答题软件 js分页 pr蒙版 go程序设计语言 dnf95b套 python列表求和 编程电子书
当前位置: 首页 > 学习教程  > 编程语言

v-on事件监听

2021/1/28 23:22:08 文章标签:

目录 一、时间监听 二、基本使用 三、参数传递问题 四、v-on的修饰符作用 一、时间监听 作用&#xff1a;绑定事件监听器缩写&#xff1a;预期&#xff1a;Function | Inline Statement | Object参数&#xff1a;event二、基本使用 <div id"demo"><h2&…

目录

一、时间监听

二、基本使用

三、参数传递问题

四、v-on的修饰符作用


 

一、时间监听

  1. 作用:绑定事件监听器
  2. 缩写:@
  3. 预期:Function | Inline Statement | Object
  4. 参数:event

二、基本使用

<div id="demo">
    <h2>{{ counter }}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="sub">-</button>
    <button @click="init">归0</button>
</div>
<script>
    let vm = new Vue({
        el: '#demo',
        data: {
            message: '',
            counter: 0,
        },
        methods: {
            sub() {
                if (this.counter > 0) {
                    this.counter--;
                }
            },
            init() {
                this.counter = 0;
            }
        }
    });

三、参数传递问题

  • 如果该方法不需要参数,则方法后边的()可以不加。
    <!-- 事件调用的方法没有参数 -->
    <button @click="clickEvent1">按钮一</button>
    <button @click="clickEvent1">按钮一:副</button>


    ..........

    clickEvent1() {
                alert('事件调用的方法没有参数');
            },
  • 如果方法本身中有一个参数,那么默认会将原生的事件event参数传递进去。
    <!-- 在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数的 -->
    <button @click="clickEvent2(123)">按钮二</button>
    <button @click="clickEvent2">按钮二:副</button>
       ......
    clickEvent2(abc) {
                alert(abc);
            },
将参数传入有参数的方法
有参数而没有传入参数时,将生成的原始的event对象传入

 

  • 如果同时需要传递某个参数,同时需要event时,可以使用$event传入事件

方法定义时,需要event对象,同时又需要自己定义的参数

    <button @click="clickEvent3">按钮san</button>
    <button @click="clickEvent3(123,event)">按钮san:副</button>
    <button @click="clickEvent3(123,$event)">按钮san:三</button>
    .......
    clickEvent3(abc,event){
                alert('abc:'+abc+'和event:'+event)
            },

 

四、v-on的修饰符作用

Vue提供的几种修饰符:

  • .stop:调用event.stopPropagation()
  • .prevent:调用event.preventDefault(),取消组件的默认事件,比如按钮的submit事件
  • .{KeyCode | KeyAlias}:只是当事件从特定键触发时,才触发回调
  • .native:监听组件根元素的原生事件
  • .once:只触发一次回调。
<div @click="divClick" id="demo">
    aaa
    <button @click="btnClick">按钮</button>
</div>

......

btnClick(){
        console.log('btnClick');
    },
divClick(){
        console.log('divClick');
    }
只点击按钮,结果按钮和div的监听事件都触发了
只点击按钮,结果按钮和div的监听事件都触发了

有些时候我们需要 点击按钮只触发监听按钮的时间,只有真正点击div的时候才触发div的点击监听事件。

这里我们使用.stop修饰符可以阻止冒泡,解决这个问题

 

 

 

 

 


本文链接: http://www.dtmao.cc/news_show_650181.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?