VUE学习之监听事件

最新推荐文章于 2025-04-23 14:27:57 发布

这都行？

最新推荐文章于 2025-04-23 14:27:57 发布

阅读量508

点赞数 1

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_41662197/article/details/104972744

版权

Vue学习专栏收录该内容

1 篇文章

订阅专栏

一,按钮监听事件
1，引入Vue.min.js:
2,v-on:click=" “与 @click=” "具有相同作用：

(1)v-on：click="click"

<!DOCTYPE html>
<html lang="en">
<script src="../js/vue.min.js"></script>
<div id="div1">
    <div>一共点击了{{countNum}}次</div>
    <button v-on:click="click">点击</button>
</div>
<script>
    new Vue({
        el:'#div1',
        data:{
            countNum:0
        },
        methods:{
            click:function () {
                this.countNum+=2;
            }
        }
    })
</script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
</html>

（2)使用符号“@” 代替v-on:

 <button  @click="click">点击</button>

二，事件修饰符（.stop/.captrue/.once/.self/.prevent）
1,事件冒泡：在讲事件修饰符之前，先了解它是什么？
冒泡：页面因为是由文档流即dom树组成的，当我们触发的时候，这个事件就像这个气泡一样，从dom树的底层，一层一层往上面传递，一直传递到dom的根节点。如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发，这就是冒泡的基本原理。
2，举个栗子：
前提：有一个层层嵌套的div （下面的列子也是看了how2j站长才想到）：
在这里插入图片描述
（1).stop。在id=“me” 中添加@click.stop
部分代码：

  <div id="content">
    <div id="grandfather" @click="click">grandfather
      <div id="father" @click="click">father
        <div id="me" @click.stop="click">me
         <div id="son" @click="click">
           son
         </div>
      </div>
     </div>
    </div>

</div>
<script>
    new Vue({
        el:'#content',
        methods:{
                click:function () {
                this.id= event.currentTarget.id;
                alert(this.id)
            }
        }
    })
</script>

     结果是：当点击son 时，只会弹出 son ，me。不会再从底部弹出son一直到grandfather了

（2).capture。再id为“grandfather” 中，添加@click.capture:

   <div id="grandfather" @click.capture="click">grandfather

结果是：当点击除了grandfather外，先会弹出grandfather。再会从弹出其他id( alert(this.id) )

（3).once。再id为“me” 中，添加@click.once:

   <div id="me" @click.once="click">me

结果是：这样me再被点击一次之后，就不会再监听到id="me"的click了，其他的id仍然能被监听弹出id（ alert(this.id) ）

（4).self。再id为“father” 中，添加@click.self:

   <div id="father" @click.self="click">father

结果是：这样点击son 和 me都不会导致其触发click事件，只有点击father自己，才会导致事件发生。

(5).prevent ,通过在 click 后面添加 .prevent 可以阻止页面刷新。