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