vue 第五天（事件监听基础）

傷城~ 2022-11-04 14:24 161阅读 0赞

# vue 第五天 （事件监听基础） #

**一般事件监听写的是 `v-on：`**简化@

# 1、单击事件 v-on:click 简化  @click #

<div id="vue_one">
        <h2>{ { result}}</h2>
        <button @click="increment">+1</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                result : 0
            },
            methods: { 
                increment(){ 
                    this.result++
                }
            }
        })
    </script>

# 2、v-on 传参问题 #

如果传了多个参数的话没有event 我们需要将event加上个美元符号 $event

<div id="vue_one">
        <h2>{ { result}}</h2>
        <button @click="increment('qwe',$event)">+2</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                result : 0
            },
            methods: { 
                increment(ev,event){ 
                    console.log(ev+"/"+event)
                    this.result++
                }
            }
        })
    </script>

# 3、常用修饰符问题 #

## 3.1、阻止冒泡 （.stop） ##

当嵌套多个div 里面有很多个点击事件的话点击一个div会调用多个数据

**正常出现冒泡代码**

<div id="vue_one">
        <div @click="div1">
            <button @click="button1">点我</button>
    
        </div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                result: 0
            },
            methods: { 
                div1(){ 
                    console.log("div1");
                },
                button1(){ 
                    console.log("button1");
                }
            }
        })
    </script>

添加 .stop防止出现冒泡

<body>
    
    <div id="vue_one">
        <div @click="div1">
            <button @click.stop="button1">点我</button>
        </div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                result: 0
            },
            methods: { 
                div1(){ 
                    console.log("div1");
                },
                button1(){ 
                    console.log("button1");
                }
            }
        })
    </script>

## 3.2、阻止默认方法的执行（.prevent） ##

比如form表单，默认的就是会自动的进行跳转

<div id="vue_one">
        <form>
            <input type="submit" value="提交" @click="button1">
        </form>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            data: { 
                result: 0
            },
            methods: { 
                button1(){ 
                    console.log("button1");
                }
            }
        })
    </script>

添加属性 .prevent防止默认的方法

<div id="vue_one">
        <form>
            <input type="submit" value="提交" @click.prevent="button1">
        </form>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            methods: { 
                button1(){ 
                    console.log("button1");
                }
            }
        })
    </script>

## 3.3、只执行一次（.once） ##

<div id="vue_one">
        <button @click.once="button1">点我</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            methods: { 
                button1(){ 
                    console.log("button1");
                }
            }
        })
    </script>

# 3.4、某个键盘敲击事件的监听修饰符(@keyup.键盘按钮名称) 松开按键进行监听 #

<div id="vue_one">
        <input type="text" @keyup.esc="keyUp">
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            methods: { 
                keyUp(){ 
                    console.log("button1");
                }
            }
        })
    </script>

## 3.5、修饰符可以串联  ##

<div id="vue_one">
        <div @click="div1">
        <a href="www.baidu.com" @click.stop.prevent="doThat">12345</a>
        </div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            methods: { 
                div1(){ 
                    console.log("div1");
                },
                doThat(){ 
                    console.log("a");
                }
            }
        })
    </script>

## 3.6、只能通过鼠标左右键调用函数 .left .right ##

<body>
    
    <div id="vue_one">
        <button @click.right="right">点我</button>
        <button @click.left="left">点我</button>
    </div>
    <script type="text/javascript">
        const vm = new Vue({ 
            el: '#vue_one',
            methods: { 
                right(){ 
                    console.log("right");
                },
                left(){ 
                    console.log("left");
                }
            }
        })
    </script>

`花开一千年,花落一千年,花叶永不见`