前面的话

  Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难。使用v-on有以下好处:

  1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法

  2、无须在JS里手动绑定事件,ViewModel代码可以是非常纯粹的逻辑,和DOM完全解耦,更易于测试

  3、当一个ViewModel被销毁时,所有的事件处理器都会自动被删除。无须担心如何自己清理它们

  本文将详细介绍Vue事件处理

事件监听

  通过v-on指令来绑定事件监听器

<div id="example">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
var example = new Vue({
el: '#example',
data: {
counter: 0
}
})
</script>

【方法】

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

  [注意]不应该使用箭头函数来定义methods函数,因为箭头函数绑定了父级作用域的上下文,所以this将不会按照期望指向 Vue 实例

<div id="example">
<button v-on:click="num">测试按钮</button>
<p>{{message}}</p>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
counter:0,
message:''
},
methods: {
num: function (event) {
if (event) {
this.message = event.target.innerHTML + '被按下' + ++this.counter + '次';
}
}
}
})
</script>

【内联语句】

  除了直接绑定到一个方法,也可以用内联JS语句

<div id="example">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<p>{{message}}</p>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:''
},
methods: {
say: function (message) {this.message = message;}
}
})
</script>

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

<div id="example">
<button v-on:click="say('hi',$event)">Say hi</button>
<button v-on:click="say('what',$event)">Say what</button>
<p>{{message}}</p>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:''
},
methods: {
say: function (message,event) {
if(event){
event.preventDefault();
}
this.message = message;
}
}
})
</script>

事件修饰符

  在事件处理程序中调用event.preventDefault()event.stopPropagation()是非常常见的需求。尽管可以在methods中轻松实现这点,但更好的方式:methods只有纯粹的数据逻辑,而不是去处理 DOM 事件细节

  为了解决这个问题, Vue.js 为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 使用事件捕获模式
.self 只在当前元素本身触发
.once 只触发一次

  下面是一些例子

<!-- 阻止单击事件冒泡 -->
<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></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

【stop】

  阻止冒泡

<div id="example" @click="setVal1" style="border:1px solid black;width:300px;">
<button @click="setVal">普通按钮</button>
<button @click.stop="setVal">阻止冒泡</button>
<button @click="reset">还原</button>
<div>{{result}}</div>
</div>
<script>var example = new Vue({
el: '#example',
data:{
result:''
},
methods:{
setVal(event){
this.result+=' 子级 ';
},
setVal1(){
this.result+=' 父级 ';
},
reset(){
history.go()
}
}
})
</script>

【prevent】

  取消默认事件

<div id="example">
<a href="http://cnblogs.com" target="_blank">普通链接</a>
<a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>
</div>
<script>
var example = new Vue({
el: '#example'
})
</script>

【capture】

  事件捕获模式

<div id="example" @click.capture="setVal1" style="border:1px solid black;width:300px;">
<button @click.capture="setVal">事件捕获</button>
<button @click="reset">还原</button>
<div>{{result}}</div>
</div>
<script>var example = new Vue({
el: '#example',
data:{
result:''
},
methods:{
setVal(event){
this.result+=' 子级 ';
},
setVal1(){
this.result+=' 父级 ';
},
reset(){
history.go()
}
}
})
</script>

【self】

<div id="example">
<div @click="setVal" :style="styleObj1">
<div :style="styleObj2">普通</div>
<button @click="reset">还原</button>
</div>
<div @click.self="setVal" :style="styleObj1">
<div :style="styleObj2">self</div>
<button @click="reset">还原</button>
</div>
</div>
<script>
var styleObj1 = {
display:'inline-block',
height:'60px',
width:'120px',
'background-color': 'lightblue'
};
var styleObj2 = {
display:'inline-block',
height:'30px',
width:'60px',
'background-color': 'lightgreen'
};
var example = new Vue({
el: '#example',
data:{
styleObj1:styleObj1,
styleObj2:styleObj2
},
methods:{
setVal(event){
event.target.style.outline="solid"
},
reset(){
history.go()
}
}
})
</script>

【once】

  只触发一次

<div id="example">
<button @click="setVal">普通按钮</button>
<button @click.once="setVal">触发一次</button>
<button @click="reset">还原</button>
<div>{{result}}</div>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
result:''
},
methods:{
setVal(event){
this.result+=' 内容 ';
},
reset(){
history.go()
}
}
})
</script>

  

鼠标修饰符

  这些修饰符会限制处理程序监听特定的滑鼠按键

.left 左键
.right 右键
.middle 滚轮
<div id="example">
<button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}</button>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:'分别用左、中、右键进行点击,会出现不同的效果'
},
methods:{
left(){
this.message = 'left'
},
right(){
this.message = 'right'
},
middle(){
this.message = 'middle'
},
}
})
</script>

键值修饰符

  在监听键盘事件时,经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

  记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

.enter 回车
.tab 制表键
.delete (捕获 “删除” 和 “退格” 键)
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右
<div id="example">
<button @keyup.enter="enter" @keyup.tab="tab" @keyup.delete="delete1" @keyup.esc="esc" @keyup.space="space" @keyup.up="up" @keyup.down="down" @keyup.left="left" @keyup.right="right">{{message}}</button>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:'将光标置于按钮上后,按下键盘上不同的按键,会有不同的效果'
},
methods:{
enter(){
this.message = 'enter'
},
tab(){
this.message = 'tab'
},
delete1(){
this.message = 'delete'
},
esc(){
this.message = 'esc'
},
space(){
this.message = 'space'
},
up(){
this.message = 'up'
},
down(){
this.message = 'down'
},
left(){
this.message = 'left'
},
right(){
this.message = 'right'
},
}
})
</script>

  可以通过全局 config.keyCodes 对象自定义键值修饰符别名

// 可以使用 v-on:keyup.a
Vue.config.keyCodes.a = 65
<div id="example">
<button @keyup.a="a" @keyup.b="b">{{message}}</button>
</div>
<script>
Vue.config.keyCodes.a = 65;
Vue.config.keyCodes.b = 66;
var example = new Vue({
el: '#example',
data:{
message:'按下键盘上的a键或b键'
},
methods:{
a(){
this.message = 'a'
},
b(){
this.message = 'b'
},
}
})
</script>

修饰键

  可以用如下修饰符开启鼠标或键盘事件监听,使在按键按下时发生响应

.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

  下面一个例子

<div id="example">
<button @click.ctrl="ctrl" @click.alt="alt" @click.shift="shift" @click.meta="meta">{{message}}</button>
</div>
<script>
var example = new Vue({
el: '#example',
data:{
message:'分别用按住辅助键ctrl、alt、shift、meta进行点击,会出现不同的效果'
},
methods:{
ctrl(){
this.message = 'ctrl'
},
alt(){
this.message = 'alt'
},
shift(){
this.message = 'shift'
},
meta(){
this.message = 'meta'
},
}
})
</script>

Vue事件处理的更多相关文章

  1. 04-Vue入门系列之Vue事件处理

    4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...

  2. Vue入门系列(四)之Vue事件处理

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  3. Vue 事件处理

    原生的js事件处理 原生的js事件处理,可以分为:直接内联执行代码,或者绑定事件函数. 在内联的事件处理函数内部或者事件绑定的方法内部的作用域中的this都是指向当前的dom对象.如何在vue绑定的元 ...

  4. 13 Vue事件处理

    监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: ...

  5. (尚011)Vue事件处理

    test011.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  6. vue事件处理机制

    <button @click="handleAdd1()">add1</button> <button @click="handleAdd2 ...

  7. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  8. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  9. Vue实例详解与生命周期

    http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己 ...

随机推荐

  1. linux服务器查看redis版本:

    linux服务器查看redis版本:redis-server-v

  2. js循环处理后台返回的json数组

    <script type="text/javascript"> function gongdan_search(elm){ var dangqian_value=$(e ...

  3. 开始JAVA编程的敲门砖——JAVA开发环境搭建

    从头开始的java编程--JAVA开发环境搭建 一.什么是java的开发环境? 顾名思义java的开发环境是提供并保证整个java程序开发运行的必要的环境,搭建java开发环境是开始java编程的敲门 ...

  4. JS中创建自定义对象的方法

    1.直接给对象扩充属性和方法: 2.对象字面量: 3.工厂方式: 4.构造函数方式: 5.原型方式: 6.混合方式. <script> // 1.直接给对象扩充属性和方法; var cat ...

  5. Docker-compose 多个Docker容器管理:以MYSQL和Wordpress为例

    搬砖的陈大师版权所有,转载请注明:http://www.lenggirl.com/tool/docker-compose.html Docker-compose 多个Docker容器管理:以MYSQL ...

  6. 安装GPU版本的tensorflow填过的那些坑!---CUDA说再见!

    那些坑,那些说不出的痛! --------回首安装的过程,真的是填了一个坑又出现了一坑的感觉.记录下了算是自己的笔记也能给需要的人提供一点帮助. 1 写在前面的话 其实在装GPU版本的tensorfl ...

  7. AngularJS实用基础知识---入门必备

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. ...

  8. set-集合功能介绍

    叨逼叨:#集合 不可重复的列表 可变类型#1.添加 无则添加有则不操作 不可重复 # se = {'alex','eric','seven'} # se.add('qiqi') # se.add('b ...

  9. Python Django之路与您同行

    大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ...

  10. HDU 2203 亲和串(KMP)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=2203 题目: 亲和串 Time Limit: 3000/1000 MS (Java/Others)   ...