Vue.js-方法与事件

tinylcy 发布于2019-08-23 16:02 / 566人阅读

摘要：学习笔记方法与事件方法与事件调用得方法名后可以不跟括号，如果该方法有参数，默认会将原生事件对象传入。因为通过就可以知道调用的是哪个方法，将逻辑与解耦，便于维护。最重要的是，当销毁时，所有的事件处理器都会自动销毁，无需自己处理。

学习笔记：方法与事件

方法与事件

@click调用得方法名后可以不跟括号()，如果该方法有参数，默认会将原生事件对象event传入。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。

最重要的是，当viewModel销毁时，所有的事件处理器都会自动销毁，无需自己处理。

Vue提供了一个特殊变量$event，用于访问原生DOM事件。


    打开链接

修饰符

Vue支持以下修饰符：

.stop

.prevent

.capture

.self

.once

具体用法如下：

修饰符功能	使用示例
阻止单击事件冒泡
提交事件不再重载页面
修饰符可以串联
只有修饰符
添加事件侦听器时使用事件捕获模式	...
只当事件在该元素本身（不是子元素）触发时执行回调	...
只触发一次，组件同样适用	...

在表单元素上监听键盘事件时，还可以使用按键修饰符。

修饰符功能	使用示例
只有在keyCode是13时调用vm.submit()

除了具体的某个keyCode外，Vue还提供了一些快捷名称：

.enter

.tab

.delete（补货“删除”和“退格”键）

.esc

.space

.up

.down

.left

.right

这些按键修饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl

.alt

.shift

.meta

GPU云服务器云服务器方法new事件android Vue.js 事件与动画 vue.js 属性

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

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

初学Vue（一） -- Vue简单入门

摘要：可以进行计算从开始计数双向绑定数据和输出绑定事件书写区事件区域，所有事件控制写在这里有简写形式可以直接把替换为，。 vue - 国人开发制作的类似于 view 的发音 vue经过了几次大的版本波动 0.x 0.6版本 1.x 版本 2.x 版本 - 现在常用的为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦 react 因为版权原因，导致百度等企业...

Alliot 2019-08-23 18:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

rollback 2019-08-01 17:49 评论0 收藏0
vue.js起步式（二）

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

BearyChat 2019-08-20 10:29 评论0 收藏0
聊聊Vue.js组件间通信的几种姿势

摘要：子组件向父组件通信方法一使用事件父组件向子组件传递事件方法，子组件通过触发事件，回调给父组件。非父子组件兄弟组件之间的数据传递非父子组件通信，官方推荐使用一个实例作为中央事件总线。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 评论0 收藏0