javascript - Difference between v-on:click="..." and using onclick="..." in Vue.js
问题描述
What is the difference between v-on:click="..."
and using onclick="..."
in Vue.js?
I understand that with the v-on:click you need to write the handler inside of the Vue object (like the example in the docs), but what is the advantage? It seems simple enough to just write an onclick="..."
to call function (outside of the Vue object).
解决方案
One of the chief differences is scope access. onclick
's bound scope is global so the functions that you want it to call have to be accessible from the global scope. v-on
's scope is the Vue model.
Another thing is that Vue provides a very easy API to define custom events through vm.$emit()
. It's also very easy to listen for those events using v-on:customevent="callback"
which can be easily cognitively mapped to a hypothetical onfizz="callback()"
.
With that in mind, it makes sense to also provide v-on:click
for a consistent API as well as the other extensions v-on
provides.
/*
* This pollutes scope. You would have to start
* making very verbose function names or namespace your
* callbacks so as not collide with other handlers that
* you need throughout your application.
*/
function onClickGlobal() {
console.log("global");
}
const fizzbuzz = {
template: "<button @click='onClick'>FizzBuzz</button>",
methods: {
onClick() {
this.$emit("fizz");
}
}
};
const app = new Vue({
el: "#app",
components: {
fizzbuzz
},
methods: {
onClickModel() {
console.log("model");
},
onFizz() {
console.log("heard fizz");
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<section>
<h2>Buttons and Clicks</h2>
<!-- Calling function of the bound scope -->
<button @click="onClickModel">v-on Model</button>
<!-- Works as well, but calls the global -->
<button @click="onClickGlobal">v-on Global</button>
<!-- You need to explicitly invoke the function from onclick -->
<!-- This won't work because onClickModel isn't global -->
<button onclick="onClickModel()">onclick Model</button>
<!-- Works because onClickGlobal is global -->
<button onclick="onClickGlobal()">onclick Global</button>
<!-- You can technically call onClickModel through the global app -->
<!-- but you really shouldn't -->
<!-- Works because app.onClickModel is technically global -->
<button onclick="app.onClickModel()">onclick Global through app.onClickModel</button>
</section>
<section>
<h2>Custom Events</h2>
<fizzbuzz @fizz="onFizz"></fizzbuzz>
<!-- The element below doesn't work -->
<button onfizz="onClickGlobal">Hypothetical Fizz</button>
</section>
</div>
推荐阅读
- html - 函数未定义,Ionic(最新版本)
- python - 给定 N,返回满足等式的 M:N + M = 2 * (N XOR M)
- python - Bot 在命令后等待消息,Telepot
- android - 为什么在更新 kotlin 项目后显示“任务 ':app:kaptDebugKotlin' 执行失败”?
- ios - 不需要的通信扩展不发送网络请求
- angular - 自定义 rxjs 运算符(缓冲区)阻止 Angular 应用程序稳定
- api - 您是否需要访问令牌和使用者密钥来搜索 Twitter?
- jupyter-notebook - 无法 nbconvert 或将 jupyter notebook 保存为 flex 仪表板 html
- rust - 您如何在外壳中调用异步方法,例如 Rust 中的 map?
- bash - Windows 10 上 git-bash shell“MINGW64”的 CLI 中的“bash:export:...不是有效标识符”