清茶书香

一杯清茶,一本书籍,一个下午。


  • 首页

  • 归档

  • 分类

  • 关于

  • 搜索
Redis JPA Solr SpringData SpringMVC localRepository local Mapper 事务 Mybatis JDBC AOP DI IOC 常用函数 触发器 存储过程 Promise Gateway SpringCloud vue-cli axios es6 webpack npm vue 个性化 zsh 终端 caffeine jvm缓存 guava cache validation Mapping MapStruct comment 小程序 建站 WeHalo config logback plugins database idea maven spring https http nginx password RabbitMQ 秒杀系统 Windows MySQL 数据备份 halo SpringBoot shell Linux ip Optional Stream Lambda k8s Docker 列编辑 vim MacOS 图片合成 Java 远程联调 nps 内网穿透

vue学习记录之事件处理

发表于 2021-06-30 | 分类于 vue | 1 | 阅读次数 861

事件监听

在vue模版语法中我们可以用v-on或者它的缩写@来监听DOM事件,比如v-on:click="count++"、@click="countMethod()"(无参括号可省略)

事件处理方法

一般事件的处理逻辑都比较复杂,所以像上面那样直接把js写在指令中是不行的,这时我们就需要结合组件的方法来使用了。我们可以把我们的逻辑写在定义的方法中,然后在指令中调用即可。

<button @click="change">change</button>
<button @click="change2('this is input param')">change2</button>
<button @click="change2">change2</button>
<button @click="change3(1)">change3</button>
<button @click="change3(1, $event)">change3</button>

<!-- 同时处理多事件时可以用逗号隔开,但函数括号不能省略,event参数也需要显式传入 -->
<button @click="change(), change2('hello'), change3(1, $event)">changeALL</button>

<script>
export default {
  name: "Demo",
  methods: {
    change() {
      console.log('method has used.');
      this.tips = this.tips + ' by change.'
    },
    change2(e) {
      console.log('-----------default $event param-----------');
      // 如果传参数,e会是传的值;如果不显式传参,则默认e为Vue封装的DOM事件对象(此时函数调用时括号必须省略才行)
      console.log(e);
    },
    change3(i, e) {
      console.log('-----------$event param-----------');
      // 两个参数以上时e必须显式传入$event参数才能获取到DOM事件对象
      console.log(e);
    }
  }
}
</script>

事件修饰符

事件修饰符就是为v-on指令(缩写@)用.开头的指令后缀,比如@click.once只点击一次。

vue提供的事件修饰符总共有这些:

  • stop(阻止事件冒泡)
  • .prevent(阻止默认事件)
  • .capture(添加事件监听器,使用事件捕获模式,即可以将传播过来的事件优先处理)
  • .self(只有事件在元素本身触发时才触发,即不是通过内部元素触发的)
  • .once(事件只触发一次)
  • .passive(滚动事件的默认行为 (即滚动行为) 将会立即触发,这个修饰符对应addEventListener中的passive选项)

下面是一个简单的冒泡事件案例

<template>
  <div @click="log('click the big box.'),log('---------------分割线---------------')" style="background-color: pink; width: 300px; height: 300px;">
    <div @click="log('click the middle box.')" style="background-color: orange; width: 200px; height: 200px;">
      <div @click="log('click the small box.')"
           style="background-color: skyblue; width: 100px; height: 100px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bubble",
  methods: {
    log(tip) {
      console.log(tip);
    }
  }
}
</script>

如果要处理冒泡事件,可以使用Vue提供的几个修饰符,比如:stop、self

<!-- 使用stop修饰符处理,阻止事件继续传播 -->
<template>
  <div @click="log('click the big box.')" style="background-color: pink; width: 300px; height: 300px;">
    <div @click.stop="log('click the middle box.'),log('---------------分割线---------------')" style="background-color: orange; width: 200px; height: 200px;">
      <div @click.stop="log('click the small box.'),log('---------------分割线---------------')"
           style="background-color: skyblue; width: 100px; height: 100px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bubble",
  methods: {
    log(tip) {
      console.log(tip);
    }
  }
}
</script>
<!-- 使用self修饰符处理,点击到当前盒子才会触发事件 -->
<template>
  <div @click.self="log('click the big box.')" style="background-color: pink; width: 300px; height: 300px;">
    <div @click.self="log('click the middle box.'),log('---------------分割线---------------')" style="background-color: orange; width: 200px; height: 200px;">
      <div @click="log('click the small box.'),log('---------------分割线---------------')"
           style="background-color: skyblue; width: 100px; height: 100px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bubble",
  methods: {
    log(tip) {
      console.log(tip);
    }
  }
}
</script>
<!-- 使用stop、self结合处理 -->
<template>
  <div @click="log('click the big box.')" style="background-color: pink; width: 300px; height: 300px;">
    <div @click.self.stop="log('click the middle box.'),log('---------------分割线---------------')" style="background-color: orange; width: 200px; height: 200px;">
      <div @click="log('click the small box.'),log('---------------分割线---------------')"
           style="background-color: skyblue; width: 100px; height: 100px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bubble",
  methods: {
    log(tip) {
      console.log(tip);
    }
  }
}
</script>

可以通过.capture调整传播事件的处理顺序:

<template>
  <div @click.capture="log('click the big box.'),log('---------------分割线---------------')" style="background-color: pink; width: 300px; height: 300px;">
    <div @click.self.stop="log('click the middle box.')" style="background-color: orange; width: 200px; height: 200px;">
      <div @click="log('click the small box.')"
           style="background-color: skyblue; width: 100px; height: 100px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bubble",
  methods: {
    log(tip) {
      console.log(tip);
    }
  }
}
</script>

阻止元素默认事件的修饰符.prevent

<!-- 这样form的提交功能就失效了 -->
<form @submit.prevent></form>

不要把.passive和.prevent一起使用,因为.prevent将会被忽略,同时浏览器可能会向你展示一个警告。请记住.passive会告诉浏览器你不想阻止事件的默认行为。

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

按键修饰符

区别于事件修饰符,按键修饰符顾名思义就是修改用户按下键盘上的按键时触发的操作,Vue为我们提供了可以直接将KeyboardEvent.key暴露的任意有效按键名转换为kebab-case来作为修饰符。

<input @keyup.page-down="onPageDown" />
<input @keyup.enter="submit"/>

另外Vue还为常用的按键提供了别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统修饰键

也就是我们常用的Ctrl(或⌃)、Alt(或⌥)、Shift、meta键(Win键或者⌘),这些键配合其他键时都是长按才会生效而非按一次即可,Vue为我们提供的修饰符是:

  • .ctrl
  • .alt
  • .shift
  • .meta
<input @keyup.ctrl.b="log(click the Ctrl + B)"/>

上面的可以用Ctrl + B触发也可以用Ctrl + Shift + B等触发,如果想要精准触发则可以使用.exact修饰符控制。

!-- 在 Ctrl 被按下的时候,即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标修饰符

下面这三个可以用来控制鼠标的操作监听。

  • .left
  • .right
  • .middle
<button @click.prevent.right.exact="log('鼠标右键点击.')">点击</button>
Bennett wechat
欢迎收藏我的微信小程序,方便查看更新的文章。
  • 本文作者: Bennett
  • 本文链接: https://hibennett.cn/archives/vue-handle-events
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
# vue
vue学习记录之模版语法2
记SimpleDateformat日期解析问题
  • 文章目录
  • 站点概览
Bennett

Bennett

60 日志
28 分类
74 标签
RSS
Github E-mail Gitee QQ
Creative Commons
Links
  • MacWk
  • 知了
0%
© 2020 — 2023 hibennett.cn版权所有
由 Halo 强力驱动
|
主题 - NexT.Pisces v5.1.4

浙公网安备 33010802011246号

    |    浙ICP备2020040857号-1