【Vue】学习笔记-事件处理

news/2024/10/30 19:24:49/

事件的基本用法

  1. 使用v-on:xxx 或@xxx 绑定事件,其中xxx是事件名
  2. 事件的回调需要配置在methods对象中,最终会在vm上
  3. methods中配置的函数,不要用箭头函数,否则this就不是vm了
  4. methods中配置的函数,都是被vue所管理的函数。this的指向是vm或组件实例对象:
  5. @click="demo"和click=“demo($event)” 效果一致,但后者可以传参;
    <div id="root"><h1>欢迎来到{{name}}学习</h1><!-- <button v-on:click="showInfo">点我提示信息</button>--><button @click="showInfo1">点我提示信息(不传参)</button><button @click="showInfo2($event,66)">点我提示信息(传参)</button></div><script type="text/javascript">Vue.config.productionTip =false new Vue({el:'#root', data:{ name:'赛特勒'},methods:{showInfo1(event){//alert('朋友你好')//console.log(event.target.innerText)//console.log(this) //此处的this是vmalert('朋友你好!')},showInfo2(event,number){//alert('朋友你好')console.log(number)console.log(event,event.target.innerText)//console.log(this) //此处的this是vmalert('朋友你好!!')}}})</script>

在这里插入图片描述

事件修饰符

  1. prevent 阻止默认事件(常用)
  2. stop 阻止事件冒泡(常用)
  3. once: 事件只触发一次(常用)
  4. capture: 使用事件的捕获模式
  5. Self: 只有event.target是当前操作的元素是才触发事件:
  6. passive: 事件的默认行为立即执行。无需等待事件回调执行完毕;

修饰符可以连续写,比如可以这样用: @click.prevent.stop=“showInfo”>

<div id="root"><h1>欢迎来到{{name}}学习</h1><a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a><!--阻止事件冒泡(常用)--><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button></div><!--事件只触发一次--><button @click.once="showInfo">点我提示信息</button><!--使用事件的捕获模式--><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!--self--><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button></div><!--事件的默认行为立即执行,无须等待事件回调执行完毕:--><ul @wheel="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: '赛特勒'},methods: {showInfo(e) {//e.stopPropagation() 阻止冒泡console.log(e.target)//alert('朋友你好!')},showMsg(msg) {console.log(msg)},demo(e) {console.log('@')},}})</script>

键盘事件

键盘上的每一个按键都有自己的名称和编码,例如:Enter(13).而Vue还对一些常用的按键起了别名方便使用。

  1. Vue中常用的按键别名:
    回车 =>enter
    删除 =>delete (捕获“删除”和“退格”键)
    退出 =>esc
    空格 =>space
    换行 =>tab
    上=>up
    下=>down
    左=>left
    右=>right
  2. Vue未提供别名的按键,可以使用按键原始的key值取绑定,但注意要转为kebab-case(短横线命名)
  3. 系统修饰键(用法特殊):ctrl,alt,shift,meta
    (1)配合keyup使用;按下修饰键的同事,再按下其他键,随后释放其他键,事件才被触发
    (2)配合keydown使用:正常触发事件。
  4. 也可以使用keyCode去指定具体的按键(不推荐)
  5. Vue.config.keyCodes自定义键名=键码,可以去定制按键别名
    <div id="root"><h1>欢迎来到.{{name}}学习</h1><!--插值语法--><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></div><script type="text/javascript">Vue.config.productionTip =false //阻止生产环境的提示信息//创建Vue实列const x=new Vue({el:'#root', data:{ name:'david'},methods:{showInfo(e){console.log(e.target.value)}}});</script>

在这里插入图片描述


http://www.ppmy.cn/news/42108.html

相关文章

Amazon 中国区配置 PingIdentity 身份集成实现 Redshift 数据库群集单点登录

无疑使用单点登录 (SSO)访问组织中的多种应用程序能够提升用户体验 。 如果您负责为 Amazon Redshift 启用 SSO&#xff0c;则可以使用 ADFS、PingIdentity、Okta、Azure AD 或其他基于 SAML 浏览器的身份提供程序设置 SSO 身份验证。 这篇文章向您展示了如何将 PingOne 设置为…

Redis篇之五大数据类型

1、五大数据类型 4.1、String&#xff08;字符串&#xff09; String是Redis最基本的类型&#xff0c;你可以理解成与Memcached一模一样的类型&#xff0c;一个key对应一个value String类型是二进制安全的。意味着Redis的string可以包含任何数据。比如jpg图片或者序列化的对象…

【Java实验】继承

目录 任务一 扩充类 1. 扩充Shape类族,创建椭圆Ellipse类 2. 创建椭圆类的子类Circle类 任务二 创建一个碟包

推荐NLP基础 RNN循环神经网络

NLP概述 Natural Language Processing(NLP, 自然语言处理) 目的&#xff1a;让计算机处理或“理解”自然语言&#xff0c;以执行语言翻译和问题回答等任务&#xff1b;最终 来讲就是构建机器语言和人类语言之间的沟通桥梁&#xff0c;实现人机交流为最终目的。 常见应用&…

Segment Anything文章要点

核心方法: 1. 数据 Unfortunately, there is no web-scale data source for segmentation; to address this, we build a “data engine” 没有大规模的数据源用于分割; 为了解决这个问题&#xff0c;我们构建了一个“数据引擎” We iterate between using our efficient mo…

Java并发篇二

ForkJoin 在JDK1.7&#xff0c;并行执行任务&#xff0c;提高效率&#xff0c;大数据量才会使用 特点&#xff1a;大任务拆分成小任务&#xff0c;工作窃取&#xff0c;里面维护的是双端队列 package com.kuang.forkjoin;import java.util.concurrent.RecursiveTask;/*** 如…

Linux 上 定时备份 postgresql 数据库

Linux 上 定时备份 postgresql 数据库为了避免操作数据库的风险 因此计划每天对 postgresql 数据库 进行定时备份1.服务器地址&#xff1a;备份服务器地址 10.10.10.101(虚构)postgresql 数据库所在的服务器地址 10.10.10.100(虚构)因为我有单独的备份数据库 不在同一个服务器上…

ChatGPT技术原理、研究框架,应用实践及发展趋势(附166份报告)

​ 一、AI框架重要性日益突显&#xff0c;框架技术发展进入繁荣期&#xff0c;国内AI框架技术加速发展&#xff1a; 1、AI框架作为衔接数据和模型的重要桥梁&#xff0c;发展进入繁荣期&#xff0c;国内外框架功能及性能加速迭代&#xff1b; 2、Pytorch、Tensorflow占据AI框…