Detaillierte Erklärung der Vue-Ereignisbehandlung und Ereignismodifikatoren

 <div id="Wurzel">
        <h2>Mach weiter, {{name}}! </h2>
        <!-- Standardereignisse verhindern -->
        <a @click.prevent="showInfo" href="https:www.baidu.com">Klicken Sie hier, um umgehend Informationen zu erhalten</a>
        <!-- Verhindern Sie das Aufsteigen von Ereignissen -->
        <div Klasse="demo1" @click="showInfo">
            <button @click.stop="showInfo">Klicken Sie hier, um Informationen zu erhalten</button>
        </div>
        <!-- Ereignis wird nur einmal ausgelöst -->
        <button @click.once="showInfo">Klicken Sie hier, um Informationen zu erhalten</button>
        <!-- Ereigniserfassungsmodus verwenden -->
        <div Klasse="box1" @click.capture="showMsg(1)">
            div1
            <div Klasse="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <!-- Das Ereignis wird nur ausgelöst, wenn event.target das aktuell bearbeitete Element ist -->
        <div Klasse="demo1" @click.self="showInfo">
            <button @click="showInfo">Klicken Sie hier für Informationen</button>
        </div>
    </div>
    <Skript>
        Vue.config.productionTip = falsch;
        neuer Vue({
            el: "#Wurzel",
            Daten() {
                zurückkehren {
                    Name: „Zhang San“
                }
            },
            Methoden: {
                zeigeInfo(e) {
                    // e.preventDefault();
                    alert('Hallo, Herr Wang!')
                },
                Nachricht anzeigen(Nachricht) {
                    Konsole.log(Nachricht);
                }
            }
        });
    </Skript>