前言

在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和对象绑定,本篇博客将会讲解关于vue中事件的使用。

其实关于事件我们都不陌生,在学习JavaScript的时候就有接触过,例如点击事件,鼠标事件,键盘事件以及移动端的触摸事件等等。在学习vue的事件处理之前我们先回顾一下在Javascript中是如何绑定事件的吧!

Javascript绑定事件

方法一:直接在标签上绑定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <button onclick="add()">你好</button>
  9. <script type="text/javascript">
  10. function add(){
  11. alert('你好')
  12. }
  13. </script>
  14. </body>
  15. </html>

方法二:通过获取节点动态绑定

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <button id="btn">问候</button>
  9. <script type="text/javascript">
  10. document.getElementById('btn').onclick=function(){
  11. alert('你好')
  12. }
  13. </script>
  14. </body>
  15. </html>

方法三:使用addEventListener监听事件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <button id="btn">问候</button>
  9. <script type="text/javascript">
  10. document.getElementById('btn').addEventListener('click',function(){
  11. alert('你好')
  12. },false)
  13. </script>
  14. </body>
  15. </html>

区别:

  • 用 “addeventlistener" 可以多次绑定同一个事件,且都会执行。
  • 在DOM结构如果绑定两个 "onclick" 事件,只会执行第一个。
  • 在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

vue中绑定事件

vue中绑定事件的方法其实和JavaScript中绑定事件都差不多,不信,我们来看看实例就一目了然了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <button @click="greet('你好')">问候</button>
  10. </div>
  11. <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  12. <script type="text/javascript">
  13. const vm=new Vue({
  14. el:'#app',
  15. data:{
  16.  
  17. },
  18. computed:{
  19.  
  20. },
  21. methods:{
  22. greet(msg){
  23. alert(msg);
  24. }
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

现在感觉是不是差不多呀!vue中的事件(方法)统一由methods管理,任何处理的方法都必须写在这里面。

接下来我讲解一下vue事件处理带括号和没有带括号的区别。

示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <button @click="greet('你好',$event)">问候</button>
  10. <button @click="say">打招呼</button>
  11. </div>
  12. <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  13. <script type="text/javascript">
  14. const vm=new Vue({
  15. el:'#app',
  16. data:{
  17.  
  18. },
  19. computed:{
  20.  
  21. },
  22. methods:{
  23. greet(msg,event){
  24. alert(msg);
  25. console.log(event);
  26. },
  27. say(event){
  28. console.log(event);
  29. }
  30. }
  31. })
  32. </script>
  33. </body>
  34. </html>

结果:

区别在于事件对象参数 event 的处理。不加括号时,函数第一个参数为 event,加了括号后,需要手动传入 $event 才能获得事件对象

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的,比如下面的这些。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
  • .once
  1. <!-- 阻止单击事件继续传播 -->
  2. <a v-on:click.stop="doThis"></a>
  3.  
  4. <!-- 提交事件不再重载页面 -->
  5. <form v-on:submit.prevent="onSubmit"></form>
  6.  
  7. <!-- 修饰符可以串联 -->
  8. <a v-on:click.stop.prevent="doThat"></a>
  9.  
  10. <!-- 只有修饰符 -->
  11. <form v-on:submit.prevent></form>
  12.  
  13. <!-- 添加事件监听器时使用事件捕获模式 -->
  14. <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
  15. <div v-on:click.capture="doThis">...</div>
  16.  
  17. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  18. <!-- 即事件不是从内部元素触发的 -->
  19. <div v-on:click.self="doThat">...</div>
  20. <!-- 点击事件将只会触发一次 -->
  21. <a v-on:click.once="doThis"></a>

示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <button v-on:click.once="greet()">问候</button>
  10. </div>
  11. <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  12. <script type="text/javascript">
  13. const vm=new Vue({
  14. el:'#app',
  15. data:{
  16.  
  17. },
  18. computed:{
  19.  
  20. },
  21. methods:{
  22. greet:function(){
  23. alert('你好')
  24. }
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

示例中我们点击事件只能调用一次,当点击第二次的时候它不会有任何的反应。

注意:

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

  1. <!-- 只有在 `key` 是 `Enter` 时调用 `submit()方法` -->
  2. <input v-on:keyup.enter="submit">

示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <button v-on:keyup.enter="greet()">问候</button>
  10. </div>
  11. <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  12. <script type="text/javascript">
  13. const vm=new Vue({
  14. el:'#app',
  15. data:{
  16.  
  17. },
  18. computed:{
  19.  
  20. },
  21. methods:{
  22. greet:function(){
  23. alert('你好')
  24. }
  25. }
  26. })
  27. </script>
  28. </body>
  29. </html>

按键码

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  1. .enter
  2. .tab
  3. .delete (捕获“删除”和“退格”键)
  4. .esc
  5. .space
  6. .up
  7. .down
  8. .left
  9. .right

系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  1. .ctrl
  2. .alt
  3. .shift
  4. .meta

.exact修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

  1. <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  2. <button @click.ctrl="onClick">A</button>
  3.  
  4. <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  5. <button @click.ctrl.exact="onCtrlClick">A</button>
  6.  
  7. <!-- 没有任何系统修饰符被按下的时候才触发 -->
  8. <button @click.exact="onClick">A</button>

鼠标按钮修饰符

  1. .left
  2. .right
  3. .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

vue学习笔记(四)事件处理器的更多相关文章

  1. Vue学习笔记四:跑马灯效果

    目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...

  2. VUE 学习笔记 四 计算属性和监听器

    1.计算属性 对于任何复杂逻辑,你都应当使用计算属性 <div id="example"> <p>Original message: "{{ me ...

  3. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  4. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  5. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  6. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  7. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  8. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  9. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

随机推荐

  1. 什么是实例化? 标签: vb 2015-02-08 20:26 1026人阅读 评论(30) 收藏

    为什么要写这个博客呢?可能是因为自己的基础太差,昨天敲三层的注册,各层都敲完了以后,死活报错,无奈之下只能找晓婵求救,她只改了三个地方,犯了同一个错误,我的源码是这样写的:Dim uA As  Ent ...

  2. HZOJ Blue

    Blue: 贪心. 我们不妨给蛤定一个先后顺序,则贪心策略即从右至左每只蛤依次往最远的石子跳. 证明: 如果最右的蛤不往最远的石子跳,而是选择了一个较近的石子,那么必然会存在一个该蛤左边的蛤越过了它跳 ...

  3. @雅礼集训01/06 - T3@ math

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给出 n, m, x,你需要求出下列式子的值: \[\sum_{ ...

  4. thinkphp3.2配置redis缓存和文件缓存

    如果把一些常用但又不容易变的数据存缓存,而不是每次查数据库,这样能很大减轻数据库压力 最近由于项目需要,就尝试了一把redis,但是后面又用了tp3.2的文件缓存,直接进入主题: 在config.ph ...

  5. HTML标题title滚动

    上代码: <script type="text/javascript"> var msg = document.title; msg = "…" + ...

  6. Libev源码分析01:Libev中的监视器结构(C结构体实现继承)

    在Libev的源码中,用到了一种用C实现类似C++中继承的技巧,主要是用宏和结构体实现. 在Libev中,最关键的数据结构就是各种监视器,比如IO监视器,信号监视器等等.这些监视器的多数成员都是一样的 ...

  7. oracle 使用显式的游标(CURSORs)

    使用隐式的游标,将会执行两次操作. 第一次检索记录, 第二次检查TOO MANY ROWS 这个exception . 而显式游标不执行第二次操作.

  8. 使用模块定义AngularJS组件

    一.模块创建/查找 module 当创建一个模块时,必须指定name和requires参数,即使你的模块并不存在依赖 var myApp=angular.module("exampleApp ...

  9. HTTP协议详解以及URL具体访问过程(转载)

    https://blog.csdn.net/f45056231p/article/details/82533490

  10. JavaScript 数组去重和对象相等判断

    前几天电话面试问到了数组去重和两个对象相等判断,当时回答的不是特别好,都过去好几天了,总结下. 1.数组去重 当时的问题是这样的有个简单的数组[1,1,2,3],去重后的结果是[1,2,3],怎么实现 ...