Vue-07-事件绑定

最新推荐文章于 2024-05-15 19:00:53 发布

阿国GG在学习

最新推荐文章于 2024-05-15 19:00:53 发布

阅读量678

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46147113/article/details/123834990

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、介绍

Vue提供了 v-on 指令来监听DOM事件，在时间绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。

二、基本用法

Vue种的绑定事件，使用v-on：事件名=函数名来完成，这里函数名定义在Vue实例的methods对象中，Vue实例可以直接访问其中的方法

v-on:事件名.修饰符=方法名（）| 方法名 | 简单的JS表达式
简写：@事件名.修饰符=方法名（）| 方法名 | 简单的JS表达式
事件名：click|keydown|keyup|mouseover|mouseout|自定义事件名

1、直接使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  使用CDN的方式引入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    点击次数：{{count}}
    <button @click="count++">单机+1</button>
    <button @click="say1">单机说hello</button>
    <button @click="say2('我是携带参数')">携带参数的</button>

</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            count:0,
            msg:'Hello'
        },
        methods:{
            say1:function (){
                alert(this.msg)
            },
            say2:function (val) {
                alert(val)
            }
        }
    })
</script>
</body>
</html>

运行结果

初始：

点击后：

二、修饰符

说明：此内容简单了解，具体内容可以自行查看

1、.top：阻止事件继续传播，即阻止它的捕获和冒泡过程

2、.prevent：阻止默认事件

3、.capture：添加事件监听器时使用事件捕获模式，即在捕获模式下触发

4、.self：当前元素自身时出发处理函数时才会出发函数

阿国GG在学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-07-事件绑定

一、介绍Vue提供了 v-on 指令来监听DOM事件，在时间绑定上，类似原生JavaScript的onclick事件写法，也是在HTML上进行监听。二、基本用法Vue种的绑定事件，使用v-on：事件名=函数名来完成，这里函数名定义在Vue实例的methods对象中，Vue实例可以直接访问其中的方法v-on:事件名.修饰符=方法名（）| 方法名 | 简单的JS表达式简写：@事件名.修饰符=方法名（）| 方法名 | 简单的JS表达式事件名：click|keydown|keyup|mouse
复制链接

扫一扫