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

2022-08-29 23:33:08 阅读：217 来源： 互联网

标签：修饰符 const 鼠标 app counter 绑定事件 vue3

无非就是 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

标签：修饰符,const,鼠标,app,counter,绑定,事件,vue3
来源： https://www.cnblogs.com/chenjieyouge/p/16637795.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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