基本使用
Vue里的事件基本应用;
需求1,点击按钮提示信息:
v-on:click="showInfo"
是Vue绑定事件的指令语法;
意思是:当点击这个 btn 的时,调用 showInfo 函数,事件函数也叫方法,所以写在 methods 里;
页面效果:
点击按钮:弹框也没有问题;
原生JS里事件也会返回 event 对象,Vue也是可以,看控制台结果:
分别是:事件对象,点击对象,对象文本,this对象和this指向的 vm;
注意:
这里使用了普通函数,没有使用箭头函数,showInfo:(e)=>{}
;
是因为箭头函数里没有自己的 this ,会指向 window ;普通函数里的 this 指向 Vue 实例对象;
所以,接受 Vue 管理的函数,一般都写成普通函数就行,showInfo(){}
;
需求2:点击按钮传递参数;
注意1:绑定事件函数 v-on:click
可以简写成: @click
;
注意2:传递参数的时候,需要保留关键字 $event
,不写就接收不到了;其他参数写后边就行;
看页面效果:
分别点击按钮:
问题:观察vm中的数据和函数有何不同?
name 是做了数据代理,来自 _data,用来绑定数据的,是有可能会变化的;
函数是不用做数据代理的,因为函数是直接拿来使用的方法,不用修改;
【事件的基本使用】:
1)使用 v-on:xxx
或 @xxx
绑定事件,其中 xxx 是事件名;
2)事件的回调需要配置在 methods 对象中,最终会在 vm 上;
3)methods 中配置的函数,不要使用箭头函数!否则 this 就不是 vm 了;
4)methods 中配置的函数,都是被 Vue 所管理的函数,this 的指向是 vm 或组件实例对象;
5)@click="demo"
和 @click="demo($event)"
效果一样,但后者可以传参;
事件修饰符
需求1:阻止默认行为
提示:之前讲过,绑定数据v-bind:
可以简写 :
;
提示:绑定事件,使用 v-on:click
可以简写成 @click
;
注意: prevent
是阻止默认行为的关键字,用链式写法跟在绑定事件后,在这里是阻止 a 跳转;
像 prevent 这种关键字,在 Vue 里叫修饰符,共有6个,见总结;
看下效果:
连续点击 a 标签,不会跳转,还能在控制台正常输出;
【Vue中的事件修饰符】:
1)prevent :阻止默认事件(常用);
2)stop:阻止事件冒泡(常用);
3)once:事件只触发一次(常用);
4)capture:使用事件的捕获模式;
5)self:只有 event.target 是当前操作的元素时才触发事件;
6)passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
需求2:阻止事件冒泡
外层 div 加了点样式,在这里省略了;
提示:button 和 外层的 div 都有绑定事件,点击按钮会触发冒泡;
注意:在绑定事件 @click
后,跟 stop
修饰符,可阻止按钮冒泡;
看下效果:
需求3:事件只触发一次
有时,点了一次,事件触发,再点一次就不希望再触发了;
直接使用上面的代码,只需要修改 修饰符 为 once
即可;
需求4:使用事件的捕获模式
事件的捕获是由外向内,事件的冒泡是由内向外,事件的触发顺序是先捕获后冒泡;
事件的默认模式是冒泡,要修改事件的默认模式,就需要添加 修饰符;
提示:当前是两个嵌套的 div ,都绑定了事件,再没做修饰符的情况下,事件是冒泡模式;
在未加 修饰符 的情况下,点击 div2 会如何?
看效果和结果:
冒泡模式,由内向外;点击 div2 ,那 div2 先触发,冒泡到 div1 ,所以输出顺序是如结果所示;
现在,加个事件捕获模式的修饰符:
注意:给 div1 加上了 开启事件捕获 模式的修饰符 capture
后,那 div1 就变成了捕获模式;
这时,再点击 div2 会如何?
看效果和结果:
虽然点击的是 div2 ,但因为 div1 开启了捕获模式,所以由外向内先触发,之后才是 div2 的冒泡模式被触发;
需求5:只有 event.target 是当前操作的元素时才触发事件
没有绑定修饰符,点击按钮会触发事件冒泡。
看效果:
点的是按钮,加上冒泡,就会输出两次 e.target
;
要的是 e.target 的触发事件,那不是 e.target 的就不会触发了,所以把 selft
修饰符绑给外层 div。
绑给外层 div ,点击按钮后,执行 showInfo ,冒泡到上层 div ,div 一看,不是当前 e.target ,所以算了,不触发了;