• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

VUE入门学习之事件处理

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1. 函数绑定

可以用v-on:click="methodName"或者快捷方式 @click="methodName"绑定事件处理函数

@click="methodName()"也可以,@click="methodName"猜测是简写

  <div v-on:click="add">{{ count }}</div>
  <div @click="add">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
  },

2. 带参数和$event 

可以直接在往事件绑定的函数里传参数和$event

<div @click="set(0, $event)">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

3. 多个函数绑定一个事件

多个函数直接用逗号分隔,这里即使是没有入参的函数,也要加括号,否则不会执行那个函数

比如<div @click="set(0, $event), log">{{ count }}</div> 只会执行set

<div @click="set(0, $event), log()">{{ count }}</div>
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    add() {
      this.count++;
    },
    log() {
      console.log("log---");
    },
    set(value, event) {
      console.log(event);
      this.count = value;
    },
  },

4. 事件修饰符

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 能被用到自定义的组件事件上 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发   -->
<!-- 而不会等待 `onScroll` 完成                   -->
<!-- 这其中包含 `event.preventDefault()` 的情况   -->
<!-- 尤其能够提升移动端的性能   -->
<div @scroll.passive="onScroll">...</div>

5. 按键修饰符 

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

<!-- 只有在 `key` 是 PageDown时调用 `vm.onPageDown()` -->
<input @keyup.page-down="onPageDown" />

6. 系统修饰键

事件触发时修饰键必须处于按下状态

  • .ctrl
  • .alt
  • .shift
  • .meta

<!-- 按住Alt, 按Enter -->
<input @keyup.alt.enter="clear" />

<!-- 按住Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 .exact 修饰符 

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

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

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

鼠标按钮修饰符

  <button @click.left="log('left cllilck')">鼠标左击</button>
  <button @click.right="log('right cllilck')">鼠标右击</button>
  <button @click.middle="log('middle cllilck')">鼠标中击</button>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
react实现无限循环滚动信息发布时间:2022-02-05
下一篇:
VUE watch监听器的基本使用方法详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap