事件绑定

vue如何处理事件？

v-on / 缩写@

示例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

事件的基本使用

来看一个例子

// html
<input type="text" v-model="num">
<button v-on:click="doThis()">点击</button>

// js
<script>
    // 新建VM实例
    var vm = new Vue({
        el: "#app",
        data: {
           num: 0
        },
        methods: {
           doThis() {
               this.num++;   // 这里的this指向的是vm实例
　　　　　　　　　console.log(this === vm); // true
           }
        }
    });
</script>

上面代码，通过点击按钮，改变输入框中相应的值。

事件函数的调用方式

1、直接绑定函数名称

<button v-on:click="doThis">点击</button>

2、调用函数

<button v-on:click="doThis()">点击</button>

事件函数的参数传递

1、普通函数和事件对象

<!-- 注意：$event是固定写法，代表事件参数对象，并且只能放置在参数列表的最后一位-->
<button v-on:click="doThis('wade',$event)">点击</button>

来看一个例子

// html
<div id="app">
        <h1 v-text="name"></h1>
        <button v-on:click="doThis('wade',$event)">点击</button>
</div>

// js
 <script>
        // 新建VM实例
        var vm = new Vue({
            el: "#app",
            data: {
                name: 'james',
            },
            methods: {
                doThis(name,e) {
                    this.name = name;
　　　　　　　　　　　　console.log(e.target.innerHTML);   // 点击
                }
            }
        });
</script>

上面代码，通过参数传递将页面显示的名字更改成另一个人的名字。并且通过事件源对象打印目标对象的内容。

结论：1、如果事件直接绑定函数名称，那么会默认传递事件对象作为事件函数的第一个参数。 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示$event传递