微信在线答题小程序_新手能自己做微信小程序么_公众号小程序怎么做_微信小程序免费开发工具_公众号关联小程序
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

vue完成关联恶性事件的方式案例编码详细说明

发表日期:2021-04-07 02:11文章编辑:jianzhan浏览次数: 标签:    

一、序言

vuejs中的恶性事件关联,应用 v-on:恶性事件名 = 涵数名 来进行的,这儿涵数名是界定在Vue案例中的methods目标中的,Vue案例能够立即浏览在其中的方式。

二、恶性事件关联方法

1、 立即在标识中写js方式

button v-on:click="alert('hi')" 实行方式的第一种书写 /button

2、启用method的方法

 button v-on:click="run()" 实行方式的第一种书写 /button 
 button @click="run()" 实行方式的 缩写 书写 /button 
export default { 
 data () { 
 return {
 msg: '您好vue',
 list:[] 
 methods:{
 run:function(){
 alert('它是一个方式');
 }

(1)方式传参,方式立即在启用时在方式内传到主要参数

 button @click="deleteData('111')" 实行方式传值111 /button 
 button @click="deleteData('222')" 实行方式传值2222 /button 
 deleteData(val){
 alert(val);
 },

(2)传到恶性事件目标

 button data-aid='123' @click="eventFn($event)" 恶性事件目标 /button 
eventFn(e){
 console.log(e);
 // e.srcElement dom连接点
 e.srcElement.style.background='red';
 console.log(e.srcElement.dataset.aid); /*获得自定特性的值*/
 }

三、恶性事件装饰符

1、stop //阻拦恶性事件再次散播 即阻拦它的捕捉和冒泡全过程

方式一: @click='show($event)' 大家拥有恶性事件目标后,大家涵数中不是是便可以运用原生态中的e.cancelBubble=true;

方式二: @click.stop='show()' 要是在恶性事件后边加 .stop 便可以阻拦恶性事件冒泡

举个案子:

案例:以下点一下內部点一下,阻拦了冒泡全过程,即只实行tz这一方式,假如不用.stop,先实行tz方式,后实行gett方式。即根据了冒泡这一全过程。

 div v-on:click="gett" 
 外界点一下
 div v-on:click.stop="tz" 內部点一下 /div 
 /div 

2、prevent //阻拦默认设置恶性事件:

方式一: @click='show($event)' 大家拥有恶性事件目标后,大家涵数中不是是便可以运用原生态中的 e.preventDefault();

方式二: @click.prevent='show()' 要是在恶性事件后边加 .prevent 便可以阻拦默认设置恶性事件。

举个案子:阻拦了a标识的默认设置更新

a href="" v-on:click.prevent 点一下 /a

3、capture // 加上恶性事件监视器时应用恶性事件捕捉方式,即在捕捉方式下开启

案例:在点一下最里层的点一下6时,gett方式先实行,由于gett方式在捕捉方式实行的,先与冒泡恶性事件。以下实行次序 geet- set- tz ,由于后俩个還是冒泡方式下开启的恶性事件。

 div v-on:click.capture="gett" 外界点一下5
 div v-on:click="tz" 內部点一下5
 div v-on:click="set" 点一下6 /div 
 /div 
 /div 

4、self //当今原素本身时开启解决涵数时才会开启涵数

基本原理:是依据event.target明确是不是当今原素自身,来决策是不是开启的恶性事件/涵数

案例:假如点一下內部点一下2,冒泡不容易实行gett方式,由于event.target指的是內部点一下2的dom原素,并不是外界点一下1的,因此不容易开启自身的点一下恶性事件。

 div v-on:click.self="gett" 
 外界点一下1
 div v-on:click="tz" 內部点一下2 /div 
 /div 

5、once //只开启一次

案例:

div v-on:click.once="tz" once /div

6、电脑键盘恶性事件

方式一:@keydown='show()'

自然大家传个$event 还可以在涵数中获 ev.keyCode

if(ev.keyCode==13){
 alert('你按了回车键键!')
}

方式二:

 input type="text" @keyup.enter="show()" 回车键实行
 input type="text" @keydown.up='show()' 上键实行
 input type="text" @keydown.down='show()' 下键实行
 input type="text" @keydown.left='show()' 单击实行
 input type="text" @keydown.right='show()' 鼠标右键实行

小结

之上上述是网编给大伙儿详细介绍的vue完成关联恶性事件的方式案例编码详细说明,期待对大伙儿有一定的协助,假如大伙儿有一切疑惑请帮我留言板留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对诺心互联网网站的适用!
假如你感觉文中对给你协助,热烈欢迎转截,烦请标明出處,感谢!

相关新闻

线上抢答小程序_vue页面使用阿里oss上传功用的实

vue网页页面应用阿里巴巴oss提交作用的案例(一) 文中详细介绍了vue网页页面应用阿里...

日期:2021-01-11 浏览次数:144

济宁小程序开发_详解新手使用vue

详细说明初学者应用vue-router传参时留意事宜 本文关键详细介绍了详细说明初学者应用...

日期:2021-01-07 浏览次数:147

怎么制造微信小程序_vue完成滑动切换效果(仅在

vue完成拖动转换实际效果(仅手中机方式下能用) 本文关键为大伙儿详尽详细介绍了v...

日期:2021-01-07 浏览次数:176

小程序生成平台_详解怎么在Vue项目中发送jsonp请

详细说明怎样在Vue新项目中推送jsonp恳求 本文关键详细介绍了详细说明怎样在Vue新项目中...

日期:2021-01-06 浏览次数:148

开发微信小程序_vue.js使用v

vue.js应用v-model完成父子俩部件间的双重通讯实例 本文关键详细介绍了vue.js应用v-model完成...

日期:2021-01-06 浏览次数:56

logo线上设计方案怎样完成

如今是一个“看脸”社会发展,这类“看脸”不但指人,并且还指事情的别的层面,比如轿车...

日期:2020-12-15 浏览次数:80