vue(一)--监听事件
1.vue-on:监听事件:
demo:点击按钮,number+1
v-on 还可以缩写为 @
2.事件修饰符
.stop
:等同于JavaScript中的event.stopPropagation()
,阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递).prevent
:等同于JavaScript中的event.preventDefault()
, 默认事件指对DOM的操作会引起自动执行的动作,比如点击超链接的时候会进行页面的跳转,点击表单提交按钮时会重新加载页面等,使用".prevent"修饰符可以阻止这些事件的发生。.capture
:与事件冒泡的方向相反,事件捕获由外到内.self
:只会触发自己范围内的事件,不包含子元素.once
:只会触发一次
事件冒泡?
即是:父元素里有 子元素, 如果点击了 子元素, 那么click 事件不仅会发生在子元素上,也会发生在其父元素上,依次不停地向父元素冒泡,直到document元素。
使用事件修饰符解决冒泡:
1. .stop阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递)
在me上的click后面加一个 .stop, 那么冒泡到了这里就结束了,就不会冒到father上面去了。
<div id="me" v-on:click.stop="doc">
2. .prevent 阻止页面刷新
只有超链和form这种会导致页面刷新的操作,.prevent 才有用。 普通的不导致页面刷新的按钮,加上这个没有任何变化。
demo:点击超链接和form不跳转网页:
3. 优先触发 .capture
在father 上增加一个.capture <div id="father" v-on:click.capture="doc">
那么当冒泡发生的时候,就会优先让father捕捉事件。点击son或者me的时候,都会优先触发它,当点击grandfather时并不会被father捕捉,只会弹出grandfather
4. .self
<div id="father" v-on:click.self="doc">
这样点击son 和 me都不会导致其触发click事件,只有点击father自己,才会导致事件发生。
点击son: son---->me-->grandfather
点击me: me---->grandfather
点击father : father---》grandfather
5. .once
<div id="father" v-on:click.once="doc">
这样father点击一次之后,就不会再监听到click了
点击son: son---me--father--grandfather
点击me: me--grandfather
点击father: grandfather
点击grandfather:grandfather
vue(一)--监听事件的更多相关文章
- vue v-on监听事件
在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...
- vue之监听事件
一.v-on 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 简写形式 用@代替 v-on: <button v-on:click="co ...
- vue 键盘监听事件
<template> <div class="hello"> <input v-on:keyup.enter="submit" t ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- Vue的watch监听事件
Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件
<!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- VUE 实现监听滚动事件,实现数据懒加载
methods: { // 获取滚动条当前的位置 getScrollTop() { let scrollTop = 0 if (document.documentElement && ...
- vue 中监听窗口发生变化,触发监听事件, window.onresize && window.addEventListener('resize',fn) ,window.onresize无效的处理方式
// 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...
随机推荐
- 小白学 Python 数据分析(7):Pandas (六)数据导入
人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...
- 杭电-------2042不容易系列之二(C语言写)
/* 根据题意,知道了最终只剩下了3只羊,应该是从最后一步向前推算,但是因为题意的测试布置一个 可以从只有一个收费站算起,知道本次需要就算的收费站,这样之后有小于此数目的可以直接输出, 大于此数目的也 ...
- Python Flask 开发学习笔记
Flask学习 安装pipenv虚拟环境 pip Install pipenv 运行pipenv pipenv --version 进入虚拟容器 pipenv install 安装flask pipe ...
- IO流之File对象
File类: 用来将文件或者文件夹封装成对象 方便对文件与文件夹的属性等信息进行操作(因为流只能操作文件中的数据) File对象可以作为参考传递给流的构造函数 上下级文件夹之间使用分隔符分开: 在Wi ...
- 【Python3爬虫】一次应对JS反调试的记录
一.前言简介 在前面已经写过关于 JS 反调试的博客了,地址为:https://www.cnblogs.com/TM0831/p/12154815.html.但这次碰到的网站就不一样了,这个网站并不是 ...
- redis教程-基础数据结构
需要整套redis缓存高可用集群教学视频的加qq:1324981084,本套视频从安装到集群的搭建和源码的解析,从零基础讲解. 一.Redis 有 5 种基础数据结构,分别为:string (字符串) ...
- 二次开发的Selenium Demo版本
文件名你们自己命名就好,至于为什么要重写强制位移的函数呢,是因为Mac上Selenium不支持拖拽,只能这样做了,4个文件--------------------------------------- ...
- JavaScript-状态模式
状态模式 一个对象有状态变化 每次状态变化都会触发一个逻辑 不能总是用 if...else 来控制 示例:交通信号灯的不同颜色变化 传统的 UML 类图 javascript 中的 UML 类图 cl ...
- Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片
场景 Android布局管理器-使用LinearLayout实现简单的登录窗口布局: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details ...
- windows快捷键记录
-1: 装完iis, run -> inetmgr 弹出iis管理器 0.按住Shift键右击鼠标打开命令行窗口 1.ODBC数据源管理器run->odbcad32 2.计算机管理(查看设 ...