Vue事件处理器：事件绑定基础、事件修饰符：stop、prevent、capture、self、once；_vue click.stop可以不绑定事件吗

作者：IT小白 | 2024-02-13 02:29:19

踩

vue click.stop可以不绑定事件吗

先看代码：


<body>
    <div id="box">
        {{count}}
        <button @click="handleAdd1()">add1</button>
        <button @click="handleAdd2">add2</button>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                count: 0,
                },
                methods: {
                    handleAdd1(){
                        this.count++
                    },
                    handleAdd2(evt) {
                        this.count++
                        console.log(evt)
                    },
                }
        })
    </script>
</body>

结果：点击add1，count数量会增加；点击add2，count数量会增加，然后打印出evt的值见下图：

打印evt.target结果是这个button事件对象：

console.log(evt.target)

结果：

事件绑定用法：

事件绑定函数，可以加括号，也可以不加括号；
加括号，是为了传参，不传参也没事，例如代码中的handleAdd1（）；
不加括号的时候，就不能自己传实参了，但是这时候会得到一个形参，这个形参就是“事件对象evt” ，打印evt.target得到的就是节点对象，例如代码中的handleAdd2；
也可以既得到evt事件对象，又能传参，这时候我们需要传实参是见下面代码：

<button @click="handleAdd1($event,1,2,3)">add1</button>


handleAdd1(evt,a,b,c){
      console.log(evt,a,b,c)
     },

结果：

这种形式就是既可以传自己的实参，又能够得到事件对象。

获取input输入框的值：

利用上面那个思路，我们可以在不使用v-model的方法情况下，获取输入框的值：
先拿到这个input节点对象；
然后再通过value获取输入框的内容；

代码：


<body>
    <div id="box">
        <input type="text" @input="handleInput">
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                count: 0,
                },
                methods: {
                    handleInput(evt){
                        console.log(evt.target.value)
                    }
                }
        })
    </script>
</body>

结果：

事件修饰符：

stop、prevent、capture、self、once；

stop的用法：加在子标签身上，可以阻止事件冒泡


<ul @click="handleUIClick">
        <li @click.shop="handleLiClick">111</li>
        <li @click="handleLiClick">111</li>
        <li>333</li>
</ul>

shop加在了第一个li标签身上，当点击第一个li标签只能触发它自己的事件，不会产生冒泡触发ul的事件；
但是你点第二个li标签，还是会触发ul事件；

self的用法：加在自己身上，可以阻止子标签事件冒泡，就是只有当点击自己的时候才会触发事件


<ul @click.self="handleUIClick">
        <li @click.shop="handleLiClick">111</li>
        <li @click="handleLiClick">111</li>
        <li>333</li>
</ul>

once的用法：触发一次事件，下次就不会再触发了，禁用了

<li @click.once="handleLiClick">111</li>

prevent的用法：阻止默认行为

<a href="http://www.baidu.com" @click.prevent>跳转</a>

本来点击这个链接就会跳转到相应的页面，当加了prevent以后，就不会跳转了，被阻止了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/79425