vue学习笔记--事件处理（监听事件和修饰符）

清浅九天

已于 2022-03-08 11:08:41 修改

阅读量850

点赞数

分类专栏： vue 文章标签： vue.js 学习前端

于 2022-03-07 13:19:22 首次发布

本文链接：https://blog.csdn.net/aspxgod10/article/details/123232396

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.绑定监听--事件基本处理

vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，如果有形参必须传event,此时通过$event指明实参event

<body>
  <div id="root">
    <h2>vue学习{{name}}</h2>
    <button @click="showInfo1">点击提示框（不传参）</button>
    <button @click="showInfo2(88,$event)">点击提示框（传参）</button>
  </div>
</body>
<script>
  Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
  const vm = new Vue({
    el: '#root',
    data: {
      name: '事件处理'
    },
    methods: {
      showInfo1(event) {
        console.log(event.target.innerHTML)
      },
      showInfo2(number) {
        console.log(number, event)
      }
    }
  })
</script>

总结：

使用v-on：xxxx或@xxxx绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数，否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象；
@click = “demo” 和 @click=“demo($event)”效果一致，但是后者可以传参；

2.事件修饰符

vue中的事件修饰符：

.prevent ：阻止事件默认行为（常用）
.stop：阻止事件继续传播，冒泡事件（常用）
.once ：事件将只会触发一次（常用）
.capture：使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self ：只当在 event.target 是当前操作的元素时才触发，即事件不是从内部元素触发的
.passive ：事件的默认行为立即执行，无需等待事件回调执行完毕

.stop：阻止事件继续传播，冒泡事件

冒泡事件：事件流顺序为从内到外。

JS 默认带有冒泡事件机制。使用 .stop 修饰符，可以阻止事件的冒泡机制。

嵌套两层父子关系，然后所有都有点击事件，

不使用.stop 修饰符，点击子节点，就会触发从内至外子节点-》父节点的点击事件；
使用.stop 修饰符，点击子节点，只会触发子节点点击事件

.capture：使用事件捕获模式

捕获事件：事件流顺序为从外到内。

JS 默认事件流为冒泡事件。使用 .capture 修饰符可以使事件流变为捕获事件

与嵌套两层父子关系，然后所有都有点击事件，

不使用.capture，点击子节点，就会触发从内至外子节点-》父节点的点击事件；
使用.capture，在外层添加，点击子节点，就会触发从外至内父节点-》子节点的点击事件；

.self ：只当在 event.target 是当前操作的元素时才触发

在Vue中，由于事件捕获和冒泡的存在，当点击某个元素时会引发其父元素（父父元素、父父父元素…）的点击事件发生，使得点击某个元素时达不到想要的效果。.self修饰符可以很好的解决这一情况，.self修饰符只有在点击事件绑定的元素与当前被点击元素一致时才触发点击事件。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" charset="UTF-8" src="vue.js"></script>

  <title>Document</title>
  <style>
    .demo1 {
      width: 200px;
      height: 50px;
      background: rebeccapurple;
    }
  </style>
</head>

<body>
  <div id="root">
    <h2>vue学习{{name}}</h2>
    <!--   .prevent ：阻止事件默认行为（常用） -->
    <a href="#" @click.prevent="showInfo">点击提示信息</a>

    <!--   .stop： 阻止事件继续传播，冒泡事件（常用） -->
    <div class="demo1" @click="msgout">
      <button @click.stop="msginner">点击提示信息</button>
  <!-- 修饰符可以连续写 -->
<a href="#" @click.stop.prevent="msginner">点击提示信息</a>
    </div>

    <!--    .once ：事件将只会触发一次（常用） -->
    <button @click.once="showInfo">点击提示信息</button>

    <!-- .capture： 使用事件捕获模式 -->
    <div class="demo1" @click.capture="msgout">
      <button @click="msginner">点击提示信息</button>
    </div>
    <!-- self ：只当在 event.target 是当前操作的元素时才触发 -->
    <div class="demo1" @click.self="msgout">
      <button @click="msginner">点击提示信息</button>
    </div>
  </div>
</body>
<script>
  Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
  const vm = new Vue({
    el: '#root',
    data: {
      name: '事件修饰符'
    },
    methods: {
      showInfo() {
        alert('好好学习')
      },
      msgout() {
        console.log('最外层')
      },
      msginner() {
        console.log('最里层')
      }
    }
  })
</script>

</html>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用`v-on:click.prevent.self`会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。

3.键盘修饰符

在Vue中允许 v-on 在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

 <input type="text" placeholder="" @keyup.enter="showInfo">

清浅九天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记--事件处理（监听事件和修饰符）

1.绑定监听--事件基本处理vue可以通过@click绑定方法，默认参数是event，在方法中如果指明了形参event可以获取控件的属性值，如果没有指明形参event也使用event也不会报错，如果有形参必须传event,此时通过$event指明实参event<body> <div id="root"> <h2>vue学习{{name}}</h2> <button @click="showInfo1">点击提示框（不传
复制链接

扫一扫