VUE入门学习之事件处理

2022-04-15 0 344
目录
  • 1.函数绑定
  • 2.带参数和$event 
  • 3.多个函数绑定一个事件
  • 4.事件修饰符
  • 5.按键修饰符 
  • 6. 系统修饰键
    •  .exact 修饰符 
    • 鼠标按钮修饰符
  • 总结

    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>

    总结

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

    免责声明:
    1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

    2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
    如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
    如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

    NICE源码网 JavaScript VUE入门学习之事件处理 https://www.niceym.com/18246.html