vue-6-事件处理
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div> var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})
在内联语句处理器中访问原生 DOM 事件
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button> methods: {
warn: function (message, event) {
if (event) event.preventDefault()
alert(message)
}
}
事件修饰符
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form> <!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- 只调用一次,.once
修饰符还能被用到自定义的组件事件上 -->
<div v-on:click.once="doThat">...</div> <!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
键值修饰符
<!-- 只有在 keyCode 是 时调用 vm.submit() -->
<input v-on:keyup.="submit"> 按键别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit"> 常用按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right 可以通过全局 config.keyCodes 对象自定义键值修饰符别名:
Vue.config.keyCodes.f1 =
修饰键
附加按键:
.ctrl
.alt
.shift
.meta <!-- Alt + C -->
<input @keyup.alt.="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
鼠标按钮修饰键:
.left
.right
.middle
在html中监听事件优点:解耦,无须清理
vue-6-事件处理的更多相关文章
- vue基础——事件处理
监听事件 可以用 v-on 指令监听dom事件,并在触发时运行一些JavaScript代码. 示例: <div id="example-1"> HTML <but ...
- 一起学Vue之事件处理
在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发 ...
- Vue.js事件处理
Vue.js事件处理 1.v-on指令 用法如下:使用v-on:指令指定其执行的具体内容或者方法名即可. <button v-on:click='num++'>giao</butto ...
- 前端框架之Vue(7)-事件处理
监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 示例: <div id="example-1"> <butt ...
- 【04】Vue 之 事件处理
4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件.Vue提供的指令进行绑定也是非常方便,而且能让ViewModel更简洁,逻辑更彻 ...
- vue基础---事件处理
(1)事件监听 v-on 指令监听 DOM 事件,并在触发时运行JS代码 <div class="event_area"> {{message}} <button ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on的思考,也就是本章的主题:事件处理 为什么需要事件处理 在前端开发中,经常要面对各种表单.按钮.而这里面就住着一个事件:点击 (click). 前端童鞋们肯定不陌生它, ...
- vue之事件处理
一.事件处理方法 1.格式 完整格式:v-on:事件名="函数名" 或 v-on:事件名="函数名(参数……)" 缩写格式:@事件名="函数名&qu ...
- vue的事件处理梳理
一.事件函数 1.v-on绑定click,执行一个函数 <input type="button" v-on:click="test" value=&quo ...
随机推荐
- C# http监听之Nancy.net
通过winform或者是控制台应用程序监听http请求,之前使用的是微软的HttpListener,参考https://www.cnblogs.com/duanjt/p/5566336.html 然后 ...
- gradle ----> 安装和使用
1.安装gradle 参考官网教程:https://gradle.org/install/ 安装的前提:要求安装jdk1.7或者以上 比较重要的一步:配置环境变量,把gradle的bin目录的全路径配 ...
- python安装pandas和lxml
一.安装python 二.安装pip 三.安装mysql-connector(window版):下载mysql-connector-python-2.1.3,解压后进入目录,命令安装:pip inst ...
- hdu6331 Walking Plan
题意: sol: 考虑floyed 直接暴力做的话复杂度是kn^3会炸. 考虑一个比较神仙的分块做法. 注意到我们是可以直接求单独某个k的矩阵,使用矩阵快速幂即可(取min的矩阵乘法). 单独求一次的 ...
- 『计算机视觉』Mask-RCNN_推断网络终篇:使用detect方法进行推断
一.detect和build 前面多节中我们花了大量笔墨介绍build方法的inference分支,这节我们看看它是如何被调用的. 在dimo.ipynb中,涉及model的操作我们简单进行一下汇总, ...
- 『OpenCV3』Mat简介
Mat属性方法介绍:OpenCV2:Mat属性type,depth,step 推荐一套OpenCV入门博客:OpenCV探索 一.Mat Mat类用于表示一个多维的单通道或者多通道的稠密数组.能够用来 ...
- 根据userAgent判断打开网页的所在终端,以及浏览器
function _IsIOS() { var ua = navigator.userAgent.toLowerCase(); if(ua.match(/iPhone\sOS/i) == " ...
- LINQ 中常用函数使用: Take TakeWhile Skip SkipWhile Reverse Distinct
1,Take 方法 Take方法用于从一个序列的开头返回指定数量的元素. string[] names = { "郭靖", "李莫愁", "欧阳晓晓& ...
- 转-MySQL教程-写的很详细,赞一个
原帖地址:https://www.w3cschool.cn/mysql/,谢谢原帖大人 MySQL是什么? MySQL安装 MySQL示例数据库 MySQL导入示例数据库 MySQL基础教程 MySQ ...
- 338. Counting Bits_比特位计数_简单动态规划
https://leetcode.com/problems/counting-bits/ 这是初步了解动态规划后做的第一道题,体验还不错... 看完题目要求后,写出前10个数的二进制数,发现了以下规律 ...