前面的话

  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.js 学习笔记 第5章 内置指令

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

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

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

  9. vue——指令系统

    指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 在vue中提供了一套为数 ...

随机推荐

  1. Windows - 性能监控之磁盘剩余空间大小警报

    开始 -> 运行 -> 键入命令 perfmon.msc 数据收集器(Data Collector Sets) -> 用户自定义(User Defined)

  2. jQuery $.extend() 和 $.fn.extend() 用法

    http://blog.csdn.net/xuemoyao/article/details/19021659

  3. CIFAR-10 Competition Winners: Interviews with Dr. Ben Graham, Phil Culliton, &amp; Zygmunt Zając

    CIFAR-10 Competition Winners: Interviews with Dr. Ben Graham, Phil Culliton, & Zygmunt Zając Dr. ...

  4. 【转帖】C# DllImport 系统调用使用详解 托管代码的介绍 EntryPoint的使用

    1      DLLImport的使用 using System; using System.Runtime.InteropServices; //命名空间 class Example { //用Dl ...

  5. FFT算法

    FFT算法的完整DSP实现 傅里叶变换或者FFT的理论参考: [1] http://www.dspguide.com/ch12/2.htm The Scientist and Engineer's G ...

  6. 程序员---C语言细节7(增加两个整数溢出检测)

    主要内容:增加两个整数溢出检测 #include <stdio.h> #include <limits.h> int main(int argc, char *argv[]) ...

  7. bzoj 4894: 天赋

    Description 小明有许多潜在的天赋,他希望学习这些天赋来变得更强.正如许多游戏中一样,小明也有n种潜在的天赋,但有 一些天赋必须是要有前置天赋才能够学习得到的.也就是说,有一些天赋必须是要在 ...

  8. vue项目打包笔记

    我的需求是在同一个代码目录下,可以同时放入两个项目包,通过运行不同的命令,运行相应的项目页面以及打包相应的项目. 这样的话,代码管理比较方便,用于多个项目在同一时间开发,类型一样,但在功能上有所区分的 ...

  9. lamba匿名函数与内置函数/递归

    max 循环出的参数给func,func的返回值给key,然后比较那个返回值max(salary,key=func) 匿名函数:max(salary,key=lamba x:salaries[x]) ...

  10. scrapy 断点续爬

    第一步:安装berkeleydb数据库 第二部:pip install bsddb3 第三部:pip install scrapy-deltafetch 第四部: settings.py设置 SPID ...