Vue 事件处理

villainhr 发布于2019-08-21 16:17 / 2594人阅读

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

事件处理 监听事件 (绑定)

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

 
     
    这个按钮被点击了 {{number }} 次。

var vm=new Vue({
    el:"#app",
    date:{
        number:1,
    },  
})

方法事件处理器

事件处理器可以放在方法里，也可以放在普通函数vm.method()里

var vm=new Vue({
    el:"#app",
    date:{
        msg:"hello world!",
        number:1,
    },
    methods:{
        tanchu:function(event){
            console.log(event.target);
            console.log(event.type);
        },
    }
});

内联处理方法

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

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

var vm=new Vue({
    el:"#app",
    date:{
        msg:"hello world!",
        number:1,
    },
    methods:{
        tanchu:function(xiaoxi,event){
           console.log(xiaoxi); console.log(event.target);
            console.log(event.type);
        },
    }
});

事件修饰符

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

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

.stop

.prevent

.capture

.self

.once

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

Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：


    {{msg}}

也可以这样写

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

全部的按键别名：

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

还有两个键的




Do something

修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。 鼠标修饰符

.left

.right

.middle

GPU云服务器云服务器事件处理程序待处理事件多个事件处理事件处理模型有

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

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

VUE - MVVM - part8 - 优化Event

摘要：看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾在上一步我们实现了一个简易的事件管理的类，接下来我们把它给优化下，方便我们的使用。接着我们来优化。看这篇之前，如果没有看过之前的文章，可拉到文章末尾查看之前的文章。回顾在上一步我们实现了一个简易的事件管理的类，接下来我们把它给优化下，方便我们的使用。主要优化内容：方便为多个事件添加同一个函数方便为一个事件...

jsyzchen 2019-08-22 16:42 评论0 收藏0
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
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原理】Event - 源码版之绑定标签DOM事件

摘要：写文章不容易，点个赞呗兄弟专注源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于版本如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定标签事件这里的绑定写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于...

phoenixsky 2019-08-23 18:35 评论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的事件处理方法

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

archieyang 2019-08-21 12:05 评论0 收藏0