Einige Event-Beispiel-Tutorials von vue-js-Tutorial-php.cn

Einige Event-Beispiel-Tutorials von vue

零下一度

Freigeben： 2017-06-27 10:27:18

Original

1314 Leute haben es durchsucht

Vue-Ereignisse:

Vue-Ereignisabkürzung:

Das Ereignis in Vue ist v-on:click='show()' Aber ich hasse es, dass es zu lang ist und ich jedes Mal v-on: event

eingeben muss. Es gibt eine Ereignisabkürzung in vue @click='show()' Wäre das nicht besser?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
　　　　　<div id="box">
　　         <button v-on:click=&#39;show()&#39;>按钮1</button>

Nach dem Login kopieren

　　　　　　　　<button @click=&#39;show()&#39;>按钮2</button>     //这俩种方法都可以执行点击的事件，当然所有事件都可以这样简写。

Nach dem Login kopieren

　　　　  </div>
　　　　
        <script src=&#39;vue.js&#39;></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:&#39;#box&#39;,
　　　　　　　　　　data:{},
　　　　　　　　　　methods:{
　　　　　　　　　　　　　show:function(){
　　　　　　　　　　　　　　　　　alert(1)　
　　　　　　　　　　　　  }
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　});
　　　　　　
　　　　　</script>
    </body>
</html>

Nach dem Login kopieren

　vue-Ereignisobjekt:

　　Natürlich gibt es Ereignisobjekte in Vue, also übergibt @click='show($event)' $evevt in der Zeitfunktion und erhält in der Funktion das Ereignis Objekt wird da sein.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
　　　　　<div id="box">
　　         <button @click=&#39;show($event)&#39;>按钮1</button>//传输事件对象
　　　　  </div>
　　　　
        <script src=&#39;vue.js&#39;></script>
　　　　　<script>
　　　　　　　new Vue({
　　　　　　　　　　el:&#39;#box&#39;,
　　　　　　　　　　data:{},
　　　　　　　　　　methods:{
　　　　　　　　　　　　　show:function(ev){   //接收事件对象
　　　　　　　　　　　　　　　　　alert(ev.clientX)； //这个相信都知道
　　　　　　　　　　　　  }
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　});
　　　　　　
　　　　　</script>
    </body>
</html>

Nach dem Login kopieren

vue Event Bubbling: (Jeder weiß, dass Event-Bubbling angeboren ist und es in solchen Fällen natürlich nicht nötig ist, es zu verhindern.)

Methode 1: @click='show($event)' Nachdem wir das Ereignisobjekt haben, können wir das native ev.cancelBubble=true in unserer Funktion verwenden;

Methode 2: @click.stop='show()' Fügen Sie einfach .stop nach dem Ereignis hinzu, um zu verhindern, dass das Ereignis sprudelt

　Vues blockierendes Standardereignis: (es gibt einige Ereignisse oder unnötige Methoden in den Elementen)

　　🎜>Methode eins: @click='show ($event)' Können wir, nachdem wir das Ereignisobjekt haben, das native ev.preventDefault();

in unserer Funktion verwenden? Methode zwei: @click .prevent='show()' Fügen Sie einfach .prevent hinzu nach dem Ereignis, um das Standardereignis zu verhindern.

Vues Tastaturereignis:

@keydown='show()' Natürlich können wir $event oder get ev in der Funktion übergeben. keyCode

Worüber ich sprechen möchte, sind die häufig verwendeten Tasten in Tastaturereignissen

show()' Up-Taste wird ausgeführt

　 @keydown.down='show(). ' Abwärtstaste führt

　 @keydown.left='show()' aus. Linksklick führt

　　　@keydown.right='show()' aus. Rechtsklick zum Ausführen von

　　　Und ........................

Das obige ist der detaillierte Inhalt vonEinige Event-Beispiel-Tutorials von vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!