绑定事件监听指令：v-on

缩写：@(语法糖)

当用户不设置参数时，默认传递%event(即：事件对象)

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

函数：

 网页显示：

当点击按钮时：第一行就是事件对象，而事件对象  .target 就是返回事件对象 对应的 元素本身。

当设置多个参数时，就需要手动添加 %event 参数。

<button @click="s('1', $event)">按钮</button>

函数： 

效果也是一样的。

---

示例：

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

函数： 

 网页显示：

               

当点击白色区域按钮时，三个按钮事件全部都会触发，即：外层元素也会触发事件，但触发顺序是从里往外。

当点击黑色区域，黑色区域和红色区域会触发。

当点击红色区域，只要红色区域触发。

v-on事件的修饰符号：

1.    .stop：阻止事件冒泡，即：阻止从此层开始的 外层元素事件触发

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

 当点击黑色区域时，只有黑色区域事件触发，外层的红色区域的事件无法触发。

 当点击白色按钮时，黑色区域事件触发，但外层的红色区域的事件无法触发。

2.     .self：当事件处于元素本身才能触发事件

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击白色按钮时，黑色区域事件无法触发，因为并没有点击黑色区域本身(元素里面也不行)

当点击黑色区域，触发事件

3.  .capture：添加事件侦听器时，使用事件捕获模式，即：优先触发该事件，当有多个事件侦听器使用事件捕获模式时，优先触发最外层事件，从外向里

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击黑色按钮时，由于使用事件捕获模式，所以优先触发该事件。然后触发玩使用事件捕获模式的事件侦听器后，在按照从里往外顺序触发其他事件。

<el-button @click.capture="add('11111111111111')" style="background-color: red">
    <el-button @click.capture="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当红色区域和黑色区域都使用事件捕获模式时，从外往里依次触发使用事件捕获模式的事件侦听器，在按照从里往外顺序触发其他事件。

 4.  .prevent：阻止默认事件

比如：

<a href="https://www.csdn.net/" @click.prevent="add('33333333333333333')">dddddddddddd</a>

当点击这个a标签时，不会跳转路由，但依旧能执行我们设置的点击事件 (没加 .prevent 虽然也能执行我们设置的点击事件，但会跳转路由)

5.    .once：事件只触发一次

这个顾名思义很好理解

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.once="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当我们第一次点击白色区域时 。

当我们第二次点击白色区域时，因为黑色区域事件已经触发过一次了。

 v-on事件的修饰符号还可以混合使用

<el-button @click="add('11111111111111')" style="background-color: red">
    <el-button @click.self.stop="add('222222222222222222')" style="background-color: black">
        <el-button @click="add('33333333333333333')">按钮</el-button>
    </el-button>
</el-button>

当点击黑色按钮时，即执行了 .stop 操作又 执行了 .self 操作。

此外还有更多的事件的修饰符号，不过我还没使用过。