• vue点击事件

    一、Vue中的事件处理

    可以用v-on指令监听DOM事件，并在触发时运行一些js代码。

    举个简单的例子：实现每次点击按钮counter加1的效果

    <div id="app">  <p>{{counter}}p>  <button v-on:click="counter++">点击+1button>div><script>  Vue.config.productionTip = false;  new Vue({    el: "#app",    data: {      counter: 1,    },  });script>body>

    二、事件处理方法

    许多事件处理逻辑会更复杂，所以直接把js代码写在v-on指令中是不可行的，因此v-on还可以接收一个需要调用的方法名称。

    实现步骤：

    • 在标签v-on指令后定义方法名

    • 在methods对象中定义方法

    示例：​​​​​​​

    <div id="app">  <p>{{name}}p>  <button v-on:click="showName">显示名称button>div><script>  Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。  new Vue({    el: "#app",    data: {      name: "zhangsan",    },    methods: {      showName(event) {        // this在方法里指向当前Vue实例        console.log(this.name);        // event是原生DOM事件        if(event){          console.log(event.target.tagName)        }      },    },  });script>

    内联处理器中的方法

    除了直接绑定到一个方法，也可以在内联js语句中调用方法​​​​​​​

    <div id="app">  <button v-on:click="say('hi')">Say hibutton>  <button v-on:click="say('what')">Say whatbutton>div><script>new Vue({  el: '#app',  methods: {    say: function (message) {      alert(message)    }  }})script>

    有时也需要在内联语句处理器中访问原始的DOM事件。可以用特殊变量$event把它传入方法：

    <button v-on:click="warn('Form cannot be submitted yet.', $event)">  Submitbutton><script>new Vue({  el: '#app',  methods: {    warn: function (message, event) {      // 现在我们可以访问原生事件对象      if (event) {        event.preventDefault()      }      alert(message)    }  }})script>

    总结：事件的基本使用

    • 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名

    • 事件的回调需要配置在methods对象中，最终会在vm上

    • methods中配置的函数，不要用箭头函数！否则this指向的是window对象，就不是vm了

    • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。在编写事件代理的时候，用e.currentTarget引用绑定事件代理的元素，e.target引用事件目标元素。

    • @click="demo"或@click="demo($event)"效果一致，但后者可以传参

    • 【vue框架升级了写法：】

      1. <body>
      2. <div>
      3. <p>第一种p>
      4. div>
      5. body>
      6.  
      7.  
      8. <div>
      9. <p>第二种p>
      10. div>
      11.  
      12.  
      13. <view>
      14. <p>第三种p>
      15. view>

    <body>    <div id="app">      <button v-on:click="showInfo">点击显示详细信息(不传参)button>      <button @click="showInfo1(1,$event)">点击可传入参数button>    div>    <script>      Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。      new Vue({        el: "#app",        data: {          name: "zhangsan",        },        methods: {          showInfo(e) {            console.log(this.name, e.target.innerText);          },          showInfo1(number, e) {            console.log(number, e.target.innerText);          },        },      });script>body>

    二、事件修饰符

    在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

    为了解决这个问题，Vue.js为v-on提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

    .stop

    阻止单击事件冒泡（常用）​​​​​​​

    <a v-on:click.stop="doThis">a>

    .prevent

    阻止事件默认行为（常用）

    <form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>

    .once

    事件只触发一次（常用）

    <a v-on:click.once="doThis">a>

    注：不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上

    .capture

    使用事件的捕获模式

    <div v-on:click.capture="doThis">  1  <p v-on:click="showInfo">2p>div>

    .self

    只有event.target是当前操作的元素时才能触发事件​​​​​​​

    "doThis" id="app">    1    <p v-on:click="showInfo">2p>  div>  <script>    const vm = new Vue({      el: "#app",      methods: {        doThis() {          console.log(1);        },        showInfo() {          console.log(2);        },      },    });script>

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

    .passive

    解决vue 界面在苹果手机上滑动点击事件等卡顿问题
    pdf 0星 超过10%的资源 49KB
    下载

    事件的默认行为立即执行，移动端项目常用​​​​​​​

    <div v-on:scroll.passive="onScroll">...div>

    三、按键修饰符

    在监听键盘事件时，Vue允许为v-on添加按键修饰符

    1、vue中常用的按键别名如下：

    .enter

    "回车"键​​​​​​​

    <input v-on:keyup.enter="showInfo">

    .delete

    "删除"和"退格"键

    <input v-on:keyup.delete="showInfo">

    .esc

    "退出"键

    <input v-on:keyup.esc="showInfo">

    .space

    "空格"键

    <input v-on:keyup.space="showInfo">

    .tab

    vue click.stop阻止点击事件继续传播的方法
    pdf 0星 超过10%的资源 26KB
    下载

    （特殊）会把按键从当前位置切走，必须配合keydown去使用

    <input v-on:keydown.tab="showInfo">

    .up

    "上"键

    <input v-on:keyup.up="showInfo">

    .down

    "下"键

    <input v-on:keyup.down="showInfo">

    .left

    "左"键

    <input v-on:keyup.left="showInfo">

    .right

    "右"键‍

    <input v-on:keyup.right="showInfo">

    2、Vue未提供别名的按键，可以使用按键原始的key值绑定，但注意要转为kebab-case（短横线命名）比如：大写锁定键（CapsLock）

    on:keyup.caps-lock="showInfo">

    3、系统修饰符（用法特殊）：ctrl、alt、shift、meta

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发（比如ctrl，按下ctrl再按y，释放y后才会触发事件）

      <input v-on:keyup.ctrl="showInfo"><input v-on:keyup.ctrl.y="showInfo">
    • ​​​​​​​

    • 配合keydown使用：正常触发事件。

    4、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）​​​​​​​

    Vue.config.keyCodes.huiche = 13;<input v-on:keyup.huiche="showInfo">
  • 相关阅读:
    黑马点评关键业务流程梳理
    防水运动蓝牙耳机，分体式蓝牙耳机品牌推荐
    SPFA算法（判断负权回路，求最短路径）（851，852）
    ConstantPool::allocate记录
    腾讯汤道生：大模型只是起点，产业落地是AI更大的应用场景
    #与##的用法
    Dynamic Head: Unifying Object Detection Heads with Attentions
    【无标题】
    Java语法之封装
    反序列化中_wakeup的绕过
  • 原文地址：https://blog.csdn.net/RzhenDwo/article/details/126126487