文档章节

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

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

小和子茶
07/17
0
0
27、有赞Vant组件库的引入及轮播图片预览的实现②

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

Ewall_
09/10
0
0
Vue.js与React的全面对比

Vue与React的对比 Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两...

阿K1225
10/09
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

没有更多内容

加载失败,请刷新页面

加载更多

Android WebView制作简易浏览器

最终效果 先创建一个WebView控件,其他的就是通过线性布局在上方加入网址输入框和两个按钮 <WebView android:id="@+id/act_webview_wv" android:layout_width="ma...

lanyu96
16分钟前
1
0
解决MacOS升级系统Sierra到Mojave后git报错

错误信息 升级MacOS Sierra到Mac Mojave后执行git命令报错: xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/......

阿dai
17分钟前
1
0
兄弟连区块链教程以太源码分析CMD深入分析(一)

cmd包分析 cmd下面总共有13个子包,除了util包之外,每个子包都有一个主函数,每个主函数的init方法中都定义了该主函数支持的命令,如 geth包下面的: func init() { // Initialize the...

兄弟连区块链入门教程
18分钟前
1
0
Titan Framework MongoDB深入理解1

在TitanFrameWork框架中,已经集成了MongoDB的各个功能,现在我们对框架内部的一些重要类进行分析与解读。 MongoDBConverter 在Titan框架中,比较重要的一个接口就是MongoDBConverter,它是作...

云季科技
23分钟前
1
0
SpringBoot集成Quartz

SpringBoot集成Quartz 什么是Quartz Quartz is a richly featured, open source job scheduling library that can be integrated within virtually any Java application - from the smalle......

Grittan
28分钟前
3
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部