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

最新推荐文章于 2024-06-06 18:47:35 发布

彼岸锋

最新推荐文章于 2024-06-06 18:47:35 发布

阅读量10w+

点赞数 1

分类专栏：自学vue 文章标签： vue vue.js 前端 js javascript

本文链接：https://blog.csdn.net/weixin_43731532/article/details/114298696

版权

自学vue 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

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

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

<!--单击+1事件-->
<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

<!--单击+1-->
<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>
<!--添加冒泡.stop 已经不会出现其他点击事件-->
<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表单，默认的就是会自动的进行跳转

<!--显示跳转到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防止默认的方法

<!--.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>
<!--.left只能点击鼠标左键调用函数，.right只能点击鼠标右键调用函数-->
<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>