006.事件处理器

事件处理器

v-on指令

用于监听 DOM 事件在触发时,运行一些 JavaScript 代码。

v-on指令缩写

1.完整语法

1
<a v-on:函数名="三大内容"></a>

2.缩写

1
<a @函数名="三大内容"></a>

v-on指令可绑定的内容

1.函数表达式

  • 🧮格式

    1
    <button @click="methods函数名([参数])">函数表达式</button>
    1
    2
    3
    4
    5
    6
    7
    8
    new Vue({
    el: "#box",
    methods: {
    函数名([参数名]) {
    ...
    }
    }
    })
  • 🔥案例

    1. v-on指令绑定内容为 ➾ 函数表达式事件时,

      • 若传入参数是事件对象{event}和其他参数,必须在绑定内容中,使用$事件对象{$event}

        1
        <button @click="handleAdd($event, 1, 2)">函数表达式</button>
        • ❗注意
          • @click="handleAdd($event, 1, 2)"中,只能是$event
        1
        2
        3
        4
        5
        6
        7
        8
        new Vue({
        el: "#box",
        methods: {
        handleAdd(evt, a, b) {
        console.log("🚩 ➾ 当前元素", evt.target, a, b)
        }
        }
        })

        gif-231123095611

    2. 事件处理中,可以有绑定多个方法,这些方法由逗号{,}分隔

      1
      2
      3
      4
      5
      <div id="app">
      <button @click="one(), two()">
      点我
      </button>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      new Vue({
      el: '#app',
      methods: {
      one() {
      console.log('触发事件①')
      },
      two() {
      console.log('触发事件②')
      }
      }
      })

      gif-231123101136

2.函数名

  • 🧮格式

    1
    <button @click="methods函数名">函数名</button>
    1
    2
    3
    4
    5
    6
    7
    8
    new Vue({
    el: "#box",
    methods: {
    函数名([事件对象]) {
    ...
    }
    }
    })
  • 🔥案例

    • v-on指令绑定内容为 ➾ 函数名事件时,

      • 若不传入参数,可以在methods函数中,传入事件对象{event}。
      1
      <button @click="handleAdd">函数名</button>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      new Vue({
      el: "#box",
      methods: {
      handleAdd(evt) {
      console.log("🚩 ➾ 事件对象", evt)
      console.log("🚩 ➾ 当前元素", evt.target)
      }
      }
      })

      gif-231123094649

3.表达式

在触发事件时,运行一些JavaScript代码。

  • 🧮格式

    1
    <button @click="表达式"></button>
  • 🔥案例

    1
    2
    3
    4
    <div id="box">
    {{count}}
    <button @click="count++"></button>
    </div>
    1
    2
    3
    4
    5
    6
    new Vue({
    el: "#box",
    data: {
    count: 1
    }
    })

    gif-231123100319

修饰符

1.事件修饰符

Vue 为 v-on指令提供了事件修饰符来处理 DOM 事件细节,代替了 ➾ 

  • 譬如\text{: }event.stopPropagation() ➾ 阻止事件冒泡等方法。

  • 🔔提示

    • 修饰符由以点{.}开头的指令后缀表示。

    • ⏳详述

      1. .stop ➾ 阻止事件冒泡。

        • 🔥案例

          • 阻止单击事件冒泡。

            1
            <a v-on:click.stop="doThis"></a>
      2. .prevent ➾ 阻止浏览器默认行为。

        • 🔥案例

          • 提交事件不再重载页面。

            1
            <form v-on:submit.prevent="onSubmit"></form>
      3. .capture ➾ 阻止事件捕获。

      4. .self ➾ 只监听触发该元素本身(而不是子元素)的事件。

      5. .once ➾ 每次页面重载后,只会触发一次事件。

        • 🔥案例

          • 单击事件只能点击一次。

            1
            <a v-on:click.once="doThis"></a>
    • 其他🔥案例

      1. 只有修饰符 ➾ 不绑定事件。

        1
        <form v-on:submit.prevent></form>
      2. 修饰符串联。

        1
        <a v-on:click.self.prevent="doThat"></a>
        • ❗注意

          • 使用事件修饰符时,顺序很重要 ➾ 不同的代码顺序将会产生不同的效果。
            1. v-on:click.prevent.self 会阻止所有的点击事件。
            2. v-on:click.self.prevent 只会阻止对元素自身的点击事件。
      3. 模态框

        1. 方案一 ➾ <div id="center" @click.stop>

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          <div id="box">
          <button @click="isShow=true">show</button>

          <div id="overlay" v-show="isShow" @click="isShow=false">
          <div id="center" @click.stop>
          <div>用户名:<input type="text" /></div>
          <div>密码:<input type="password" /></div>
          <div>
          <button>登录</button>
          </div>
          </div>
          </div>
          </div>
          1
          2
          3
          4
          5
          6
          var vm = new Vue({
          el: "#box",
          data: {
          isShow: false
          }
          })
        2. 方案二 ➾ @click.self="isShow=false"

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          <div id="box">
          <button @click="isShow=true">show</button>

          <div id="overlay" v-show="isShow" @click.self="isShow=false">
          <div id="center">
          <div>用户名:<input type="text" /></div>
          <div>密码:<input type="password" /></div>
          <div>
          <button>登录</button>
          </div>
          </div>
          </div>
          </div>
          1
          2
          3
          4
          5
          6
          var vm = new Vue({
          el: "#box",
          data: {
          isShow: false
          }
          })

          gif-231129162832

2.按键修饰符

在监听键盘事件时,我们经常需要检查详细的按键。

  • 而Vue 允许为 v-on指令在监听键盘事件{v-on:keyup}时,添加按键修饰符。

3.键盘修饰符

  1. .enter ➾ 回车键。

    • 🔥案例

      1
      <input v-on:keyup.enter="submit">
  2. .tab ➾ 制表键。

  3. .delete ➾ 删除键和退格键。

  4. .esc ➾ 取消键。

  5. .space ➾ 空格键。

  6. .up ➾ 上键。

  7. .down ➾ 下键。

  8. .left ➾ 左键。

  9. .right ➾ 右键。

按键码

使用按键对应的ASCII字符集触发按键事件 ➾ 键盘按键与ASCII字符集对照表

  • 🔥案例

    1
    <input v-on:keyup.13="submit">
    • 🔔提示
      • 13 ➾ enter{回车键}。

4.系统修饰键

  1. .ctrl

    • 🔥案例

      • Ctrl + Click。

        1
        <div v-on:click.ctrl="doSomething">Do something</div>
  2. .alt

  3. .shift

  4. .meta

    • 🔔提示
      1. 在 Mac 系统键盘上,meta 对应 command 键{⌘}。
      2. 在 Windows 系统键盘,meta 对应 Windows 徽标键{⊞}。
  5. .exact

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

    • 🔥案例

      1. AltShift键被按下时,也会触发事件。

        1
        <button v-on:click.ctrl="onClick">A</button>
      2. 有且只有Ctr键被按下的时,才会触发事件。

        1
        <button v-on:click.ctrl.exact="onCtrlClick">A</button>
      3. 没有任何{系统修饰符}被按下的时,才会触发事件。

        1
        <button v-on:click.exact="onClick">A</button>

5.鼠标修饰符

  1. .left ➾ 鼠标左键事件。

  2. .right ➾ 鼠标右键事件。

  3. .middle ➾ 鼠标中间滚轮事件。