Some event example tutorials of vue-JS Tutorial-php.cn

Some event example tutorials of vue

零下一度

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

Original

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