请问 vue3 的 onclick 和 @click 有什么区别

1

我的 AI 解释得很清楚,可惜没法贴给你.

简单来说,前者是原生 html 的事件,后者是 vue 的事件.和响应式是两码事,都能触发.

一般是推荐用后者,走 vue 指令系统,可以多一些功能.

2

:onClick 吧? vue 支持将事件已 props 的形式传递(声明也是),onXxx = @xxx

3

在 jsx 或 tsx 里只有 onClick 可以用,@click 是 onClick 的简写,vue 的 template 里一般用简写,响应式只跟定义的响应式变量有关,跟函数如何绑定无关,任意函数都可以触发响应式

4

@click 会多一些修饰符的用法,例如一次触发,禁用默认事件等等

5

你不用 vue 且纯 html 也不加载 javascript 的情况下也能用 onclick ,但是 @click 只能 vue 下,懂了吧

6

没啥区别啊,@click 只是一个语法糖就是简化的 onClick 写法而已

7

对于 html 元素来说如下所述:

onclick => divElement.onclick
@click => dicElement.addEventListener('click', ....)

check this palyground: https://play.vuejs.org/#eNqNks1OAjEUhV/l2g2Q4BCiKzIQlZCoCzVK4qYbUu78QKdt+jOSTObdvZ0RZGGIu+k9XzvnnLZh98YkdUA2Y6kTtjQeHPpgFlyVldHWQwMWM2ghs7qCAaEDrrgSWjkPlcthHvXh4BGl1PCprdxeDUYRyYISvtQKio3aSlzKUuyHWI+g4QogHqAlJlLnNExEsBaVX29sjj7RSkSajmm5Sie9MbJEC4+VkRuPtAJIiynMfuA5Z2c/4mzRNJ2/tk0nxfSE3/0bLpUJHurrSm9R0gbSOYMJienkzAUbM+8oTVbmyc5pRU12ATkTujKlRPtqYg2Os1kfPWobauvruZt5G3B8nIsCxf6P+c4d4oyzN4sObY2cnTTfldbLq48XPND3SST3QRJ9QXxHuokQPfbYQ4jN2DOuc/vUvYdS5Wu3OnhU7hgqGo1k2/Gc0RtZXoj+a/cmue320TWz9hs3RtqA

8

楼上叽里咕噜说啥呢,怎么扯到 jsx 上了

:onclick 就是原生 html 的 onclick="" 的绑定方式 --> 所有原生属性都可以通过 :xxxx 来绑定
@click 是 vue 的 :onclick 的语法糖,同时支持多个修饰符,可以快速实现一些功能,如 @click.prevent

9

您可以在 play.vuejs.org 页面右边的 JS 标签下看到两种写法被编译后的结果。

@click: https://play.vuejs.org/#eNp9kE1LAzEQhv9KmJNC2SJ6KtviBz3oQUU9zmVJx23abBKSSV1Y9r+bpPTjUHoL7/NMeGcGeHKu2kWCGdRMndMN0wKNEPX6TjxKreR2jnBzO18MI4KYJlZPz0SYAAdpza9qq02wJv0z5HEEaTunNPkPx8qagDAThWTWaG3/3krGPtLkkMs1ye2FfBP6nCF8egrkd4RwZNz4lniPl9/v1Kf3EXZ2FXWyr8AvClbH3HGvPUezSrXPvNL2tXPWszLtT1j2TCYclspFszkWHyEd8+XK6qe699VDmUMzwvgP1lV+lw==

onClick: https://play.vuejs.org/#eNp9kD1rwzAQhv+KuKmF4AztZJxAGzK0Q1vajlqMfHGUyJKQTo7B+L9HUsjHELKJ93l0vHcjvFlb9AGhhIqws6omXHLNWNXInpVGr5QU+wWHp+fFcpw4sHnE1fzGhRmQF0ZvZFvsvNFx1JgmcBCms1Kh+7YkjfYcSpZJYrVS5vCZM3IBZ+dcbFHs7+Q7P6SMw49Dj65HDhdGtWuRTnj994VDfF9gZ5qgov0A/qI3KqSOJ+096CbWvvFy24/OGkdSt/9+PRBqf14qFU3mlH0O8Z6rB6tf674Ur/kf1xNMR+tpf/g=

答案是没有区别。

10

@hengshenyu 这个是在 vue 的文档的哪里啊,我好像没在文档看到这个,我能看到的就是 @click 是 v-on:click 的语法糖 https://cn.vuejs.org/guide/essentials/event-handling.html#listening-to-events

11

好难猜啊,为什么这些可以用 `v-bind` 绑定的事件都叫 [事件处理器属性]( https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes#事件处理器属性) 呢。

- [#其他事件监听器机制 | 事件介绍 - 学习 Web 开发 | MDN]( https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Scripting/Events#其他事件监听器机制)

12

@zhengfan2016 渲染函数 & jsx 章节
v-on 的说明

以 on 开头,并跟着大写字母的 props 会被当作事件监听器。比如,onClick 与模板中的 @click 等价

13

vue 上应该是一致的,solidjs 中这两个写法一个是原生事件,一个是合成事件

14

还是 微优易 黑魔法多啊🤔

15

其实楼上有几位的回答,基本都对上了,总结一下就是:

@click 是 Vue 封装的指令,是特有的语法糖。

- 在 .vue 文件的 <template> 里面直接使用;
- @click 也可以写作 "v-on:click";
- @click 内部还封装了修饰符,e.g. '@click.stop' / '@click.once' 等等;

onclick 属于 HTML 规范,跟 Vue 没关系。即便没有 Vue ,onclick 也可以工作。

多说一句,onclick 不是 onClick 。

如果想在 Vue 里面使用 onClick ,一般是指使用 jsx 编写代码,文件后缀通常为 jsx/tsx 。

当然,.vue 文件也可以写 jsx ,需要声明 `<script lang="jsx">` 或者 `<script lang="tsx">`。

PS:JSX (JavaScript XML) 是 JavaScript 的一种语法扩展,它允许你在 JS 代码中写出类似 HTML/XML 的结构化标记。

16

没区别,@click 就是 onclick 的语法糖

17

一个是原生的,一个是 vue 封装的

估计好多人都没写过原生 html css js 吧。

18

我有个不相关的问题,这位老哥会被疯狂 @吗?
https://www.v2ex.com/member/click

19

@Ketteiron 看上面都没啥,看到这里绷不住了😂

20

@Ketteiron #18 他很久没上线了 hhhh

21

@zhengfan2016 没看到相关文档,这应该不是推荐用法,但是 UI 库里常见。

https://cn.vuejs.org/guide/components/attrs.html 这里隐式提了一下 @click 这样的一个 v-on 事件监听器将在此对象下被暴露为一个函数 $attrs.onClick ,我想 props emits 也是类似。

22

### 最佳实践建议
在 Vue 开发中, 永远不要使用 onclick ,原因如下:

1. 代码风格一致性 :保持所有事件绑定都走 Vue 的系统。
2. 安全性 :onclick 中的字符串代码容易引起 CSP (内容安全策略) 问题,也更容易导致 XSS 风险(如果你动态拼接字符串的话)。
3. 可维护性 : @click 能够清晰地指向组件内部逻辑,利于代码阅读和重构。
唯一可能用到 onclick 的场景 :
如果你正在集成某些非常古老的第三方库,或者需要在 Vue 挂载之前的极短时间内(例如 index.html 的 loading 状态)响应点击,才可能会用到原生 onclick 。但在 Vue 组件内部,请坚持使用 @click 。

23

回答都是啥玩意
@click 就是 onclick 的语法糖
@click.native 才是 dom 元素上的原生 click 事件

24

@lizy0329 vue3 好像没有 native 吧

https://cn.vuejs.org/api/built-in-directives.html#v-on