指令系统之事件指令
事件指令
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
v-on:click 可以缩写成@click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件指令</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> </head> <body> <div id="box"> <button v-on:click="handleClick1">点我1</button> <!-- 下面这个用的多 --> <button @click="handleClick2">点我2</button> <!-- 如果不传参数，是没有区别的 --> <button @click="handleClick3()">点我3-1(带括号)</button> <!-- 如果要传参数 --> <button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button> <!-- 传入事件 --> <button @click="handleClick4($event)">点我4(带事件参数)</button> </div> </body> <script> let vm = new Vue({ el: '#box', data: { }, methods: { handleClick1() { console.log('点我1') }, handleClick2() { console.log('点我2') }, handleClick3(a,b,c) { console.log(a,b,c) }, handleClick4(event) { console.log(event) }, } }) </script> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构