Vue3中的模板指令——DOM事件监听指令v-on

南腔北调-pilmar

已于 2024-06-09 16:00:26 修改

阅读量1.6k

点赞数 39

分类专栏： # Web前端开发基础文章标签： vue.js javascript 前端

于 2024-06-06 10:28:40 首次发布

本文链接：https://blog.csdn.net/ningbw2000/article/details/139493168

版权

本文详细介绍了Vue3中v-on指令的使用，包括内联和方法事件处理器，事件参数的访问，以及各种事件监听修饰符，如键盘按键、系统组合键和鼠标按键修饰符，帮助开发者更好地理解如何优雅地处理DOM事件。

摘要由CSDN通过智能技术生成

4.6.3 事件监听指令v-on（@）

可以使用 v-on 指令 (简写为 @) 来监听DOM事件，并在事件触发时执行对应的 JavaScript脚本，即handler事件处理函数。

用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
方法事件处理器：一个指向组件实例上定义的方法的属性名或是路径。

4.6.3.1 内联事件处理器示例

    //App.vue
    <script setup>
    import {
      ref } from 'vue'
    
    const counter = ref(0)
    </script>
    
    <template>
        <button @click="counter++">Add 1</button>
        <p>The button above has been clicked {
  { counter }} times.</p>
    </template>

4.6.3.2 方法事件处理器示例

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。 v-on 也可以接受一个方法名或对某个方法的调用。

    //App.vue
    <script setup>
    import {
      ref } from 'vue'
    
    const name = ref('Vue.js')
    //事件响应处理函数
    function greet(event) {
     
      alert(`Hello ${
       name.value}!`)
      // `event` is the native DOM event
      if (event) {