v-on以及方法methods的定义

简写

v-on:就是用于绑定事件的,其简写为@。

例：

<div class="app">
    <button v-on:click="myclick">click me</button>
<button @click="myclick">click me</button>
</div>  

绑定的方法可以写成myclick()，在括号在里面可以添加参数。如没有参数也可以写成myclick。另外这种事件对应的方法定义在vue实例的methods里。

通过json绑定多个方法

<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>  
<div class="app">
    <button v-on:mouseenter='onenter' v-on:mouseleave='leave' v-on:click="myclick">click me</button>
</div>  
<div class="app">
    <button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>  

当绑定多个事件时，需要传入一个json对象，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。

方法的定义

可以使用

myclick:function(){
                console.log("clicked");
            },

也可以使用

myclick:function(){
                console.log("clicked");
            },

但注意一定要定义在methods里面

 <script>
    var vm = new Vue({
        el:'#app',
        data:
        },
        methods:{
            myclick:function(){
                console.log("clicked");
            },
            leave:{
                console.log("mouseleaved");
            }
       } 
    })
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 阻止单击事件继续传播 -->
<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>