Home > Web Front-end > JS Tutorial > body text

Some event example tutorials of vue

零下一度
Release: 2017-06-27 10:27:18
Original
1290 people have browsed it

Vue events:

Vue event abbreviation:

The event in vue is v-on:click=' show()' But I hate that it is too long and I have to v-on: event

every time. There is an event abbreviation in vue @click='show()'. Wouldn’t this be better!

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
     <div id="box">
           <button v-on:click=&#39;show()&#39;>按钮1</button>
Copy after login
        <button @click=&#39;show()&#39;>按钮2</button>     //这俩种方法都可以执行点击的事件,当然所有事件都可以这样简写。
Copy after login
      </div>
    
        <script src=&#39;vue.js&#39;></script>
     <script>
       new Vue({
          el:&#39;#box&#39;,
          data:{},
          methods:{
             show:function(){
                 alert(1) 
              }
          }
          
       });
      
     </script>
    </body>
</html>
Copy after login

 

 vue event object:

   vue中Of course, there are event objects, so @click='show($event)' is passed in the time function and $evevt is received in the function, and the event object is there.

<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>
Copy after login

 

 vue event risk Bubble: (Everyone knows that event bubbling in native, of course there is no need to prevent it in this case).

Method 1: @click='show($event)' After we have the event object, can we use the native ev.cancelBubble=true in our function;

## Method 2: @click.stop='show()' Just add .stop after the event to prevent the event from bubbling

 Vue’s blocking default event:(There are some events or unnecessary methods in the elements that everyone does not like)

   Method one: @click='show($event)' After we have the event object, can we use the native ev.preventDefault() in our function;

Method two: @click .prevent='show()' Just add .prevent after the event to prevent the default event.

   

Vue's keyboard event:

     @keydown='show()' Of course we can pass $event or get ev in the function .keyCode

What I want to talk about is the commonly used keys in keyboard events.

@keydown.enter='show()' Press Enter to execute

@keydown.up=' show()'                                                        cco Generation #    @keydown.right='show()'    Right click to execute

   And.............................

The above is the detailed content of Some event example tutorials of vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template