Vue学习—事件处理器

一、监听事件

可使用v-on指令监听DOM事件来触发JavaScript代码。

<div id="example-1">
    <button v-on:click="count+=1">增加1</button>
    <p>这个按钮被点击了{{count}}次</p>
</div>
var example1=new Vue({
    el:"#example-1",
    data:{
        counter:0
    }
});

二、方法事件处理器

在v-on中指定一个方法来调用。

<div id="example-2">
    <button v-on:click="greet">Greet</button>
</div>
var example2=new Vue({
    el:"#example-2",
    data:{
        name:'Vue.js'
    },
    methods:{
        greet:funciton(event){
            alert('Hello'+this.name+'!')
            alert(event.target.tagName)
        }
    }
})
example2.greet()

三、内联处理器方法

除了直接绑定到一个方法，也可以使用内联JavaScript语句（在方法中传入参数）：

<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
new Vue({
    el:"#example-3",
    methods:{
        say:function(message){
            alert(message)
        }
    }
})

需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event把它传入方法：

<button v-on:click="warn('test',$event)">Submit</button>
methods:{
    warn:function(message,event){
        if(event) event.preventDefault()
        alert(message)
    }
}

四、事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

五、按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

除了编码之外，Vue为按键定义了别名。