文档章节

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
粉丝 1
博文 200
码字总数 98515
作品 0
常州
前端工程师
Vue 实战 (一) -- Vue 基础总结

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

小和子茶
07/17
0
0
vue-geventbus - 一个优雅的 Vue 全局事件处理插件

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

banxi
08/13
0
0
聊聊Vue.js组件间通信的几种姿势

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:https://github.com/answershuto/learnV...

染陌同学
2017/10/22
0
2
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
08/01
0
0
vue非父子组件之间的传值--bus(总线/观察者模式)

vue中父子组件的传值很简单,父组件向子组件传值通过属性的方式 <div id="app"> <hello :content="content"></hello> </div> <script type="text/javascript"> /vue父组件通过属性向子组件传......

成功需要积累
05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周日乱弹 —— 种族不同,禁止交往

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《苏菲小姐》- 鱼果 《苏菲小姐》- 鱼果 手机党少年们想听歌,请使劲儿戳(这里) @貓夏:下大雨 正是睡觉的好时候 临睡前...

小小编辑
今天
226
6
Python 搭建简单服务器

Python动态服务器网页(需要使用WSGI接口),基本实现步骤如下: 1.等待客户端的链接,服务器会收到一个http协议的请求数据报 2.利用正则表达式对这个请求数据报进行解析(请求方式、提取出文...

代码打碟手
今天
1
0
Confluence 6 删除垃圾内容

属性(profile)垃圾 属性垃圾的定义为,一个垃圾用户在 Confluence 创建了用户,但是这个用户在自己的属性页面中添加了垃圾 URL。 如果你有很多垃圾用户在你的系统中创建了属性,你可以使用...

honeymose
今天
1
0
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部