Vue 中 onclick和@click區(qū)別解析
更新時(shí)間：2024年02月22日 11:30:50 作者：北風(fēng)toto
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡(jiǎn)單點(diǎn)說(shuō)就是onclick 只能觸發(fā) js的原生方法,不能觸發(fā)vue的封裝方法,@click 只能觸發(fā)vue的封裝方法,不能觸發(fā)js的原生方法,需要的朋友可以參考下
一、直接上結(jié)論
- onclick 只能觸發(fā) js的原生方法，不能觸發(fā)vue的封裝方法
- @click 只能觸發(fā)vue的封裝方法，不能觸發(fā)js的原生方法
二、驗(yàn)證代碼，可直接運(yùn)行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>探索onclick和@click的區(qū)別</title>
</head>
<body>
<!-- 主體區(qū)域 -->
<section id="app">
<button class="clear-completed" onclick="jsMethod()">onclick使用js中的方法</button><br>
<button class="clear-completed" @click="jsMethod()">@click使用js中的方法</button><br>
<button class="clear-completed" onclick="vueMethod()">onclick使用vue中的方法</button><br>
<button class="clear-completed" @click="vueMethod()">@click使用vue中的方法</button>
</section>
<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
vueMethod() {
console.log("您觸發(fā)了vue內(nèi)部方法！")
}
}
})
function jsMethod() {
console.log("您觸發(fā)了js方法！")
}
</script>
</body>
</html>三、點(diǎn)擊結(jié)果
補(bǔ)充：
vue.js @click和v-on:click有什么區(qū)別？
沒(méi)有區(qū)別，@ 只是一個(gè) v-on: 的縮寫(xiě)，為了書(shū)寫(xiě)方便。
Vue.js 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫(xiě)：
v-bind 縮寫(xiě)
<!-- 完整語(yǔ)法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a> <!-- 縮寫(xiě) --> <a :href="url" rel="external nofollow" rel="external nofollow" ></a> v-on 縮寫(xiě) <!-- 完整語(yǔ)法 --> <a v-on:click="doSomething"></a> <!-- 縮寫(xiě) --> <a @click="doSomething"></a>
到此這篇關(guān)于Vue 中 onclick和@click區(qū)別的文章就介紹到這了,更多相關(guān)Vue onclick和@click區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在Vue使用$attrs實(shí)現(xiàn)構(gòu)建高級(jí)組件
本文我們主要來(lái)看下Vue3中的$attrs屬性。首先，我們會(huì)介紹它的用途以及它的實(shí)現(xiàn)與Vue2有哪些不兩同點(diǎn)，并通過(guò)事例來(lái)加深對(duì)它的理解2022-09-09
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
詳解Vue組件實(shí)現(xiàn)tips的總結(jié)
這篇文章主要介紹了詳解Vue組件實(shí)現(xiàn)tips的總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
詳解Vue+ElementUI從零開(kāi)始搭建自己的網(wǎng)站（一、環(huán)境搭建）
這篇文章主要介紹了Vue+ElementUI從零開(kāi)始搭建自己的網(wǎng)站（一、環(huán)境搭建），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue中分割線的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue中ref和reactive的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中ref和reactive的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
下面小編就為大家?guī)?lái)一篇淺談sass在vue注意的地方。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
這篇文章主要介紹了詳解vue-loader在項(xiàng)目中是如何配置的，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06