🌟 Vue开发者必看！ 🌟
想要为你的Vue应用添加交互性？那就要了解 Vue 的神奇技能之一：v-on指令！🚀
🎯 v-on指令：在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行相应的JavaScript代码。从点击事件到键盘输入，你可以使用v-on来响应各种用户行为。简单来说，就是为html标签绑定事件。
👉 简单易用：只需在DOM元素上添加v-on指令，并指定要监听的事件和要执行的方法，就能快速实现交互功能。
- v-on:事件名="函数名"
- 简写为 @事件名="函数名"
🔥 灵活多样：v-on不仅支持原生DOM事件，还可以自定义事件，甚至可以直接绑定自定义方法。
🚦 丰富参数：除了监听事件，v-on还可以传递参数、修饰符等，帮助你更精细地控制事件处理逻辑。
💡 实例展示：想要了解更多？在你的Vue项目中尝试使用v-on，探索其强大功能吧！
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="money">点我有惊喜</button>
<button @click="love">再点更惊喜</button>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
//定义数据
}
},
methods: {
money: function(){
alert('100元')
},
love: function(){
alert('love')
}
}
}).mount("#app");//控制html元素
</script>
</body>
</html>
