Vuejs003---使用 v-on 指令触发事件

目录

（1）v-on 的基本使用

（2）事件修饰符的使用

a.stop

b.prevent

c.capture          capture：捕获;

d.self

e.once

---

（1）v-on 的基本使用

         v-on:click="fun1" 的形式来绑定事件 ，相当于原生 js 中的 onclick 。

         v:bind-->:   ，v-on-->@

（2）事件修饰符的使用

a.stop

 <div style="width:200px;height:200px;background-color:red" @click="fun1">

            <div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">

            </div>
 </div>

使用 .stop 来对事件的冒泡机制进行阻止

js 中的事件的冒泡指的是，在触发了内层元素的同时，也会随之

继续触发外层元素（外层元素包裹了内层元素），在做点击的过程中，

点击了内层元素，也可以认为是同时点击了外层元素。所以两个事件

都会触发。

在实际项目开发中，几乎没有太多需求会使用到这种事件冒泡的

机制，所以我们需要阻止事件的冒泡。 阻止事件冒泡之后的效果是，

在我们点击了内层元素之后，内层元素绑定的事件触发，触发完毕后，

由于事件冒泡被阻止，就不会继续触发外层元素的事件了 。

b.prevent

    <div id="app">
        <a href="http://www.baidu.com" @click="fun1">点击1</a>

        <a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
    </div>

使用 .prevent 来阻止超链接默认的行为

所谓默认的行为指的是超链接中的 href 属性链接

在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行

为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。

所以在 a 标签中的 href 链接往往要被我们以特殊的方式处理掉。

c.capture          capture：捕获;

        <div style="width:200px;height:200px;background-color:red" @click.capture="fun1">
            <div style="width:100px;height:100px;background-color:blue" @click="fun2">
            </div>
        </div>

使用.capture 实现捕获触发事件的机制

使用的是外层 div 套用内存 div 的例子（其中内层 div 没有选择阻

止冒泡），在此基础之上，点击内层的 div ，先触发内层 div 的事件，

再触发外层 div 的事件。

加入了.capture 修饰符之后 ，先触发的是外层的 div 事件，后触发

的是内层 div 事件。 被.capture 修改之后，事件优先触发 。

d.self

    <div id="app">
        <div style="width:200px;height:200px;background-color:red" @click="fun1">
            <div style="width:100px;height:100px;background-color:blue" @click.self="fun2">
                <input type="button" value="点击" @click="fun3"/>
            </div>
        </div>
    </div>

self 实现 阻止事件冒泡行为的机制 （之前我们讲过了一个 .stop ）

使用 .self 实现的是阻止自身冒泡的行为（它不会真正的阻止冒泡）

案例：外层 div ，内层 div ，在内层 div 中加入了 button

测试 1 ： 在内层 div 加入.stop 修改符

观察实验结果，点击最内层的按钮，触发按钮事件，触发了内层

的 div ，外层 div 没有触发，也就是说，使用 .stop 修改符，不会阻止

掉自身事件的触发，在自身事件触发完毕之后，阻止事件继续向外扩

散 。

测试： 在内层 div 加入.self 修改符

观察实验结果，点击按钮，触发按钮事件，没有触发内层 div 事

件，跨过了内层 div 事件的触发后，继续触发了外层 div 的事件。

表示使用 .self 只是将当前元素（测试中的内层 div）的冒泡行为阻

止掉了，但是不会影响冒泡行为继续向外扩散 （测试中的外层 div 继

续触发了）。

e.once

    <div id="app">   
        <a href="http://www.baidu.com" @click="fun1">点击1</a>
        <a href="http://www.baidu.com" @click.prevent.once="fun1">点击2</a>
    </div>

使用 .once 修饰符，只触发一次事件处理函数

.once 需要结合 .prevent 来使用

在我们使用事件修饰符的时候，有可能会存在这样的需求，需要

同时为 @click 事件使用多个修饰符。例如我们现在就需要同时使

用 .once 和 .prevent 修饰符。在使用的时候，通过绑定事件的 @click

连续的绑定修饰符就可以了。

语法： @click.prevent.once

测试：通过超链接的触发来观察

在只使用 @click 的时候（没有做任何修饰符的修饰），点击超链接，

先触发 @click ，后触发 href 链接。

当为 @click 添加上 @click.prevent.once 之后，点击超链接。

第一次点击：只触发了 @click 的事件， href 链接没有触发

第二次点击（已经点击过一次之后再次点击）：没有触发 @click ，只触

发了 href 。