Vue3快速入门——事件绑定v-on
原创
前言
对应Vue，个人觉得强大便捷功事件绑定了，本文将为您介绍如何在Vue3中使用v-on指令实现事件绑定，我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"，原理类似JavaScript 语句的onclick ，详细使用方法可以参考官网。
代码案例
同样的，在代码案例介绍前，先讲一下vue事件绑定的语法结构。
作用:为html标签绑定事件
语法:
v-on:事件名="函数名
简写为 @事件名="函数名
在vue中需要在methods方法定义，绑定的方法
createApp({
data(){需要用到的数据}，
methods:{需要用到的方法}
})接下来，直接上代码演示：
<!-- 步骤1 定义vue关联模块-->
<div id="app">
<button v-on:click="money">点我有惊喜</button>
<button @click="love">再点更惊喜</button>
</div>
<script type="module">
// 步骤2 引入vue模块 在线CDN的引入方式，从vue.esm-browser.js获取到createApp
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// 步骤3 创建Vue实例，挂载到app div上
createApp({
// 步骤4 定义数据这些数据会跟上面绑定的div关联
data() {
return {
// 定义数据
};
},
methods: {
money: function () {
alert('送你钱100');
},
love: function () {
alert('送你爱');
},
},
}).mount('#app')
</script>案例代码使用v-on指令将两个按钮的点击事件绑定到Vue实例的money和love两个方法，通过两种方式进行定义，当用户点击点我有惊喜时，都会触发alert('送你钱100')，点击再点更惊喜，都会触发alert('送你爱')，效果如图所示：
总结
在本文中，我们介绍了如何在Vue3中使用v-on指令实现事件绑定。通过使用v-on指令，您可以轻松地将事件（如点击、鼠标移动等）与Vue实例的方法关联起来，从而实现交互式的用户界面。总之，v-on指令在实际项目中具有很多优势，它可以帮助您更高效地实现用户界面的交互功能，提高代码的可维护性和可读性。相比之下，传统的JavaScript事件绑定需要手动操作DOM元素，容易导致代码冗余和难以维护。因此，在使用Vue.js开发项目时，建议优先使用v-on指令进行事件绑定
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。