vue处理用户事件

v-on:和methods

v-on:(事件绑定)
在做事件绑定的时候，首先要做的就是给页面中的某个元素绑定一个事件，绑定事件的语法如下：

<button v-on:click="add">按钮</button>

v-on事件绑定指令的简写模式就是(@)符号，上面的代码可以改为：

<button @click="add">按钮</button>

methods(方法)
vue将注册事件放在了html中，将方法统一放在了methods的做法使得js代码更清晰明了。

一个简单的案例:

<template>
    <p>你点击按钮的次数是： {{ counter }} </p>
    <button @click="add">点击</button>
</template>

<script>
export default {
    name: "app",
    data() {
        return {
            // 初始次数
            counter:0
        };
    },
    // 要用到的方法都写在这里
    methods:{
        // 这是ES6中的书写方法
        add(){
            // 这里的this指向当前的vue实例，不懂也没关系
            this.counter++
        }
    }
};
</script>

注意：当你要取data里面的数据的时候，就要在变量名前面加this。

另外我们要明确的一点是，在html中注册的方法我们只写了方法名，没有写后面的括号。这是因为当方法没有参数的时候，这个括号是可以省略的：

<button @click="add">点击</button>
<!-- 等同于 -->
<button @click="add()">点击</button>

<!-- 当你的方法需要接收参数的时候，你可以将参数写在这个括号内 -->
<button @click="add(number)">点击</button>

相应的，你需要个methods里面的方法上添加形式参数

methods:{
    add(number){
        // 方法体
    }
}

事件修饰符

事件修饰符在使用中，通常情况下用到的可能只有三种：

• 阻止冒泡事件（stop）

<div @click.stop="func('大')">
    <div @click="func('小')"></div>
</div>

• 添加事件侦听器时使用事件捕获模式(capture)
  如果你希望点击了大盒子里面的小盒子以后，先触发大盒子的事件，再触发小盒子的事件，请给大盒子添加capture，例如：

<div @click.capture="func('大')">
    <div @click="func('小')"></div>
</div>

• 阻止默认事件（prevent）

<a href="#" @click.prevent="func">删除</a>

另外事件修饰符还可以串联起来，比如说我既要阻止默认事件，又要阻止冒泡：

<div @click="fn">
    <a href="#" @click.stop.prevent="func">删除</a>
</div>