我的 Vue.js 学习日记 （七） - 事件与修饰符
2024-05-10 14:58:29
上节回顾
上节写了一个v-for与table的简单互动，脑子里回忆一下，嗯 ~ 还是回去再看一遍吧...
本节目标
今天看一下事件与修饰符，并且把有疑惑的地方敲一遍，亲眼看一下输出结果。由于时间有限，今天只写了prevent stop capture exact once这五个修饰符。
事件
事件就不多说了，v-on: 简写 @ 。
修饰符
prevent - 阻止表单提交
<form @submit.prevent><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button>
</form><form><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button>
</form>tip:prevent修饰符与form标签一起使用
stop - 阻止事件向“上”传播
<div @keydown.enter="doSomeThing(1)"><div @keydown.enter.stop="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div>
</div><div @keydown.enter="doSomeThing(1)"><div @keydown.enter="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div>
</div>tip:对于嵌套的元素，元素同时有的事件会向外进行扩散
capture - 改变事件传播顺序
<div @keydown.enter.capture="doSomeThing(1)"><div @keydown.enter.capture="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div>
</div>tip:catpture会在向上传递时享有优先执行权，当存在多个capture时，更外层的优先权更高
once - 一次性触发
<input type="text" @keydown.enter.once="doSomeThing('我使用了.once')">tip:触发过一次后不可用，当然前提是不刷新
exact - 取该修饰符之前所有事件和修饰符的与关系
<input type="text" placeholder="按下的键中包括Enter键" @keydown.enter="doSomeThing('我被触发了')">
<input type="text" placeholder="按下ctrl+enter键触发Alert" @keydown.ctrl.enter.exact="doSomeThing('我被触发了')">
<input type="text" placeholder="单单按下enter键触发Alert" @keydown.enter.exact="doSomeThing('我被触发了')">
<input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡觉')">tip:exact修饰符常与系统修饰符和按键修饰符配合使用
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><title>chapter - 7</title>
</head>
<body>
<div id="app"><h3>打开F12 --> Console 页，观察输出结果</h3><h4>$event</h4><input type="text" v-model="msg" @keydown.enter="doClick(msg, $event)" placeholder="光标放在此处按下回车键"><button class="btn btn-default btn-sm" @click="doClick(msg, $event)">点 - 我</button><h4>prevent修饰符 - 阻止窗体提交</h4><form @submit.prevent><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button></form><h4>没有阻止窗体提交</h4><form><input type="email" placeholder="Email"><button type="submit" class="btn btn-default btn-sm" >submit</button></form><h4>stop修饰符 - 阻止事件向“上”传播</h4>
<div @keydown.enter="doSomeThing(1)"><div @keydown.enter.stop="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div>
</div><h4>没有阻止事件向“上”传播</h4><div @keydown.enter="doSomeThing(1)"><div @keydown.enter="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div></div><h4>capture修饰符 - 改变事件传播顺序</h4><div @keydown.enter.capture="doSomeThing(1)"><div @keydown.enter.capture="doSomeThing(2)"><input type="text" @keydown.enter="doSomeThing(3)"></div></div>
<p>结论：capture会在向上传递时享有有限级，存在多个captrue时，外层优先级高于内层</p><h4>once修饰符 - 一次性触发</h4><input type="text" @keydown.enter.once="doSomeThing('我使用了.once')"><h4>self修饰符 - 只有自身“主动被触发”才执行，“传播”而来的不触发</h4><div @click.self="doSomeThing('我是“外层div”，我被触发了')" style="background-color: cornflowerblue; width: 300px; height: 28px;"><div @click="doSomeThing('我是“中间div”，我被触发了')" style="background-color: deeppink; width: 200px; height: 28px;"><div @click.self="doSomeThing('我是“内层”input,我被触发了')" style="background-color: lightgreen; width: 100px; height: 28px;"></div></div></div><h4>系统修饰符与按键修饰符与exact修饰符</h4><input type="text" placeholder="按下的键中包括Enter键" @keydown.enter="doSomeThing('我被触发了')"><input type="text" placeholder="按下ctrl+enter键触发Alert" @keydown.ctrl.enter.exact="doSomeThing('我被触发了')"><input type="text" placeholder="单单按下enter键触发Alert" @keydown.enter.exact="doSomeThing('我被触发了')"><input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡觉')">
</div><script>const data = {msg: ''}const methods = {doClick (msg, event) {console.log('-->start')console.log('type : '+event.type)console.log('target : '+event.target)console.log('button : '+event.button )console.log('tip : button 在 firefox 中 0 代表左键')console.log('-->end')},onSubmit () {alert('为什么总觉得自己该做点什么？')},doSomeThing (msg) {alert(msg)}}var vm = new Vue({el: '#app',data: data,methods:methods})
</script>
</body>
</html>小节
困，累，小节跳过...
我的 Vue.js 学习日记 （七） - 事件与修饰符相关推荐
- Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
- Vue.js 学习笔记 七 控制样式
Vue.js可以灵活的控制样式 我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
- Vue.js学习日记03
Vue.js样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式 class 属性绑定 为 v-bind:class 设置一个对象,从而动态的切 ...
- Vue.js 学习笔记 八 v-for
v-for指令,是用来循环的,常用的情况有以下4种 <div id="divApp"><!--迭代数字--><p v-for="n in 5 ...
- Vue.js 学习笔记 十 自定义按键事件
<div id="divApp"><!--任何键盘动作都会触发--><input type="text" v-on:keyup=& ...
- Vue.js 学习笔记 五 常用的事件修饰符
介绍几个常用的事件修饰符 直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
- Vue.js 学习笔记 十一 自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
- Vue.js 学习笔记 九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
最新文章
- 别人家的公司的 1024 程序员节 ! 羡慕了！
- SAP 启用了HUM和QM的前提下，无法对采购订单的收货在质量放行前执行部分退货!
- linux 文件目录
- java定时增量同步,一种可配置的定时数据同步方法与流程
- python爬虫怎么挣钱_python爬虫19 | 爬虫遇到需要的登录的网站怎么办？用这3招轻松搞定！...
- “高仿版拼多多”宣告破产！曾一年收割1.3亿用户，如今自救失败负债16亿
- Java如何解决乱码问题
- 王道操作系统考研笔记——1.1.6 系统调用
- effective C++ 读后笔记
- 行为设计模式 - 迭代器设计模式
- 设计干货|菜单 - 导航UI移动版模板
- appium python 抓包_Python学习教程：另辟蹊径，appium抓取app应用数据了解一下
- 找出一个字符串中的数字
- 新生报到小程序,微信小程序新生入学,微信小程序新生报到系统毕业设计作品
- css white-space属性总结
- 关于EVAL()函数（一）
- Android - 一个似神器而非神器之Palette探索与实践
- 每周分享第 10 期
- NYOJ82-迷宫寻宝（一）
- 柔性传感器产业化将至或将成为折叠屏背后的“黑科技”