文档章节

vue事件

o
 osc_wws45aot
发布于 2019/08/21 14:18
字数 279
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1.v-on

监听DOM事件,并在触发时运行一些javascript代码

v-on:简写@

v-on还可以接收一个需要调用的方法名称

所有的方法都需要放到methods对象里面,再进行调用

内联处理器中的方式

除了直接绑定到一个方法,也可以在内联javascript语句中调用方法

<button v-on:click="say('helli xiaobai !')">xiaobai</button>

methods: { say: function(e){ console.log(e) } }

.stop阻止事件冒泡

.prevent阻止默认事件

.capture时间捕获(从上到下)

.self只在元素自身回调

.once只触发一次

按键别名

.enter (“回车”键)
.tab (“TAB”键)
.delete (捕获“删除”和“退格”键)
.esc (“ESC”键)
.space (“空格”键)
.up (向上方向键)
.down (向下方向键)
.left (向左方向键)
.right (向右方向键)

Vue也提供了自定义按键别名的方法

可以使用 `v-on:keyup.f1`

 

Vue.config.keyCodes.f1 = 112

组合按键不能单独触发事件,要与非组合按键一起才能触发事件

.ctrl
.alt
.shift
.meta

<!-- "回车"键 和 "F4"键 触发事件 -->

<input @keyup.enter.f4="confirm">

<!-- "回车"键 和 "CTRL"键 触发事件 -->

<input @keyup.enter.ctrl="confirm">

 

上一篇: vue指令
下一篇: vue动态属性
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue从入门到精通

vue的简介 Vue是一套用于构建用户界面的渐进式框架 Vue开发 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> Vue生产版本(项目发布时使用) <script src="https://cd......

osc_gjsta20x
2019/07/12
3
0
给大家分享一个vue的移动端的事件项目

给大家分享一个基于vue的移动端点击和长按事件库,项目于上周正式开源,今天来给大家分享一下 NPM github 码云 第一次加入开源分享的大军,请大家多多支持哦!觉得好的话,请大家给个Star vu...

劫匪强
2019/07/17
270
0
2018年Vue2.x 5小时入门视频教程+实战教程

2018年Vue2.x 5小时入门视频教程+实战教程-包括Vuex、MintUi、ElementUi基础教程28讲。 课程目录 01 无人点餐 无人收银系统 多用户点餐 智能打单 在线支付系统介绍 02 Vue的介绍 Vue环境搭建...

phpgemeca
2018/10/30
177
0
vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

作者 Jeskson 来源 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的安装与使用。 Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染,条...

达达前端小酒馆
2019/12/06
12
0
小白学VUE——入门篇

小白学VUE——快速入门 小白学习VUE参考了:vue官网: https://cn.vuejs.org/ 文章目录 小白学VUE——快速入门 前言:什么是VUE? 环境准备: Vue入门程序 抽取代码片段 vue标准语法: 结语 ...

热爱旅行的小李同学
05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如果你失明了,你怎么编程? - How can you program if you're blind?

问题: Sight is one of the senses most programmers take for granted. 视觉是大多数程序员认为理所当然的感官之一。 Most programmers would spend hours looking at a computer monitor......

技术盛宴
今天
16
0
如何删除使用Python的easy_install安装的软件包? - How do I remove packages installed with Python's easy_install?

问题: Python's easy_install makes installing new packages extremely convenient. Python的easy_install使安装新包非常方便。 However, as far as I can tell, it doesn't implement th......

fyin1314
今天
11
0
如何将逗号分隔的字符串转换为数组? - How to convert a comma separated string to an array?

问题: I have a comma separated string that I want to convert into an array, so I can loop through it. 我有一个逗号分隔的字符串,我想将其转换成数组,因此可以循环遍历它。 Is the...

富含淀粉
今天
13
0
深源恒际:担心个人身份被冒用?不存在!

本文作者:c****t 近日,苟晶被冒名顶替身份参加高考的事件在社会各界掀起广泛热议。事件调查结果公布后,舆论风向逆转,吃瓜群众认为当事人夸大其词消费了公众情绪,一边对当事人所遭遇的不...

百度开发者中心
昨天
5
0
CKEditor 5 + SpringBoot实战(三):SpringData JPA数据持久化

在本系列的文章中,我将介绍如何在Spring Boot Application中使用CKEditor编辑器。介绍的内容包括基本环境的搭建,文件上传,SpringData JPA数据持久化,CKEditor5的安装,CKEditor图片上传,...

树下魅狐
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部