| Vue事件处理 | 您所在的位置：网站首页 › vue事件原理 › Vue事件处理 |
Vue事件处理
|
[1]监听事件
[2]事件修饰符
[3]鼠标修饰符
[4]键值修饰符
[5]修饰键
前面的话
Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上，它不会导致维护上的困难。使用v-on有以下好处： 1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法 2、无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试 3、当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。无须担心如何自己清理它们 本文将详细介绍Vue事件处理 事件监听 通过v-on指令来绑定事件监听器 增加 1 这个按钮被点击了 {{ counter }} 次。 var example = new Vue({ el: '#example', data: { counter: 0 } })【方法】 许多事件处理的逻辑都很复杂，所以直接把JS代码写在 v-on 指令中有时并不可行。v-on指令可以接收一个定义的方法来调用 [注意]不应该使用箭头函数来定义methods函数，因为箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例 测试按钮 {{message}} var example = new Vue({ el: '#example', data:{ counter:0, message:'' }, methods: { num: function (event) { if (event) { this.message = event.target.innerHTML + '被按下' + ++this.counter + '次'; } } } })【内联语句】 除了直接绑定到一个方法，也可以用内联JS语句 Say hi Say what {{message}} var example = new Vue({ el: '#example', data:{ message:'' }, methods: { say: function (message) {this.message = message;} } })有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法 Say hi Say what {{message}} var example = new Vue({ el: '#example', data:{ message:'' }, methods: { say: function (message,event) { if(event){ event.preventDefault(); } this.message = message; } } })事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管可以在methods中轻松实现这点，但更好的方式：methods只有纯粹的数据逻辑，而不是去处理 DOM 事件细节 为了解决这个问题， Vue.js 为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符 .stop 阻止冒泡 .prevent 阻止默认事件 .capture 使用事件捕获模式 .self 只在当前元素本身触发 .once 只触发一次下面是一些例子 ... ...[注意]使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击 【stop】 阻止冒泡 普通按钮 阻止冒泡 还原 {{result}} var example = new Vue({ el: '#example', data:{ result:'' }, methods:{ setVal(event){ this.result+=' 子级 '; }, setVal1(){ this.result+=' 父级 '; }, reset(){ history.go() } } })【prevent】 取消默认事件 普通链接 取消默认行为 var example = new Vue({ el: '#example' })【capture】 事件捕获模式 事件捕获 还原 {{result}} var example = new Vue({ el: '#example', data:{ result:'' }, methods:{ setVal(event){ this.result+=' 子级 '; }, setVal1(){ this.result+=' 父级 '; }, reset(){ history.go() } } })【self】 普通 还原 self 还原 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() } } })【once】 只触发一次 普通按钮 触发一次 还原 {{result}} var example = new Vue({ el: '#example', data:{ result:'' }, methods:{ setVal(event){ this.result+=' 内容 '; }, reset(){ history.go() } } })鼠标修饰符 这些修饰符会限制处理程序监听特定的滑鼠按键 .left 左键 .right 右键 .middle 滚轮 {{message}} var example = new Vue({ el: '#example', data:{ message:'分别用左、中、右键进行点击，会出现不同的效果' }, methods:{ left(){ this.message = 'left' }, right(){ this.message = 'right' }, middle(){ this.message = 'middle' }, } })键值修饰符 在监听键盘事件时，经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： .enter 回车 .tab 制表键 .delete (捕获 “删除” 和 “退格” 键) .esc 返回 .space 空格 .up 上 .down 下 .left 左 .right 右 {{message}} 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' }, } })可以通过全局 config.keyCodes 对象自定义键值修饰符别名 // 可以使用 v-on:keyup.a Vue.config.keyCodes.a = 65 {{message}} 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' }, } })修饰键 可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应 .ctrl .alt .shift .meta Do something下面一个例子 {{message}} 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' }, } })
好的代码像粥一样，都是用时间熬出来的 
|
【本文地址】