前端之vue事件处理

一只爱吃萝卜的小兔子

已于 2022-04-25 14:18:38 修改

阅读量1.2k

点赞数

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

于 2022-04-25 14:12:01 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/124403943

版权

vue 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

前端之vue事件处理

事件处理

事件处理

事件的基本使用：
1,使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
2,事件的回调需要配置在methods对象中，最终会在vm上;(没有代理)
3,methods中配置的函数，不要用箭头函数！否则this就不是vm了;
4,methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和@click="demo($ event)”效果一级，但后者可以传参;

元素绑定事件

@ (v-on:event=“method”)
event 事件
event.target 触发事件的目标

无参

<button @click="noParaMethod">无参事件处理</button>

有参，事件用 `$event` 占位

<button @click="paraMethod($event,'有参事件处理')">有参事件处理</button>

实例:

<body>
  <div id="root">
    <button @click="noParaMethod">无参事件处理</button>
    <button @click="paraMethod($event,'有参事件处理')">有参事件处理</button>
  </div>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: '#root',
      methods: {
        noParaMethod() {
          console.log('我是无参构造函数');
        },
        paraMethod(e, para) {
          console.log(e.target, ', para:', para)
        }
      }
    })
  </script>
</body>

事件修饰符(6个)

修饰符连用:
@event…修饰符1.修饰符2
在这里插入图片描述

.prevent

阻止默认行为

.stop

阻止冒泡

<body>
  <!-- 容器 -->
  <div id="root">
    <div @click="hello">
      <button @click.stop="hello">hello</button>
    </div>
  </div>

  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: '#root',
      data() {
        return {

        }
      },
      methods: {
        hello() {
          alert('hello')
        }
      }
    })
  </script>
</body>

.once

事件只触发一次

捕获时触发事件

.self

在这里插入图片描述

键盘事件

修饰符连用:
@event.按键1.按键2

九个常用按键别名，与keyup、keydown配合使用

<body>
  <!-- 容器 -->
  <div id="root">
    <label for="name">你的名字: </label>
    <input type="text" name="name" id="name" @keydown.enter="showInfo">
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {

        }
      },
      methods: {
        showInfo(e) {
          console.log('按键编码:', e.keyCode)
          console.log('按键名字:', e.key)
          console.log('按键内容:', e.target.value)
        }
      }

    })
  </script>
</body>

下一节:前端之vue计算属性与监视属性

一只爱吃萝卜的小兔子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端之vue事件处理

前端之vue事件处理事件处理元素绑定事件无参有参，事件用 `$event` 占位事件修饰符(6个).prevent.stop.once.self键盘事件事件处理事件的基本使用：1,使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;2,事件的回调需要配置在methods对象中，最终会在vm上;(没有代理)3,methods中配置的函数，不要用箭头函数！否则this就不是vm了;4,methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;5.@click
复制链接

扫一扫