20. [基础]Vue绑定事件详讲-事件修饰符

绑定事件中的修饰符有很多种,这些修饰符各有各的用处。本节课将讲解6种Vue中的事件修饰符,分别是;stoppreventcaptureselfoncepassive

通过修饰符解决冒泡事件

在JavaScript中冒泡事件是最长处理的事件,先写一段代码,手动创造一个冒泡事件。新建一个文件Demo20.html,复制Demo19的内容,然后稍作修改。

  • 修改模板template部分,在最外层增加一个<div>并添加click事件。
  • 修改方法methods部分,删除无用方法,保留两个方法,增加alter提示。
  • 形成冒泡效果,就是有嵌套的DOM元素时,两个都有绑定事件,JS会自动向上传递事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo19</title>
    <script src="https:[email protected]" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++
        },
        handleBtnClick1(){
            alert(1)
        },
    },
    template:`
        <div @click="handleBtnClick1">
            <div>目前已点报名的小伙伴数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位小伙伴</button>
       </div>
        ` 
    }) 
    const vm=app.mount("#app")
</script>
</html>

stop修饰符

在Vue中要停止冒泡是非常简单的,只要加加一个事件修饰符stop就可以了。

<button @click.stop=" addCountClick()">增加一位小伙伴</button>

self修饰符

除了使用.stop修饰符,还有一种修饰符self,意思是只有点击自己的时候才会被执行。 只不过加的位置要加在外层DOM元素的事件上。

template:`
        <div @click.self="handleBtnClick1">
            <div>目前已点报名的小伙伴数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位小伙伴</button>
       </div>
        `

这时候你会发现点击那里,都没办法触发hanldeBtnClick1方法了,这是因为目前最外层div下都是独立的DOM元素,就是都有成对标签出现,都不属于最外自己,都是他们的子元素。

可以编写一段专属最外层DIV的文字。

template:`
        <div @click.self="handleBtnClick1">
            我是最外层的DIV文字
            <div>目前已点报名的小伙伴数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位小伙伴</button>
       </div>
        `

这样当点击我是最外层的DIV文字时,就会触犯handleBtnClick1方法了。

其它常用修饰符

prevent修饰符:阻止默然行为的修饰符,这个以前讲过,例如阻止form表单的默认提交行为。(不在重复介绍,如果你还没有掌握,可以复习以前课程)

capture修饰符:改成捕获模式,默认的模式都是冒泡模式,也就是从下到上,但是你用capture后,是从上到下的。

修改一下模板部分的代码,不在使用修饰符,而是让事件存在冒泡。

methods:{
    addCountClick(){
        this.count++
        alert(0)  //修改了此处
    },
    handleBtnClick1(){
        alert(1)
    },
},
template:`
    <div @click.capture="handleBtnClick1">  //修改了此处
        我是最外层的DIV文字
        <div>目前已点报名的小伙伴数量{{count}}.</div>
        <button @click=" addCountClick()">增加一位小伙伴</button>
    </div>
    `

once修饰符:事件只执行一次。

template:`
    <div @click.self="handleBtnClick1">
        我是最外层的DIV文字
        <div>目前已点报名的小伙伴数量{{count}}.</div>
        <button @click.once=" addCountClick()">增加一位小伙伴</button>
    </div>
    `

此时再点击按钮,事件只执行一次。这时候我们修改了两个地方,最外层的事件加了self修饰符,button上加了once修饰符。

passive修饰符:解决滚动时性能的修饰符,不太好演示,等以后用到我们会再详细讲解。

本文就先到这里了,我们学习了6种修饰符:stoppreventcaptureselfoncepassive。下节我们讲解按键修饰符。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 20. [基础]Vue绑定事件详讲-事件修饰符

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们