Maison >interface Web >js tutoriel >Quelques tutoriels d'exemples d'événements de vue

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

零下一度original: 2017-06-27 10:27:181339parcourir

é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 ! 8b05045a5be5764f313ed5b9168a17e6

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

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

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

　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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à trois façons d'utiliser js en HTML et leurs avantages et inconvénientsArticle suivant：Introduction à trois façons d'utiliser js en HTML et leurs avantages et inconvénients

Articles Liés

Voir plus