Vue.js框架学习—事件处理

最新推荐文章于 2024-08-12 16:32:44 发布

数据发现者

最新推荐文章于 2024-08-12 16:32:44 发布

阅读量267

点赞数

分类专栏： Vue框架学习文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/weixin_45237668/article/details/127104171

版权

Vue框架学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue的事件处理

在这里插入图片描述

一、事件的基本使用

Vue中使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，事件的回调需要配置在methods对象中，methods中配置的函数，不要用箭头函数，否则this就不是指向Vue实例，而是指向window，@click=“xxx” 和 @click=“xxx($event)” 效果一致，但后者可以传参。

模板和Vue实例

<body>
    <div id="root">
        <button v-on:click="showInfo">点击跳出弹窗(v-on)</button>
        <button @click="showInfo">点击跳出弹窗(@简写)</button>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        methods: {
            showInfo(){
                alert('showInfo函数被执行了')
            }
        },
    })
</script>

二、Vue的事件修饰符

1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才触发事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

模板和Vue实例

<body>
    <div id="root">
        <button v-on:click="showInfo.once">点击跳出弹窗(v-on)</button>
        <button v-on:click="showInfo">点击跳出弹窗(@简写)</button>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        methods: {
            showInfo(){
                alert('showInfo函数被执行了')
            }
        },
    })
</script>

第一个button按钮使用了once修饰符，所以只有第一次点击，才会跳出弹窗，之后点击不会再跳出弹窗。第二个button按钮没有once修饰符，点击总是会跳出弹窗。

三、Vue的键盘修饰符

Vue中常用的按键别名

回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

模板和Vue实例

<body>
    <div id="root">
        <input type="text" v-bind:value="value" @keydown.enter="showInfo">
        <br>
        <span>{{value}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            value:'123456'
        },
        methods:{
            showInfo(e){
                this.value=e.target.value
            }
        }
    })
</script>