备案控制台
开发者社区 开发与运维 文章 正文

Vue3-v-bind事件绑定

2023-09-27 140
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue3-v-bind事件绑定

事件绑定


学习：v-on以及简写形式，methods应用

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="methodName" 或 @click="handler"。

事件处理器的值可以是：

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

·内联事件处理器·通常用于简单场景，例如：

<button @click="count++">加 1</button>
<p>Count is: {{ count }}</p>


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


方法事件处理器

<button @click="greet">问候</button>
 data () {
   return {
      name: 'Vue.js'
   }
 },
 methods: {
   greet(event) {
     // 方法中的 `this` 指向当前活跃的组件实例
     alert(`Hello ${this.name}!`)
     // `event` 是 DOM 原生事件
     if (event) {
       alert(event.target.tagName)
     }
  }
}


除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('hello')">说 hello</button>
<button @click="say('bye')">说 bye</button>

内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

 <!-- 使用特殊的 $event 变量 -->
 <button @click="warn('表单不能提交.', $event)">提交</button>
 <!-- 使用内联箭头函数 -->
 <button @click="(event) => warn('表单不能提交.', event)">提交</button>



methods: {
  warn(message, event) {
    // 这里可以访问 DOM 原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>



 <!-- 事件修饰符 -->
 <!-- 阻止冒泡-原生 -->
 <div class="parent" @click="clickParent1">
 <div class="child" @click="clickChild1"></div>
 </div>
 <!-- 阻止冒泡-事件修饰符 -->
 <div class="parent" @click="clickParent2">
 <div class="child" @click.stop="clickChild2"></div>
 </div>

methods: {
  clickParent1 (event) {
    console.log('parent1')
    },
    clickChild1 (event) {
    event.stopPropagation()
    console.log('child1')
    },
    clickParent2 (event) {
    console.log('parent2')
    },
    clickChild2 (event) {
    console.log('child2')
    },
}



.parent {
    width: 200px;
    height: 200px;
    background: #f66;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。


为解决这一问题，Vue 为 v-on 提供了事件修饰符。

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>
<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>
<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>
<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>
<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>



 <!-- 事件修饰符 -->
 <!-- 阻止冒泡-原生 -->
 <div class="parent" @click="clickParent1">
 <div class="child" @click="clickChild1"></div>
 </div>
 <!-- 阻止冒泡-事件修饰符 -->
 <div class="parent" @click="clickParent2">
 <div class="child" @click.stop="clickChild2"></div>
 </div>

methods: {
  clickParent1 (event) {
    console.log('parent1')
    },
    clickChild1 (event) {
    event.stopPropagation()
    console.log('child1')
    },
    clickParent2 (event) {
    console.log('parent2')
    },
    clickChild2 (event) {
    console.log('child2')
    },
}



.parent {
    width: 200px;
    height: 200px;
    background: #f66;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.child {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}


在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

 <!-- 按键修饰符 -->
 <!-- 原生 -->
 <input type="text" @keyup="print1">
 <!-- vue -->
 <input type="text" @keyup.enter="print2">



methods: {
  print1 (event) {
        if (event.keyCode === 13) {
          console.log('打印1')
        }
    },
    print2 () {
      console.log('打印2')
    }
}

.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发

.ctrl
.alt
.shift
.meta

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>


完整案例: 02_tempalte/04_event.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件绑定</title>
  <style>
    .container {
      width: 200px;
      height: 200px;
      background-color: #f66;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 内联事件处理器: 使用表达式，不要使用js中的方法 类似于alert以及console，可以在方法事件处理器中使用 -->
    <button @click="count+=2">加2</button>
    <button @click="count++">加1</button>
    <!-- alert is not a function -->
    <button @click="alert(1)">弹出提示</button>
    <!-- Cannot read properties of undefined  -->
    <button @click="console.log(1)">打印提示</button>
    {{ count }}
    <!-- 方法事件处理器 -->
    <div>
      <button @click="add">加10</button>
      <button @click="addFn(5, $event)">加参数</button>
       {{ num }}
    </div>
    <!-- 事件修饰符 -->
    <div class="container" @click="print('container')">
      <div class="box" @click="print('box', $event)"></div>
    </div>
    <div class="container" @click="printFn('container')">
      <div class="box" @click.stop="printFn('box')"></div>
    </div>
    <div class="container" @click.self="printFn('container')">
      <div class="box" @click="printFn('box')"></div>
    </div>
    <!-- .stop  .prvent .self -->
    <!-- 按键修饰符 - 输入表单 -->
    <input type="text" @keyup="output">
    <input type="text" @keyup.enter="outputFn">
    <!-- vue2可以使用keyCode值作为修饰符 -->
    <input type="text" @keyup.13="outputFn">
    <!-- 系统修饰按键 -->
    <div>
      <input type="text" @keyup.alt.enter="systemOutput">
    </div>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  Vue.createApp({
    data () {
      return {
        count: 10,
        num: 100
      }
    },
    methods: {
      add (event) {
        console.log(event)
        this.num += 10
      },
      addFn (params, event) {
        console.log(event)
        this.num += params
      },
      print (params, event) {
        if (event) {
          event.stopPropagation()
        }
        console.log(params)
      },
      printFn (params) {
        console.log(params)
      },
      output (event) {
        if (event.keyCode === 13) {
          console.log('11111')
        }
      },
      outputFn () {
        console.log('11111')
      },
      systemOutput () {
        console.log('2222')
      }
    }
  }).mount('#app')
</script>
</html>


文章标签：
JavaScript
前端开发
关键词：
VUE.js事件绑定
Geman_Liu
目录
相关文章
尘觉
|
5月前
|
JavaScript 前端开发 程序员
vue的事件绑定和修饰符
vue的事件绑定和修饰符
尘觉
49 0
MrRobot
|
2月前
|
JavaScript 前端开发
vue事件绑定
vue事件绑定
MrRobot
29 1
萤火虫的小尾巴
|
9月前
|
JavaScript 程序员
Vue----事件绑定指令
Vue----事件绑定指令
萤火虫的小尾巴
63 0
wljslmz
|
5月前
|
前端开发 JavaScript UED
Vue3中的事件处理：事件绑定、事件修饰符、自定义事件
Vue3中的事件处理：事件绑定、事件修饰符、自定义事件
wljslmz
122 0
阿甘兄
|
6月前
|
JavaScript 前端开发
Vue系列教程（09）- 事件绑定（v-on:*）
Vue系列教程（09）- 事件绑定（v-on:*）
阿甘兄
18 0
Vue系列教程（09）- 事件绑定（v-on:*）
年少轻与狂
|
9月前
|
JavaScript 前端开发
vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
年少轻与狂
187 0
丘比特惩罚陆
|
JavaScript 前端开发
【Vue五分钟】 五分钟让你读懂什么是事件绑定
一般在vue项目开发中，事件的处理逻辑一般很复杂，我们可以将处理的逻辑变成函数，在vue开发中，一般使用的是使用的是v-on指令进行事件的监听，事件监听的过程中触发相应的JavaScript代码。
丘比特惩罚陆
113 0
【Vue五分钟】 五分钟让你读懂什么是事件绑定
sexpxwwacjcpq
|
JavaScript
🌵Vue本地应用（内容绑定，事件绑定）
🌵Vue本地应用（内容绑定，事件绑定）
sexpxwwacjcpq
45 9
🌵Vue本地应用（内容绑定，事件绑定）
蜡笔小心_
|
JavaScript
【Vue3从零开始-第二章】2-8 事件绑定详解
【Vue3从零开始-第二章】2-8 事件绑定详解
蜡笔小心_
208 0
【Vue3从零开始-第二章】2-8 事件绑定详解
shelgi
|
缓存 JavaScript 前端开发
Vue第四天---Vue数据及事件绑定
Vue第四天---Vue数据及事件绑定
shelgi
87 0
Vue第四天---Vue数据及事件绑定