The event listener mechanism vue

Event Listeners

Basic usage

Dom monitor events using v-on instruction: v-on: Event type = "a function." This type of event can be customized.
v-on instruction binding events, it will monitor the corresponding events, and run some JavaScript code that when triggered.


    <div id="box1">
      <button v-on:click="counter += 1">点我</button>
      <p>已点击 {{ counter }} 次</p>
    </div>
    <script>
        var practice1 = new Vue({
          el: '#box1',
          data: {
            counter: 0
          }
        })  
    </script>

Display of results

abbreviation

v-Prefix as a visual cue to identify particular characteristics of the template Vue. When you use Vue.js add dynamic behavior (dynamic behavior) for existing label v-prefix helpful, however, for some instruction is frequently used, it will feel cumbersome to use. Meanwhile, in the construction of a single-page application Vue manage all templates (SPA - single page application), the v-prefix has become less important. Therefore, Vue to v-onprovide a specific shorthand:

 <!-- 完整语法 -->
 <a v-on:click="doSomething">click</a>

 <!-- 缩写 -->
 <a @click="doSomething">click</a>

@clickIs v-on:clicka shorthand @that means v-on:.
They may look slightly different from ordinary HTML, but: @ For the property name for both legal character, can be properly resolved Vue in all supported browsers. Moreover, they do not appear in the final rendered markup. Abbreviated syntax is completely optional.

effect

Bind event listeners, expression can be the name of a method or an inline statement,
if no modifier can be omitted, used in ordinary html element, can only monitor the native DOM events. When used in the assembly of custom elements, you can also listen custom events triggered by the subassembly.　　

Common events

v-on:click
v-on:keydown
v-on:keyup
v-on:mouseenter
v-on:mouseleave
v-on:mousedown
v-on:mouseover
v-on:submit

Examples


<!-- v-on:submit 阻止默认行为 -->
<form v-on:submit.prevent></form>


Vue.js 提供了一个 $event 变量，使用它可以访问原生 DOM 事件。$event 变量可以通过方法传入。

<div id="app">
    <!-- 内联语句 -->
    <a href="www.163.com" v-on:click="openUrl('被禁用喽',$event)">被禁用喽</a>
</div>    

<script>
    var app = new Vue({
        el:"#box",
        data: {
            count:0
        },
        methods: {
            openUrl:function (param,event) {
                event.preventDefault();
                console.log("param"+ param);
            }
        }
    })
</script>

Output:

param:被禁用咯

This example uses the incoming event parameters, disable the original link to jump logic.

Event Modifier

.stop


<!-- v-on:click.stop 阻止事件冒泡 -->
<button v-on:click.stop="show">B</button>

.prevent

<!-- v-on:click.prevent 阻止默认行为 -->

<a href="http://www.baidu.com/" v-on:click.prevent>A</a> 
<!-- 没有表达式-->

<a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
<!-- 有表达式 -->

<!-- 举例 -->
<div id="app">
        <a href="http://www.baidu.com/" v-on:click.prevent>A</a>
        <br />
        <a href="http://www.baidu.com/" v-on:click.prevent="show">B</a>
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        methods:{
            show(){
                console.log("1")
            }
        }
    })
</script>

A link to the default event is to jump to baidu.com, adds prevent, click A, the default event is invalid.

B is also a default event links to jump to baidu.com, after adding with prevent the expression, click B, jump event is invalid, but show an effective method to manually add,
the console display 1, because the show is not a default event.

.capture

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">text</div>

.self

<!-- v-on:click.self  -->
<div v-on:click.self="show2"></div>

功能：当事件是从侦听器绑定的元素本身触发时才触发回调。

举例：

<div id="app">
    <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show1">
        第一层
        <div v-on:click.self="show2">
            第二层
            <div v-on:click="show3">
                第三层
                <div v-on:click="show4">
                    第四层
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        methods: {
            show1() {console.log("1")},
            show2() {console.log("2")},
            show3() {console.log("3")},
            show4() {console.log("4")}
        }
    })
</script>

假设我们没有在第二层的div上添加self，那么我们点击第四层的时候，控制台将会出现结果4 3 2 1（冒泡），
添加了之后，点击第四层，控制台显示4 3 1，因为第二层的self把第二层的事件设置成了仅自己调用时才有效，
所以冒泡把第二层跳过了。

.keyCode | keyAlias


<!-- .{keyCode | keyAlias} 用特定按键触发事件 -->
<input type="text"  v-on:keydown.13="show1" /><br/>
<!-- 使用KeyCode 13代表enter键 -->

<input type="text"  v-on:keydown.right="show2" />
<!-- 使用别名，right代表方向键右 -->

.native

功能：监听组件根元素的原生事件。

<div id="app">
    <mycomponent v-on:click.native="myfn"></mycomponent>
</div>
<script type="text/javascript">
    Vue.component('mycomponent',{
        template:`<a href="#">点我</a>`
    })
    var vm = new Vue({
                el: '#app',
        methods:{
            myfn(){
                console.log(1);
            }
        }
    });
</script>

Use the native modifier need to create a custom component, and then when you call the component in html, re-use.
If the v-on: click without .native, then click is invalid, the console without any content.

.once

功能：只触发一次回调。多次点击，控制台只出现一次结果。
<mycomponent v-on:click.native.once="myfn"></mycomponent>

When using the modifier, the order is important; the appropriate code is generated in the same order. Therefore, with the @ click.prevent.self blocks all clicks and stop @ click.self.prevent only click on the element.

Dynamic parameters

2.6.0 New

2.6.0 From the start, using square brackets in JavaScript expression as a parameter of a command:

<a v-on:[eventName]="doSomething"> ... </a>

In this example, when eventNamethe value of "focus"time, v-on:[eventName]would be equivalent to v-on:focus.