Vue的事件处理方法

archieyang 发布于2019-08-21 12:05 / 1283人阅读

摘要：事件处理上一篇的条件渲染与列表渲染下一篇的表单输入绑定事件监听指令可以用来监听事件来执行一些代码这个按钮被点击了次按钮方法事件处理器许多事件处理的逻辑都很复杂，所以直接把代码写在指令中是不可行的。因此可以接收一个定义的方法来调用。

事件处理

上一篇：Vue的条件渲染与列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...

事件监听

v-on 指令可以用来监听dom事件来执行一些js代码


    这个按钮被点击了{{msg}}次

方法事件处理器

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

内联处理器方法

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

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

事件修饰符

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

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

.stop

.prenent

.capture

.self

.once














...


...

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。先来看看如何获取键值：

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

.enter

.tab

.delete

.esc

.space

.up

.down

.left

.right

修饰健

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

.ctrl

.alt

.shift

.meta
比如：

同时按下ctrl和alt键，会有一个弹窗

鼠标按钮修饰符

.left

.right

.middle

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

To be continue......

上一篇：Vue的条件渲染与列表渲染：https://segmentfault.com/a/11...
下一篇：Vue的表单输入绑定：https://segmentfault.com/a/11...

海外云主机私有云 jquery的事件处理 asp中的事件处理大数据预处理的方法大数据的数据处理方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87437.html

Vue.js中的v-on(事件处理)

摘要：不必担心，因为所有的事件处理方法和表达式都严格绑定在当前视图的上，它不会导致任何维护上的困难。当一个被销毁时，所有的事件处理器都会自动被删除。 Vue.js的事件处理监听事件我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

YuboonaZhang 2019-08-21 12:05 评论0 收藏0
vue2.0学习笔记（事件处理）

摘要：请记住，会告诉浏览器你不想阻止事件的默认行为。而单单释放也不会触发事件。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。当一个被销毁时，所有的事件处理器都会自动被删除。 1、监听事件用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 评论0 收藏0
vue练习小项目

项目参考了notepad，非常感谢。用flex布局页面，响应式，简化了内容，当做练手vue项目项目开发过程中，遇到的问题及知识点全部记录在下方 vue2 + vuex + flex + localStorage 本地记事本项目使用了vue cli 脚手架，webpack-simple模板,fontawesome图标在线预览及本地安装 notebook github点击预览 npm insta...

lbool 2019-08-20 14:24 评论0 收藏0
vue.js起步式（二）

摘要：当需要和第三方的动画库，比如配合时会非常有用显式声明过渡类型新增需要给过渡元素添加事件侦听器来侦听过渡何时结束。在下例中我们使用注册一个自定义的过渡元素已被插入在动画结束后调用与相同然后用特性中渐近过渡与一起用时可以创建渐近过渡。 8.方法与事件处理器方法处理器可以用 v-on 指令监听 DOM 事件： Greet 我们绑定了一个单击事件处理器到一个方法 greet。下面在...

BearyChat 2019-08-20 10:29 评论0 收藏0
Vue 事件处理

摘要：事件处理监听事件绑定可以用指令监听事件来触发一些代码。可以用特殊变量把它传入方法事件修饰符在事件处理程序中调用阻止默认行为或阻止冒泡是非常常见的需求。换一种说法如果要引发，必须按下时释放其他的按键单单释放不会引发事件。事件处理监听事件 (绑定) 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。这个按钮被点击了 {{numb...

villainhr 2019-08-21 16:17 评论0 收藏0