Vue 事件的基本使用 && 事件修饰符
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>事件的基本使用</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 事件的基本使用：
11 1.使用v-on:xxx 或者简写 @xxx 绑定事件，其中xxx是事件名
12 2.事件的回调需要配置在methods对象中，最终会在vm上
13 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
14 4.methods中配置的函数，都是被Vue关联的函数，this的指向是vm 或 组件实例对象
15 5.@click="demo" 和 @click="demo($event)" 效果一样，但后者可以船参数
16 -->
17 <div id="root">
18 <h1>hello， {{name}}</h1>
19 <button v-on:click="showInfo1">点我提示信息(不传参)</button>
20 <button @click="showInfo2($event,66)">点我提示信息(传参)</button>
21 </div>
22 </body>
23
24 <script type="text/javascript" >
25 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
26
27 let vm = new Vue({
28 el: '#root',
29 data: {
30 name: 'Jack'
31 },
32 methods: {
33 showInfo1(event){
34 console.log(event.target.innerText);// target事件对象，发生事件的事件目标（元素）
35 console.log(this); // 这里的this就是vm(vue对象)
36 alert('showInfo1');
37 },
38 showInfo2: function (event, number) {
39 console.log(number);
40 alert('showInfo2');
41 }
42 }
43 })
44 vm.$mount('#root') // el的第二种写法
45 </script>
46 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>事件修饰符</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 <style>
8 *{
9 margin-top: 5px;
10 }
11 .demo2{
12 height: 50px;
13 background-color: skyblue;
14 }
15 .demo4{
16 padding: 5px;
17 background-color: skyblue;
18 }
19 .demo4_1{
20 padding: 5px;
21 background-color: orange;
22 }
23 .list{
24 width: 200px;
25 height: 200px;
26 background-color: peru;
27 overflow: auto;
28 }
29 li{
30 height: 100px;
31 }
32 </style>
33 </head>
34 <body>
35 <!--
36 Vue中的事件修饰符(事件修饰符可以连续使用，如:@click.prevent.stop，先阻止默认事件，再阻止冒泡事件，是有优先顺序的，谁在前谁优先)：
37 1.prevent: 阻止默认事件（常用）
38 2.stop：阻止事件冒泡（常用）
39 3.once：事件只触发一次（常用）
40 4.capture：使用事件的捕获模式
41 5.self：只有event.target是当前操作的元素时才会触发事件
42 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
43 -->
44 <div id="root">
45 <h1>hello， {{name}}</h1>
46 <!-- 1.prevent: 阻止默认事件（常用） -->
47 <a href="http://baidu.com" @click.prevent="showInfo1">点我提示信息</a>
48 <!-- 2.stop：阻止事件冒泡（常用） -->
49 <div class="demo2" @click="showInfo2" >
50 <!-- 冒泡事件会先调用button的showInfo2事件，然后有执行div的showInfo2事件 -->
51 <button @click.stop="showInfo2">点我提示信息</button>
52 </div>
53 <!-- 3.once：事件只触发一次（常用） -->
54 <button @click.once="showInfo2">点我提示信息</button>
55 <!-- 4.capture：使用事件的捕获模式 -->
56 <div class="demo4" @click.capture="showInfo4(1)">
57 div1
58 <div class="demo4_1" @click="showInfo4(2)">
59 div2
60 </div>
61 </div>
62 <!-- 5.self：只有event.target是当前操作的元素时才会触发事件 -->
63 <!-- showInfo4(1) 冒泡事件的时候只有event.target是当前操作的元素时才会触发事件 -->
64 <div class="demo4" @click.self="showInfo4(1)">
65 div1
66 <div class="demo4_1" @click="showInfo4(2)">
67 div2
68 </div>
69 </div>
70 <!-- 6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕 -->
71 <!-- scroll：滚动条滚动的时候触发
72 wheel：鼠标滚轮滚动的时候触发
73 scroll与wheel区别：滚动条滚动到底部的时候因为不能继续往下滚动所以你再往下滚动的时候不会触发，但鼠标滚轮可以一直往下滚动不管滚动条是不是到底了，它会一直触发
74 -->
75 <ul @wheel.passive="demo6" class="list">
76 <li>1</li>
77 <li>2</li>
78 <li>3</li>
79 <li>4</li>
80 </ul>
81 </div>
82 </body>
83
84 <script type="text/javascript" >
85 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
86
87 let vm = new Vue({
88 el: '#root',
89 data: {
90 name: 'Jack'
91 },
92 methods: {
93 showInfo1(event){
94 // event.preventDefault(); // 阻止默认事件（当前a标签的href）的触发。Vue中使用prevent事件修饰符一样的效果
95 alert('showInfo1');
96 },
97 showInfo2(e) {
98 // e.stopPropagation(); // 这样就阻止了div的冒泡事件 Vue可以直接使用stop修饰符
99 alert('我是提示信息！');
100 },
101 showInfo4(number){
102 // 冒泡事件的调用流程：捕获事件，从父控件到子控件依次捕获，然后冒泡依次执行，所以依次是showInfo4(2)、showInfo4(1)
103 // 当设置事件修饰符capture时，事件在捕获的时候直接执行，依次是showInfo4(1)、showInfo4(2)
104 console.log(number);
105 },
106 demo6(e){
107 // 当你滚动鼠标滚轮的时候会立即执行该方法(demo6 我们定义的事件回调)，
108 // 然后去滚动条会往上或者往下滚动(默认回调)
109 // 但当你使用passive 事件修饰符的时候，它的流程就变成立即执行默认回调，不再等待demo6执行完了再执行
110 for (let i = 0; i < 1000; i++){
111 console.log('@');
112 }
113 console.log('累坏了');
114 }
115 },
116
117 })
118 vm.$mount('#root') // el的第二种写法
119 </script>
120 </html>
Vue 事件的基本使用 && 事件修饰符的更多相关文章
- Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)
目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...
- vue.js（13）--按键修饰符
v-on监听事件时可添加按键修饰符 <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter=&q ...
- 043——VUE中组件之使用.sync修饰符与computed计算属性实现购物车原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中v-model解析、sync修饰符解析
上善若水,水善利萬物而不爭.——<道德經> 简介 在平时开发是经常用到一些父子组件通信,经常用到props.vuex等等,这里面记录另外的三种方式v-model.sync是怎么使用,再说是 ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue.js_03_vue.js的样式和修饰符
1.vue.js的样式 <body> <div id="app"> <h1 :style="styleObj1">这是一个h ...
- Vue中v-model指令的常用修饰符
v-model指令有三个可以选用的修饰符:.lazy..number以及.trim.vue官方对此的描述为: .number-输入字符串转为有效的数字 .lazy-取代input监听change事件 ...
- 第六十二篇：Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
- VUE组件3 数据流和.sync修饰符
单向数据流:数据通过prop从父组件传递到子组件中,当父级组件中的数据更新时,传子组件也会更新,但不能在子组件中修改.防止子组件在无意中修改,改变父级组件状态 然而,双向数据绑定在某些情况下有用.如果 ...
- vue 表单基本 表单修饰符
表单的基础 利用v-model进行双向数据绑定: 1.在下拉列表中,将v-model写在select中 2.单选框和复选框需要每个按钮都需要写上v-model 3.v-model在输入框中获取得是输入 ...
随机推荐
- 技术管理进阶——技术Leader如何拒绝业务方？
原创不易,求分享.求一键三连 前段时间,有个粉丝在群里问了一个问题: 今天对接一个业务团队,要我帮他导数据,这种工作又臭又烦又没成长,而且边界模糊谁做都可以,我很想拒绝他,但又怕引起对方不满,大家有什 ...
- JavaScript中if语句优化和部分语法糖小技巧推荐
前言 在前端日常开发过程中,if else判断语句使用的次数应该是比较频繁的了,一些较为复杂的场景,可能会用到很多判断,在某个代码块使用很多if else时,代码会显得较为冗余,阅读起来不够清晰. 除 ...
- Tomcat启动失败：java.lang.NoSuchMethodError: org.apache.tomcat.util.res.StringManager.getManager(Ljava/lang/Class;)Lorg/apache/tomcat/util/res/StringManager
项目开发中发现服务器上Tomcat启动失败 开始定位 第一步:打开tomcat日志catalina.log: 2017-07-25 17:02:43,799 [Catalina-startStop-1 ...
- mysql刷题笔记
近期,为提升自己的工程能力,在休息时常通过刷题来回顾一下基础性知识. 于是选择了牛客网上的mysql知识题库练手,过程中,主要遇到了几个比较有意思的题,记录下来,方便回顾. 题1:SQL29 计算用户 ...
- 【freertos】012-事件标志概念和实现细节
目录 前言 12.1 实现事件机制的预备知识 12.1.1 守护任务 12.1.2 事件的不确定性 12.1.3 事件组的报文 12.2 事件概念 12.3 事件用途参考 12.4 事件实现原理简述 ...
- 10个常见触发IO瓶颈的高频业务场景
摘要:本文从应用业务优化角度,以常见触发IO慢的业务SQL场景为例,指导如何通过优化业务去提升IO效率和降低IO. 本文分享自华为云社区<GaussDB(DWS)性能优化之业务降IO优化> ...
- Caller 服务调用 - Dapr
前言 上一篇我们讲了使用HttpClient的方式调用,那么如果我们现在需要更换为通过dapr实现服务调用,我们需要做哪些事情呢? Caller.Dapr 入门 如果我们的项目原本使用的是Caller ...
- Canal-监听数据库表的变化
1. 简介 Canal是阿里巴巴旗下的一款开源项目,纯Java开发.基于数据库增量日志解析,提供增量数据订阅&消费功能. 工作原理 Mysql主备复制原理 MySQL master 将数据变更 ...
- SSMS设置为深色模式
更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2022年2月8日. 2022年4月16日:SSMS很好用,但现在我更多使用DataGrip了. 2022年6月11日:S ...
- C#中的枚举器
更新记录 本文迁移自Panda666原博客,原发布时间:2021年6月28日. 一.先从可枚举类型讲起 1.1 什么是可枚举类型? 可枚举类型,可以简单的理解为: 有一个类,类中有挺多的数据,用一种统 ...