Javascript v-on之间的差异：单击="&引用；使用onclick="&引用；在Vue.js中

在Vue.js中使用

onclick=“…”

和使用

onclick=“…”

有什么区别

---

我知道使用v-on:click需要在Vue对象内部编写处理程序（如），但它的优点是什么？只要编写一个

onclick=“…”

调用函数（在Vue对象之外）就足够简单了。

主要区别之一是范围访问

onclick的绑定范围是全局的，因此您希望它调用的函数必须可以从全局范围访问
v-on
的范围是Vue模型

另一件事是Vue提供了一个非常简单的API，可以通过
vm.$emit（）
定义自定义事件。使用
v-on:customevent=“callback”
也很容易监听这些事件，可以很容易地从认知上映射到一个假设的
onfizz=“callback（）”

考虑到这一点，还可以提供
v-on:click
以获得一致的API以及
v-on
提供的其他扩展


/*
*这会污染范围。你得开始了
*使非常详细的函数名或命名空间成为您的
*回调以避免与其他
*您需要在整个应用程序中使用。
*/
函数onClickGlobal（）{
控制台日志（“全局”）；
}
常数fizzbuzz={
模板：“FizzBuzz”，
方法：{
onClick（）{
这个。$emit（“fizz”）；
}
}
};
const app=新的Vue({
el:“应用程序”，
组成部分：{
嘶嘶作响
},
方法：{
onClickModel（）{
控制台日志（“模型”）；
},
onFizz（）{
控制台日志（“听到嘶嘶声”）；
}
}
});

按钮和点击
v-on模型
v-on全球
onclick模型
onclick全球
通过app.onclick模型单击全局
自定义事件
假想泡沫
这一切都与范围有关。回答您的问题“但优势是什么”：

只要你把它放在一个小框架里，对自己没有好处。但是，一旦你想使用它，例如另一个项目，它本身有一些JS组件，你就必须担心与一些现有的全局函数冲突。组件本身包含所有内容时，您不必担心任何事情。
@VicJordan不，这不是同一个问题。@VicJordan除非我弄错了，否则OP会询问
v-on
与本机DOM API的
onclick
之间的区别。您链接的帖子与此无关。@VicJordan我不认为它是重复的，引用的问题解释了Sytratic Shorthand的两个原因：1）一致性-
v-on:
符号不仅可以用于本机DOM事件，还可以用于应用程序定义的vue事件，从而获得一致性。2.
v-on:
处理程序不仅可以在DOM节点上定义，还可以在vue组件上定义。@collapsar我想我已经开始了解它了。你可以处理一些特殊的东西，比如v-on:click.self='…'。而且您的所有功能都必须在Vue类中定义，因此需要组织。虽然你的Vue课程不会变得庞大吗？此外，这一部分帮助我理解了一个不错的答案。有一件事：
实际上不起作用，因为您需要像
onclick=“onClickGlobal（）”
那样显式调用它。Vue将自动调用传递给事件侦听器的函数，但是
onclick
won'tAlso，从技术上讲，您可以使用
onclick
调用
app
Vue实例的方法，就像这样
onclick模型
。除非您有一个非常独特的用例，否则几乎肯定是不好的实践，但是fyi@thanksd你说得对，我更新了示例以反映这一点。