Vue事件修饰符的学习

事件修饰符

　　在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。在Vue中，事件修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有：

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture：与事件冒泡的方向相反，事件捕获由外到内
• .self：只会触发自己范围内的事件，不包含子元素
• .once：只会触发一次

.stop：

 <div class="inner" @click="div">
            <!-- .stop阻止所有冒泡 -->
            <input type="button" value="挫他" @click.stop="input">
        </div>
          methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("B")
                }
            }

在没有使用.stop的时候,点击div的区域会在控制台输出A，点击按钮的时候会出现B和A（会从内到外触发）。当我们加上.stop的时候相当于在方法中调用了event.stopPropagation()，这样在点击子事件的时候不会触发父节点事件。

.prevent

<a href="http://www.baidu.com" @click.prevent="Label">有问题去百度</a>
methods: {
                Label() {
                    console.log("触发a标签的点击事件")
                }
            }

在没有使用.prevent的时候，点击a标签的时候，会先在控制输出console,然后调转到百度网页，使用.prevent的时候相当于调用了event.preventDefault()只会输出console并不会跳装网页

.capture

    <!-- .capture 捕获事件，从外到里执行事件-->
        <div class="inner" @click.capture="div">
            <input type="button" value="挫他" @click="input">
        </div>
 methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("B")
                }
            }

在没有使用.capture的时候点击input控制台输出的是B和A，使用.capture的时候点击input控制台输出的是A和B。.capture的作用是点击子节点事件的时候，会从父节点依次向当前子节点事件执行

.self

  <div class="outer" @click="div">
            <div class="inner" @click.self="div1">
                <input type="button" value="戳他" @click="input">
            </div>
        </div>

  methods: {
                div() {
                    console.log("A")
                },
                input() {
                    console.log("C")
                },
                div1() {
                    console.log("B")
                }
            }

.self只会触发自己范围内的事件，不会包含子元素，点击div1的时候只会出现B和A，不会出现子节点事件。点击按钮的时候只会出现C和A,不会出现B事件

.once

 <input type="button" value="戳他" @click.once="input">

 methods: {
                input() {
                    console.log("A")
                }
            }

使用.once修饰的只会执行一次，点击多次控制台也只会输出第一次点击的A