Vue3 事件处理

最新推荐文章于 2024-06-01 15:48:20 发布

star walkin

最新推荐文章于 2024-06-01 15:48:20 发布

阅读量1.6k

点赞数 1

分类专栏： Vue3

原文链接：https://www.runoob.com/vue3/vue3-events.html

版权

Vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。

v-on 指令可以缩写为 @ 符号。

语法格式：

v-on:click="methodName"
或
@click="methodName"

实例：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <button @click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
const app = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">点我</button>
</div>

<script>
const app = {
  data() {
    return {
      name: 'Runoob'
    }
  },
  methods: {
    greet(event) {
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</div>

<script>
const app = {
  data() {
   
  },
  methods: {
    say(message) {
      alert(message)
    }
  }
}

Vue.createApp(app).mount('#app')
</script>
</body>

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
  <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  <button @click="one($event), two($event)">
  点我
  </button>
</div>
 
<script>
const app = {
  data() {
  },
  methods: {
    one(event) {
      alert("第一个事件处理器逻辑...")
    },
    two(event) {
      alert("第二个事件处理器逻辑...")
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>
</body>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按键修饰符

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right

系统修饰键：

.ctrl
.alt
.shift
.meta

鼠标按钮修饰符:

.left
.right
.middle

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown...

以下click为例

注意：所有的v-on都可以简写为@，比如说v-on:click可以简写为@click

监听事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常来讲就是监听dom触发一些操作，这些操作（比如点击）触发后执行的动作（js）可有直接写在后面

v-on:click="item+=1"

实例：

<template>
  <div >
   <input type="button" value="clickme" v-on:click="item+=1"/>
    <div>{{item}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    item:1
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

运行结果如下所示：
在这里插入图片描述
可以看见每点击一次绑定的值就增加1.也就是说可以吧js的操作放在事件触发的后面。但是有时候逻辑太复杂的时候写在里面就会造成混乱，视图和逻辑混淆。所以click后面可以接一个方法，把所有处理逻辑的方法封装在一个函数里面click的时候调用

事件处理方法

v-on:click="greet"

实例：

<template>
  <div >
   <input type="button" value="clickme" v-on:click="greet"/>
    <div>{{res}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name : 1,
      res:""
    }
  },
  methods:{
    greet: function () {
      // `this` 在方法里指向当前 Vue 实例
      this.res='Hello ' + this.name + '!';
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

运行结果：
在这里插入图片描述
可以看见点击之后执行了greet方法里面js逻辑

带参数的时间绑定方法

同上，唯一区别是携带了参数

 v-on:click="greet(name)"

<template>
  <div >
   <input type="button" value="clickme" v-on:click="greet(name)"/>
    <div>{{res}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name : 1,
      res:""
    }
  },
  methods:{
    greet: function (reccept) {
      // `this` 在方法里指向当前 Vue 实例
      this.res='Hello ' + reccept+1 + '!';
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

效果一致。对方法的调用同样可以一个方法多处多次的调用

内联处理器中的方法

也就是说在方法里面调用其他的方法,这里的其他方法可以是js原生的方法比如阻止冒泡呀等等，也可以是自定义的方法

v-on:click="greet(name,$event)"

<template>
  <div >
   <input type="button" value="clickme" v-on:click="greet(name,$event)"/>
    <div>{{res}}</div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      name : 1,
      res:""
    }
  },
  methods:{
    greet: function (reccept,event) {
      if (reccept===1) this.say()
    },
    say:function () {
      this.res="我调用了"
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

在这里插入图片描述

事件对象

$event 拿到当前点击事件的事件对象，比如click就是拿到当前点击事件的对象信息

v-on:click="greet($event)"

实例：

<template>
  <div >
   <input type="button" value="clickme" v-on:click="greet($event)"/>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    greet: function (ev) {
    alert(ev.clientX)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

运行效果：
在这里插入图片描述
事件冒泡

当不阻止事件冒泡的时候会弹两次

实例：

<template>
  <div >
    <div @click="show1($event)">
      <div @click="show2($event)">点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show1: function (ev) {
     alert(1)
    },
    show2: function (ev1) {
      alert(2)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

但阻止冒泡后就只会弹一次

eg:原生js阻止冒泡

 ev1.cancelBubble=true

实例：

<template>
  <div >
    <div @click="show1($event)">
      <div @click="show2($event)">点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show1: function (ev) {
     alert(1)
    },
    show2: function (ev1) {
        ev1.cancelBubble=true
      alert(2)
 
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

那么vue自己封装的阻止冒泡方法呢？

@click.stop="show2()"

实例：

<template>
  <div >
    <div @click="show1()">
      <div @click.stop="show2()">点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show1: function () {
     alert(1)
    },
    show2: function (ev1) {
      alert(2)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

阻止默认行为

比如：按下右键之后会将默认的菜单带出来

<template>
  <div >
    <div>
      <div @contextmenu="show2()">右键点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show2: function (ev1) {
      alert(2)
 
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

运行效果如下：
在这里插入图片描述
那么就有了阻止默认行为

 ev1.preventDefault();

实例：

<template>
  <div >
    <div>
      <div @contextmenu="show2($event)">右键点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show2: function (ev1) {
      alert(2);
      ev1.preventDefault();
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

点击后默认菜单将不会显示（在360浏览器右键无效）

vue里面的封装的阻止默认行为的方法：

@contextmenu.prevent="show2()"

实例：

<template>
  <div >
    <div>
      <div @contextmenu.prevent="show2()">右键点击我呀</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide : true
    }
  },
  methods:{
    show2: function (ev1) {
      alert(2);
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

star walkin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Vue3 事件处理

我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。语法格式：v-on:click="methodName"或@click="methodName"实例：<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue@next"></script></head>&lt
复制链接

扫一扫

专栏目录