文档章节

Vue.js-事件处理器

tianyawhl
 tianyawhl
发布于 2017/08/28 09:08
字数 718
阅读 9
收藏 0

监听事件

<body class="">
<div id="example-1">
    <div>{{counter}}</div>
    <button v-on:click="counter+=1">增加</button>
</div>
    <script src="js/vue.js"></script>
    <script>
    
    var app7 = new Vue({
        el: '#example-1',
        data: {
            counter:0
        },
       
    })
    </script>
</body>

 

方法事件处理器
许多事件处理的逻辑都很复杂,所以直接把JavaScript代码写在v-on指令中是不可行的,因此v-on可以接收一个定义的方法来调用

<body class="">
    <div id="example-1">
        <button v-on:click="greenting">欢迎</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: { message: "good" },
        methods: {
            greenting: function(event) {
                alert("hello" + this.message + "!");
                if (event) {
                    alert(event.target.tagName);
                }
            }
        }
    })
    </script>
</body>

 

内联处理器方法
处理直接绑定到一个方法,也可以用内联JavaScript语句,调用时把不同的参数传递给方法

<body class="">
    <div id="example-1">
        <button v-on:click='say("hi")'>say hi</button>
        <button v-on:click='say("hello")'>say hello</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            say: function(element) {
                alert("this is "+ element)
            }
        }
    })
    </script>
</body>

 

有时候也需要在内联语句处理器中访问原生DOM事件,可以用特殊变量$event把它传入方法

<body class="">
    <div id="example-1">
        <button v-on:click="warn('warning',$event)">submit</button>
       
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            warn: function(message,event) {
                //现在我们可以访问原生事件
                if(event) event.preventDefault()
                alert("this is "+ message)
            }
        }
    })
    </script>
</body>

 

事件修饰符

在事件处理程序中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求,尽管我们可以在methods中轻松实现,但更好的方法是:methods只有纯碎的数据逻辑,而不是去处理DOM事件细节,为了解决一个问题。Vue.js为v-on提供了事件修饰符,通过.表示的指令后缀来调用修饰符

//防止事件冒泡
<a v-on:click.stop="doThis"></a>
//提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
//修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
//只有修饰符
<form v-on:submit.prevent></from>
//添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis"></div>
//只有事件在该元素本身(比如不是子元素)触发时触发回调
<div v-on:click.self="doThat"></div>

//使用修饰符时,顺序很重要,响应的代码会以同样的顺序产生,因此用
@click.prevent.self会阻止所有的点击,,而@click.self.prevent只会阻止本元素上的点击

 

键值修饰符
在监听键盘事件时,我们经常需要监听常见的键值, Vue 允许为v-on在监听键盘事件时添加关键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的keyCode比较困难,所有Vue为常用的按键提供了别名
<input v-on:keyup.enter="submit">  缩写语法<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete(捕获删除和退格键)
.esc
.space
.up
.down
.left
.right
可以通过全局cinfig.keyCodes对象自定义键值修饰符别名
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 4
博文 231
码字总数 118197
作品 0
常州
前端工程师
私信 提问
详谈vue组件间事件派发与接收

在vue的开发中,经常会在两个组件间进行事件的通信在vue1.0中我们使用$dispatch 和 $broadcast child.vue: parent.vue: 但是在vue2.0中$dispatch 和 $broadcast被弃用,因为基于组件树结构的...

前端攻城小牛
2018/12/31
0
0
Vue 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
2018/07/17
0
0
说说 Vue.js 中的 v-on 事件指令

v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后,就会监听相应的事件。 html: 注意: 是 的简写形式, 即表示 。 js: 效果: @click 表达式即可以直接使用 js 语句,也可以是...

deniro
2018/11/24
0
0
27、有赞Vant组件库的引入及轮播图片预览的实现②

前言:上一章主要是安装并引入了vant组件库;这章我们完成商品详情页轮播图片的预览功能。其实图片预览功能自己写也很简单,我可能比较懒。。。 Github:https://github.com/Ewall1106/mall...

Ewall_
2018/09/10
0
0
vue-geventbus - 一个优雅的 Vue 全局事件处理插件

Vue 中全局事件处理的传统做法 先创建一个名为 的全局 实例。 在 Vue 组件中使用时,一般在 生命周期中注册事件处理函数。在 生命周期函数中解除注册的事件以免造成内存泄漏。 这样使用起来颇...

banxi
2018/08/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部