Vue中的事件处理

最新推荐文章于 2024-03-31 21:19:53 发布

丹&d

最新推荐文章于 2024-03-31 21:19:53 发布

阅读量1.1k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/sdrfsef/article/details/124716653

版权

1.v-on事件监听

1.1 简单事件处理

括号里,可以写一些简单的事件处理,如果事件比较复杂,则需要配置methods对象,把方法写在methods里边

语法 : v-on:事件名="事件处理 " 比如 v-on:click=" "

简写 : @事件名=" 事件处理" 比如 @click=" "

<body>
<div id="app">
    <h1>当前数值是:{{num}}</h1>
    <button v-on:click="num++">点击num+1</button>  
    
    <button @click="num++">简写,点击num+1</button>

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 2
        }
    })
</script>
</body>

1.2 复杂事件处理

语法 : v-on:事件名=" 事件处理函数" 比如 v-on:click=""

简写 : @事件名=" 事件处理函数" 比如 @click=" "

注意 :

事件处理函数必须写在methods对象中
methods中函数写法: 函数名:function( ){ }
可以简写为 : 函数名( ){ }
引号里边,函数后边的小括号可以加,也可以不加,如果需要传参数就加括号,不需要传参,一般不加括号

<body>
<div id="app">
    <h1>{{message}}</h1>
    <button v-on:click="getData">点击获取数据</button>
    <button @click="getData()">简写方式,点击获取数据</button>
    <button @click="setData('新数据')">简写方式,点击设置数据</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '初始数据'
        },
        methods: {
            // getData:function () {
            //     alert(this.message)
            // }
            // 简写方式
            getData() {
              alert('getData函数')
            },
            setData(params) {
                this.message = params
            }
        }
    })
</script>
</body>

2.事件修饰符

常用的事件修饰符有以下几种:

.stop 阻止冒泡
.prevent 禁用标签默认行为
.self 只有触发自身才会执行
.once 事件只执行一次
.passive 滚动事件中,默认行为立即执行
.capture 使用事件捕获模式

1. 阻止冒泡 .stop

<body>
<div id="app">
    <div style="background-color: gold ; width: 400px ; height: 400px" @click="handler()">
        <div style="background-color: pink ; width: 200px ; height: 200px" @click.stop="handler()">         
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        methods:{        
            handler(){
                alert('阻止了冒泡,点击子div,只会弹窗一次')
            }   
        }
    })
</script>
</body>

2.禁用标签默认行为 .prevent

<body>
<div id="app">
      <a href="http://www.baidu.com" @click.prevent="handle()">点击跳转</a>
 </div>
<script>

    new Vue({
        el:'#app',
        methods:{
            handler(){
                alert('弹窗之后不会再跳转')
            }
        }
    })
</script>
</body>

3.只有触发自身才会执行 .self

<body>
<div id="app">
    <div style="background-color: gold ; width: 400px ; height: 400px" @click.self="handler()">
        <div style="background-color: pink ; width: 200px ; height: 200px" @click="handler()">         
        </div>
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        methods:{        
            handler(){
                alert('没有阻止冒泡,但是点击子div,也不会触发外层div的事件')
            }   
        }
    })
</script>
</body>

4.事件只触发一次 .once

<body>
<div id="app">
    <div style="background-color: gold ; width: 400px ; height: 400px" @click.once="handler()">
    </div>
</div>
<script>
    new Vue({
        el:'#app',
        methods:{        
            handler(){
                alert('事件只会触发一次')
            }   
        }
    })
</script>
</body>

后两种事件修饰符应用的比较少,如果想了解,可以参考官方文档

事件处理 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/events.html

丹&d

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue中的事件处理

目录1.v-on事件监听1.1简单事件处理1.2复杂事件处理2.事件修饰符1.v-on事件监听1.1简单事件处理括号里,可以写一些简单的事件处理,如果事件比较复杂,则需要配置methods对象,把方法写在methods里边语法 : v-on:事件名="事件处理 " 比如 v-on:click=" "简写 : @事件名=" 事件处理" 比如 @click=" "<body><div id="app"> ...
复制链接

扫一扫