Quelques tutoriels d'exemples d'événements de vue-js tutoriel-php.cn

Quelques tutoriels d'exemples d'événements de vue

零下一度

Libérer： 2017-06-27 10:27:18

original

1314 Les gens l'ont consulté

événements vue :

abréviation de l'événement vue :

L'événement dans vue est v-on:click='show()' Mais je déteste que ce soit trop long et je dois v-on: event

à chaque fois. Il y a une abréviation d'événement dans vue @click='show()' Ne serait-ce pas mieux !

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

　objet événement vue :

　　　Bien sûr, il y a des objets événement dans vue, donc @click='show($event)' passe $evevt dans la fonction time et le reçoit dans la fonction, l'événement l'objet sera là.

<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>

Copier après la connexion

vue Événement bouillonnement : (Tout le monde sait que le bouillonnement d'événements est natif, et bien sûr il n'est pas nécessaire de l'empêcher dans de tels cas).

Méthode 1 : @click='show($event)' Après avoir obtenu l'objet événement, pouvons-nous utiliser le natif ev.cancelBubble=true dans notre fonction ;

Méthode 2 : @click.stop='show()' Ajoutez simplement .stop après l'événement pour empêcher l'événement de bouillonner

　Événement bloquant par défaut de Vue : (il y a des événements ou des méthodes inutiles dans les éléments)

　　🎜>Première méthode : @click='show ($event)' Après avoir obtenu l'objet événement, pouvons-nous utiliser le natif ev.preventDefault();

dans notre fonction ? Deuxième méthode : @click .prevent='show()' Ajoutez simplement .prevent après l'événement pour empêcher l'événement par défaut.

Événement clavier de Vue :

.keyCode

Ce dont je veux parler, ce sont les touches couramment utilisées dans les événements clavier .

show()' La touche Haut exécute

　 @keydown.down='show()' La touche Bas exécute

　 @keydown.left='show()' Gauche. cliquez sur exécute

　　　@keydown.right='show()' Faites un clic droit pour exécuter

　　　Et..................... ...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!