0


vue点击事件

一、Vue中的事件处理

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

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

<div id="app">  <p>{{counter}}</p>  <button v-on:click="counter++">点击+1</button></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 hi</button>  <button v-on:click="say('what')">Say what</button></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)">  Submit</button><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框架升级了写法:】
  • <body><div><p>第一种</p></div></body><div><p>第二种</p></div><view><p>第三种</p></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">2</p></div><!--当我们点击p标签时,会先执行doThis,再执行showInfo-->

.self

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

<!-- 只有 event.target 是当前操作的元素时才会触发函数 --><!-- 当我们点击p标签的时候,不会触发div标签的执行,只有点击div才会触发div的执行 --><div v-on:click.self="doThis" id="app">    1    <p v-on:click="showInfo">2</p>  </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

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成  --><div v-on:scroll.passive="onScroll">...</div>

三、按键修饰符

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

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

.enter

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.showInfo()` --><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

(特殊)会把按键从当前位置切走,必须配合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)

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

3、系统修饰符(用法特殊):ctrl、alt、shift、meta

  • 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被触发(比如ctrl,按下ctrl再按y,释放y后才会触发事件)<!-- 此方法按下ctrl再按(x,y,q等)其他键,释放其他键后才会触发事件 --><input v-on:keyup.ctrl="showInfo"><!-- 此方法按下ctrl再按y键,释放y键后才会触发事件 --><input v-on:keyup.ctrl.y="showInfo">
  • ​​​​​​​
  • 配合keydown使用:正常触发事件。

4、Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名(不推荐)​​​​​​​

Vue.config.keyCodes.huiche = 13;<input v-on:keyup.huiche="showInfo">

本文转载自: https://blog.csdn.net/RzhenDwo/article/details/126126487
版权归原作者 csde.L 所有, 如有侵权,请联系我们删除。

“vue点击事件”的评论:

还没有评论