Vue —— 事件监听及参数传递

目录

@click

stop：阻止冒泡 

 prevent 阻止默认事件

 键盘监听：keyup

---

 

@click

原本事件监听是：v-on：,语法糖简化为@

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

    <div id="app">
        <h2>{{count}}</h2>
        <button @click = "inscrease()">点击增加</button>
        <button @click = "descrease()">点击减少</button>
    </div>
    
    <div id="app1">
        <h2>{{count}}</h2>
        <button @click = "canshu_increase(delt_add)">参数传递</button>
        <button @click = "canshu(delt_reduce,$event)">事件传递</button>
    </div>


    <script src="../vue/vue.js"></script>
    <script>
        const test = new Vue({
            el : "#app",
            data : {
                count : 0
                
            },
            methods:{
                inscrease(){
                    this.count ++
                },

                descrease(){
                    this.count--
                }
            }
        })

        const test1 = new Vue({
            el:"#app1",
            data:{
                count:0,
                delt_add : 10,
                delt_reduce : 10
            },
            methods:{
                canshu_increase(delt_add){
                    this.count += delt_add,
                    console.log("canshu");
                },
                canshu(delt_reduce,event){
                    this.count -= delt_reduce,
                    console.log(event);
                }
            }
        })
    </script>

stop：阻止冒泡 

如下，div里调用divClick方法，button调用BuClick方法，

    <div id="test" @click = "divClick">
        <h2>这是div</h2>
        <button @click = "BuClick">按钮</button>
    </div>

const test = new Vue({
            el:"#test",
            methods:{
                BuClick(){
                    console.log("按钮被点击");
                },

                divClick(){
                    console.log("div被点击");
                },

 效果如下，点击button后，两个方法都会调用，这就是冒泡。而我们只希望按钮的方法会调用，所以加上stop

 加上stop:

    <div id="test" @click = "divClick">
        <h2>这是div</h2>
        <button @click.stop = "BuClick">按钮</button>
    </div>

 效果显示只有button的方法会被调用。

 prevent 阻止默认事件

 一个提交事件，不加prevent，会之间进行提交，而往往我们想在sumbit方法里进行一下相关操作再提交，所以加上prevent。

    <form action="baidu">
        <input type="submit" value="提交" @click="submit">
    </form>

                submit(){
                    console.log("sumbit被执行");
                },

 加上prevent （下面.stop同样阻止了div的冒泡）

    <form action="baidu">
        <input type="submit" value="提交" @click.prevent.stop="submit">
    </form>

 

 键盘监听：keyup

加上.enter是对回车键的监听，不加则是对任何键的监听

<input type="text" @keyup.enter = "keyup">

 在输入框输入按下回车后，效果如下

 

 如果这个输入框也在div里面，那么点击后依然会冒泡，可以创建一个空的点击事件.stop

<input type="text" @keyup.enter = "keyup" @click.stop="">

 

 学习资料引用链接