Heim > Artikel > Web-Frontend > So implementieren Sie Click in Vue

So implementieren Sie Click in Vue

coldplay.xixiOriginal: 2020-11-24 15:59:404900Durchsuche

So implementieren Sie Click in Vue: Erstellen Sie zuerst eine neue HTML-Codepage, erstellen Sie dann ein [
]-Tag und fügen Sie schließlich eine Click-Event-Funktion zur Click-Schaltfläche hinzu Speichern Sie den HTML-Code.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6. Diese Methode ist für alle Computermarken geeignet.

So implementieren Sie Click in Vue:

1. Erstellen Sie eine neue HTML-Codeseite, erstellen Sie dann ein <div>-Tag auf dieser Codeseite und erstellen Sie gleichzeitig dieses &lt ;div> Fügen Sie dem Tag eine ID als App hinzu und erstellen Sie dann eine Klickschaltfläche in diesem <div> <code><div>标签，同时个这个<div>标签添加一个id为app，然后在这个<div>标签里创建一个点击按钮。<pre class="brush:php;toolbar:false"><div id="app"> <input type="button" value="点击我" /> </div></pre><p>2、引入vue.js文件，创建一个<code><script></script>标签，在这个标签里面使用 new Vue({})进行vue的实例化。
<script type="text/javascript" src="js/vue.js" ></script>
<script>
    var app = new Vue({
    el:"#app"
})
</script>
3、创建点击事件函数。在vue官网给定的methods里面创建vue点击事件触发的方法（案例中创建点击事件触发时弹出一个alert弹出）。
methods:{
    test:function(){ //vue的点击触发事件
        alert("完成vue的点击事件")
    }
}
4、给点击按钮添加vue的点击事件。在点击按钮标签里面添加上@click="test"
<div id="app">
    <input type="button" value="点击我" @click="test"/>
</div>
2. Führen Sie die Datei vue.js ein, erstellen Sie ein <script></script>-Tag und verwenden Sie new Vue({}) in diesem Tag, um vue zu instanziieren.
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="UTF-8">
        <title>vue点击事件</title>
    </head>
    
    <body>
        <div id="app">
            <input type="button" value="点击我" @click="test" />
        </div>
        <script type="text/javascript" src="js/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                methods: {
                    test: function() { //vue的点击触发事件
                        alert("完成vue的点击事件")
                    }
                }
            })
        </script>
    </body>
</html>
3. Erstellen Sie eine Klick-Ereignisfunktion. Erstellen Sie eine Methode zum Auslösen des Vue-Klickereignisses in den auf der offiziellen Vue-Website angegebenen Methoden (in diesem Fall wird ein Warn-Popup angezeigt, wenn das Klickereignis ausgelöst wird).
rrreee4. Vue-Klick-Ereignis zur Klick-Schaltfläche hinzufügen. Fügen Sie einfach @click="test" in die Beschriftung der Klickschaltfläche ein.
rrreee
5. Speichern Sie den HTML-Code, öffnen Sie ihn dann mit einem Browser und klicken Sie auf die Schaltfläche „Ereignis“ auf der Browserseite. Zu diesem Zeitpunkt wird im Browser ein Popup-Fenster angezeigt, das darauf hinweist, dass der vue Das Click-Ereignis wurde erfolgreich ausgeführt.

Alle Codes:
rrreee
🎜Zugehörige kostenlose Lernempfehlungen: 🎜JavaScript🎜 (Video) 🎜🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Click in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

So implementieren Sie Click in Vue

In Verbindung stehende Artikel