Vue 中 onclick和@click區(qū)別解析

更新時間：2024年02月22日 11:30:50 作者：北風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>

到此這篇關于Vue 中 onclick和@click區(qū)別的文章就介紹到這了,更多相關Vue onclick和@click區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: