快捷導(dǎo)航

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)文章

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