vue3 基础-事件绑定 & 修饰符__vue passive修饰符

事件绑定和各种修饰符 (事件, 按键, 鼠标, exact)

无非就是 js 的一些事件, 按键, 鼠标等的一些绑定在 vue 的实现而已, 很好理解. 先来看一个基础例子.

事件初体验

<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件绑定</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return { counter: 1 }
      },
      methods: {
        handleClick () { this.counter += 1 }
      },
      template: `
      <div>
        {{counter}}
        <button @click="handleClick">增1</button>
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

则表示给这个 "增1" 的按钮绑定了一个 "点击" 的方法叫 "handleClick", 每点击一次则 counter 的值就加1.当然这里其实还可以简写, 就不用写在 methods 里面, 但不建议这样写, 是简洁了, 但是不够优雅吧.

template: `
    <div>
        {{counter}}
        <button @click="counter += 1">增1</button>
    </div>
    `

获取原生事件对象 & 函数传参

有的时候我们想要获取到原生 js 的 event 对象, 同时又想在触发事件的时候传递参数, 二者要能同时实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>获取原生事件对象event</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          counter: 1
        }
      },
      methods: {
        handleClick (num, e) {
          console.log(e)
          this.counter += num
        }
      },
      template: `
      <div>
        {{counter}}
        <button @click="handleClick(3, $event)">增1</button>
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

函数是可以传参数的, dom 里面穿实参, 定义的形参放在 methods 里面
$event 是一个关键字, 表示原生 js 的 event 对象啦

<button @click="handleClick(3, $event)">增1</button>
 
handleClick (num, e) {
  console.log(e)
  this.counter += num
}

一个事件可绑定多个函数

<!DOCTYPE html>
<html lang="en">
<head>
  <title>获取原生事件对象 event</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          counter: 1
        }
      },
      methods: {
        handleClick1 (num) {
          this.counter += num
        },

        handleClick2 (num) {
          alert('click2')
        }
      },
      template: `
      <div>
        {{counter}}
        <button @click="handleClick1(2), handleClick2()">多函数</button>
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

这里同一个点击事件, 会触发 "handleClick1" 和 "handleClick2", 直接用 "," 分割往后写即可, 注意同单个方法不同在于, 多个函数是需要写 "( )" 来表示调用的.

事件修饰符

常用的一些如 stop, prevent, capture, self, once, passive 等. 这里以阻止冒泡的 stop 来做一个演示.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>事件修饰符</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          counter: 1
        }
      },
      methods: {
        divClick () {
          alert('divClick')
        },

        btnClick (num) {
          this.counter += 1
        }
      },
      template: `
      <div>
        {{counter}}
        <div @click="divClick">
          <button @click.stop="btnClick">点我</button>
        </div>
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

关键在于这里的 .stop 阻止了 button 向外冒泡.

<div @click="divClick">
    <button @click.stop="btnClick">点我</button>
</div>

对几个常用的事件修饰符进行梳理如下:

.stop: 阻止事件冒泡
.self: 点自己本身(子元素非自身) 才会触发
.prevent: 阻止默认行为 (如 form 表单的自动跳转)
.capture: 设置事件从默认的"冒泡"形式转为"捕获"模式 (捕获: 从外到内)
.once: 设置事件只能执行一次
.passive: 设置滚动事件( @scroll.passive) 的默认行为, 需注意不能和 .prevent 同时使用

按键修饰符

vue 对一些常用的按键进行了封装, 如 enter, tab, delete, esc, up, down, right, left 等. 这里咱以 enter 键为例做一个演示.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>按键修饰符</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      methods: {
        handleEnter () {
          alert('enter!')
        }
      },
      template: `<input @keydown.enter="handleEnter" />`
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

即点击或者往输入框填内容后, 按下 enter 键则会触发 "handleEnter" 这个函数.

同样对这些常用的按键修饰符做一个梳理如下:

.enter : 回车键则触发
.delete: 删除键delete触发
.esc: 退出键Esc触发
up, down, left, right : 方向键则触发

鼠标修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <title>鼠标修饰符</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      methods: {
        handleEnter () {
          alert('mouse-right')
        }
      },
      template: `<div @click.middle="handleEnter" >鼠标事件</div>`
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

这里演示以鼠标滚轮为例子, 鼠标事件无法就如下3个场景.

left: 鼠标左键
right: 鼠标右键
middle: 鼠标滚轮

精确修饰符

可理解"多键的精确组合", 要完全按对了才会触发. 这里以 exact 为例, 需求是必须 "按住 ctrl 再 click" 才能触发

<!DOCTYPE html>
<html lang="en">
<head>
  <title>精确修饰符</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      methods: {
        handleEnter () {
          alert('exact!')
        }
      },
      template: `<div @click.ctrl.exact="handleEnter" >精确修饰符</div>`
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

总结

本篇内容还是蛮多的, 就最后来波小结吧:

事件绑定函数可以传参和绑定多个函数
绑定函数时可以在 dom 上传一个实参 $event 则为原生 js 的事件对象
事件修饰符: stop, prevent, capture, self, once, passive
按键修饰符: enter, tab, delete, esc, up, down, right ...
鼠标修饰符: left, right, middle
精确修饰符: exact

耐心和恒心, 总会获得回报的.