Home > Article > Web Front-end > Some event example tutorials of vue

Some event example tutorials of vue

零下一度Original: 2017-06-27 10:27:181287browse

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

　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>

　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!

Statement：

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

Previous article：Introduction to three ways to use js in HTML and their advantages and disadvantagesNext article：Introduction to three ways to use js in HTML and their advantages and disadvantages

See more

Some event example tutorials of vue

Related articles