Vue 中 onclick和@click區(qū)別解析
更新時(shí)間：2024年02月22日 11:30:50 作者：北風(fēng)toto
這篇文章主要介紹了Vue 中 onclick和@click區(qū)別,簡單點(diǎn)說就是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ū)別？
沒有區(qū)別，@ 只是一個(gè) v-on: 的縮寫，為了書寫方便。
Vue.js 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡寫：
v-bind 縮寫
<!-- 完整語法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a> <!-- 縮寫 --> <a :href="url" rel="external nofollow" rel="external nofollow" ></a> v-on 縮寫 <!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <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)文章
Vue中的基礎(chǔ)過渡動(dòng)畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動(dòng)畫原理解析,需要的朋友可以參考下2018-12-12
在Vue中,實(shí)現(xiàn)圖片或組件的平鋪布局并允許用戶進(jìn)行修改,可以通過數(shù)據(jù)綁定、模板編寫與交互設(shè)計(jì)來實(shí)現(xiàn)圖片平鋪,使用v-for指令和動(dòng)態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶通過點(diǎn)擊觸發(fā)編輯操作,通過外部編輯面板修改屬性后保存更改2024-10-10
Vue3提了一個(gè)Ref?Sugar的RFC，即ref語法糖，目前還處理實(shí)驗(yàn)性的(Experimental)階段，今天通過本文給大家介紹vue3中使用ref語法糖的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-09-09
在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關(guān)于Vue3中防抖/節(jié)流的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴包,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue實(shí)現(xiàn)的父組件向子組件傳值功能示例
這篇文章主要介紹了Vue實(shí)現(xiàn)的父組件向子組件傳值功能,結(jié)合完整實(shí)例形式簡單分析了vue.js組件傳值的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue3+Element?Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由
這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動(dòng)態(tài)添加路由,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關(guān)于Vue關(guān)閉當(dāng)前彈窗頁面的兩種方式,這是最近項(xiàng)目中遇到的一個(gè)需求,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01