1、事件处理

1.1、 事件的基本使用

1.1.1 、基础知识

  • 事件的基本使用：
    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.1.2、 代码实例

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>标题</title>
  7.     <!-- 引入vue -->
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9. </head>
  11. <body>
  12.     <div id="App">
  14.         <h1>欢迎 {{name}}</h1>
  15.         <button v-on:click="showInfo">点我提示信息</button>
  16.         <button @click="showInfo1">点我提示信息1(不传参)</button>
  17.         <button @click="showInfo2($event,666)">点我提示信息2(传参)</button>
  19.     </div>
  20.     <script type="text/javascript">
  21.         Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
  23.         //创建Vue实例
  24.         new Vue({
  25.             el: '#App',
  26.             data: {
  27.                 name: "Vue"
  28.             },
  29.             methods: {
  30.                 showInfo() {
  31.                     console.log("提示信息")
  32.                 },
  33.                 showInfo1(event) {
  34.                     console.log(this)//此处的this是vm
  35.                     console.log("提示信息1")
  36.                 },
  37.                 showInfo2(event, number) {
  38.                     console.log(event, number)
  39.                     console.log(this)//此处的this是vm
  40.                     console.log("提示信息2")
  41.                 }
  43.             }
  44.         })
  45.     </script>
  47. </body>
  49. </html>

1.1.3、测试效果

1.2、事件修饰符

1.2.1、 基础知识

Vue中的事件修饰符：

  • 1、prevent：阻止默认事件（常用）；
  • 2、stop：阻止事件冒泡（常用）；
  • 3、once：事件只触发一次（常用）；
  • 4、capture：使用事件的捕获模式；
  • 5、self：只有event.target是当前操作的元素时才触发事件；
  • 6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

1.2.2 、代码实例

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>标题</title>
  7.     <!-- 引入vue -->
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9.     <style>
  10.         * {
  11.             margin-top: 20px;
  12.         }
  14.         .demo1 {
  15.             height: 80px;
  16.             width: 240px;
  17.             background-color: pink;
  18.         }
  20.         .box1 {
  21.             padding: 5px;
  22.             width: 400px;
  23.             height: 400px;
  24.             background-color: skyblue;
  25.         }
  27.         .box2 {
  28.             padding: 5px;
  29.             width: 200px;
  30.             height: 200px;
  31.             background-color: orange;
  32.         }
  34.         .list {
  35.             width: 200px;
  36.             height: 200px;
  37.             background-color: peru;
  38.             overflow: auto;
  39.         }
  41.         li {
  42.             height: 100px;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <div id="App">
  49.         <h1>欢迎，{{name}}</h1>
  50.         <!-- 阻止默认事件（常用） -->
  51.         <a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>
  53.         <!-- 阻止事件冒泡（常用） -->
  54.         <div class="demo1" @click="showInfo1">
  55.             <button @click.stop="showInfo1">点我提示信息1</button>
  56.             <!-- 修饰符可以连续写 -->
  57.             <a href="http://www.baidu.com" @click.prevent.stop="showInfo3">百度哦</a>
  58.         </div>
  60.         <!-- 事件只触发一次（常用） -->
  61.         <button @click.once="showInfo4">点我提示信息4</button>
  63.         <!-- 使用事件的捕获模式 -->
  64.         <div class="box1" @click.capture="showMsg(1)">
  65.             div1
  66.             <div class="box2" @click="showMsg(2)">
  67.                 div2
  68.             </div>
  69.         </div>
  71.         <!-- 只有event.target是当前操作的元素时才触发事件； -->
  72.         <div class="demo1" @click.self="showInfo">
  73.             <button @click="showInfo">点我提示信息</button>
  74.         </div>
  76.         <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
  77.         <ul @wheel.passive="demo" class="list">
  78.             <li>1</li>
  79.             <li>2</li>
  80.             <li>3</li>
  81.             <li>4</li>
  82.         </ul>
  84.     </div>
  85.     <script type="text/javascript">
  86.         Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
  88.         //创建Vue实例
  89.         new Vue({
  90.             el: '#App',
  91.             data: {
  92.                 name: "ZYZ"
  93.             },
  94.             methods: {
  95.                 showInfo() {
  96.                     console.log("阻止页面跳转")
  97.                 },
  99.                 showInfo1() {
  100.                     console.log("阻止冒泡")
  101.                 },
  102.                 showInfo3() {
  103.                     console.log("阻止百度冒泡跳转")
  104.                 },
  105.                 showInfo4() {
  106.                     console.log("只触发一次")
  107.                 },
  108.                 showMsg(msg) {
  109.                     console.log(msg)
  110.                 },
  111.                 demo() {
  112.                     for (let i = 0; i < 100000; i++) {
  113.                         console.log('#')
  114.                     }
  115.                     console.log('累坏了')
  116.                 }
  117.             }
  118.         })
  119.     </script>
  121. </body>
  123. </html>

1.2.3 、测试效果

1.3、键盘事件

1.3.1、基础知识

1、Vue中常用的按键别名：

  • 回车 => enter
  • 删除 => delete (捕获“删除”和“退格”键)
  • 退出 => esc
  • 空格 => space
  • 换行 => tab (特殊，必须配合keydown去使用)
  • 上 => up
  • 下 => down
  • 左 => left
  • 右 => right

2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta

  • (1)、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
  • (2)、配合keydown使用：正常触发事件。

4、也可以使用keyCode去指定具体的按键（不推荐）

5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

1.3.2、代码实例

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <title>标题</title>
  7.     <!-- 引入vue -->
  8.     <script type="text/javascript" src="../js/vue.js"></script>
  9. </head>
  11. <body>
  12.     <div id="App">
  13.         <h2>欢迎,{{name}}</h2>
  14.         <input type="text" placeholder="按下回车提示输入（enter）" @keydown.enter="showInfo"><br><br>
  15.         <input type="text" placeholder="按下回车提示输入（delete）" @keydown.delete="showInfo"><br><br>
  16.         <input type="text" placeholder="按下回车提示输入（tab）" @keydown.tab="showInfo"><br><br>
  17.         <input type="text" placeholder="按下回车提示输入(huiche)" @keydown.huiche="showInfo">
  18.     </div>
  19.     <script type="text/javascript">
  20.         Vue.config.productionTip = false  //设置为 false 以阻止 vue 在启动时生成生产提示
  21.         Vue.config.keyCodes.huiche = 13 //定义了一个别名按键
  23.         //创建Vue实例
  24.         new Vue({
  25.             el: '#App',
  26.             data: {
  27.                 name: "ZYZ"
  28.             },
  29.             methods: {
  30.                 showInfo(e) {
  31.                     console.log(e.key,e.keyCode)
  32.                     console.log(e.target.value)
  33.                 }
  34.             }
  35.         })
  36.     </script>
  38. </body>
  40. </html>

1.3.3 、测试效果


Vue学习之--------事件的基本使用、事件修饰符、键盘事件（2022/7/7）的更多相关文章

  1. Vue学习笔记（二）动态绑定、计算属性和事件监听

    目录 一.为属性绑定变量 1. v-bind的基本使用 2. v-bind动态绑定class(对象语法) 3. v-bind动态绑定class(数组语法) 4. v-bind动态绑定style(对象语 ...

  2. Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  3. 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python学习day20 面向对象(二)类成员&成员修饰符

    1.成员 类成员 类变量 绑定方法 类方法 静态方法 属性 实例成员(对象) 实例变量 1.1实例变量 类实例化后的对象内部的变量 1.2类变量 类中的变量,写在类的下一级和方法同一级. 访问方法: ...

  6. java学习笔记12（final ，static修饰符）

    final: 意思是最终的,是一个修饰符,有时候一个功能类被开发好了,不想被子类重写就用final定义, 用final修饰的最终数据成员:如果一个类的数据成员用final修饰符修饰,则这个数据成员就被 ...

  7. Java学习笔记(4)----Public,Protected,Package,Private修饰符可见性

    Java修饰符类型(public,protected,private,friendly) public的类.类属变量及方法,包内及包外的任何类均可以访问:protected的类.类属变量及方法,包内的 ...

  8. angularjs学习笔记3-directive中scope的绑定修饰符

    在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...

  9. Java学习笔记:04面向对象-内部类_访问修饰符_final

    04面向对象-内部类/访问修饰符/final 1.static的介绍 static:关键字,静态的 static的作用是用来修饰类中的成员 2.访问一个类中的某一个成员变量 方法一: _1.创建对象 ...

  10. Vue中键盘事件

    Vue中监听 键盘事件及修饰符 键盘事件: keyCode 实际值 48到57     0 - 9 65到90           a - z ( A-Z ) 112到135       F1 - F ...

随机推荐

  1. Vue3系列11--Teleport传送组件

    Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术,不受父级style.v-show等属性影响,但data.prop数据依旧能够共用的技术:类似于 Rea ...

  2. 解决linux下U盘变成只读模式

    在最近的一个项目里,需要将linux下的些文件拷贝出来.插入U盘后,发现是只读模式. U盘可以写出,不能写入. 折腾了一翻: 最后这样解决的: 将U盘插入到windows下 执行 chkdsk g: ...

  3. java过滤器的写法

    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 原文地址:http://t.csdn.cn/ZD88A ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 过滤器实际上就是 ...

  4. ADO.NET数据库开发

    ADO.NET博客  ADO.NET - 张果 - 博客园 (cnblogs.com) ADO.NET官方 ADO.NET | Microsoft Docs EntityFrameWork 开始使用 ...

  5. Java开发学习(二十七)----SpringMVC之Rest风格解析及快速开发

    一.REST简介 REST(Representational State Transfer),表现形式状态转换,它是一种软件架构风格 当我们想表示一个网络资源的时候,可以使用两种方式: 传统风格资源描 ...

  6. 在 node 中使用 jquery ajax

    对于前端同学来说,ajax 请求应该不会陌生.jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果: $.ajax({ url: "https://echo. ...

  7. 第九十二篇：Vue 自定义指令

    好家伙, 1.什么是自定义指令? vue官方提供了v-text,v-for,v-model,v-if等常用的指令.除此之外vue还允许开发者自定义指令. 2.自定义指令的分类 vue中的自定义指令分为 ...

  8. 第九十篇：Vue 具名插槽

    好家伙 1.什么是具名插槽? 来简单理解一下, 具有自己名字的插槽,就是具名插槽 我们来尝试使用一下具名插槽: 在Article.vue组件中: <template> <div cl ...

  9. 安装docker-compose--翻译

    Install Docker Compose 译文 安装 Docker Compose 你可以在macOS.Windows.64-bit Linux上运行 Compose 前提条件 Docker Co ...

  10. 引擎之旅 Chapter.2 线程库

    预备知识可参考我整理的博客 Windows编程之线程:https://www.cnblogs.com/ZhuSenlin/p/16662075.html Windows编程之线程同步:https:// ...