vue 方法与事件

在事件绑定上，类似原生 Javascript 的 onclick 写法，也是在 HTML 上进行监听的。@click 的表达式可以直接使用 javascript 语句，也可以是一个在 Vue 实例中 methods 选项内的函数名。

    <div id="app">
        点击次数:{{ counter }}
        <button @click="handleAdd()">+ 1</button>
        <button @click="handleAdd(10)">+ 10</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleAdd: function (count) {
                    count = count || 1;
                    //this指向当前vue实例app
                    this.counter += count;
                }
            }
        })
    </script>

vue 提供了一个特殊变量 $event, 用于访问原生 DOM 事件

    <div id="app">
        <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                counter: 0
            },
            methods: {
                handleClick: function (message, event) {
                    event.preventDefault();
                    window.alert(message);
                }
            }
        })
    </script>

修饰符#

在上面使用的 event.preventDefault () 也可以用 vue 事件的修饰符来实现，在 @绑定的事件后加小圆点 “.”，再跟一个后缀来使用修饰符。

事件修饰符

.stop

.prevent

.capture

.self

.once

<!-- 阻止单击事件继续传播 -->  
<a v-on:click.stop="doThis"></a> 
<!-- 提交事件不再重载页面 -->  
<form v-on:submit.prevent="onSubmit"></form>  
<!-- 修饰符可以串联 --> 
<a v-on:click.stop.prevent="doThat"></a> 
<!-- 只有修饰符 -->  
<form v-on:submit.prevent></form>  
<!-- 添加事件监听器时使用事件捕获模式 -->  
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> 
<div v-on:click.capture="doThis">...</div>  
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->  
<!-- 即事件不是从内部元素触发的 -->  
<div v-on:click.self="doThat">...</div>