vue指令：v-on（@click）绑定点击事件，也就是方法

最新推荐文章于 2024-08-16 07:34:20 发布
最新推荐文章于 2024-08-16 07:34:20 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： 前端技术 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a772304419/article/details/121925810
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h2 >{{a}}</h2>
        <button @click="add">点击加1</button>
    </div>
    <script src = "js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                a: 100
            },
            methods:{
                add(event) {
                    console.log(event)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

学亮编程手记
关注
专栏目录
vue怎么根据一个数据改变触发事件_Object.defineProperty实现一个简单的双向绑定
weixin_39585974的博客
12-01 940
好久好久好久都没有更新过文章了。无论怎样，要开始加油了！切入正题ing~~~使用过vue的人都知道，vue的双向绑定是靠Object.defineProperty来实现的。抛开vue，如果让我们通过Object.defineProperty来实现一个双向绑定，应该如何实现呢？先看一段vue使用实例： "app"> <form> <input typ...
VUE初学---事件处理 v-on:click、v-on:keyup
qq_42970981的博客
11-22 3899
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处： 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。 因为你无...
Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）
运维玄德公
05-31 6342
1. 点击事件参数（click） 1.1 基本使用 1.2 绑定一个方法 1.3 冒泡事件 说明 示例 2. 点击事件修饰符 2.1 .stop （阻止冒泡） 使用说明 使用示例 2.2 capture （捕获冒泡） 使用说明 使用示例 2.3 .self （只监听触发该元素的事件） 使用说明 使用示例 2.4 once （事件只触发一次） 使用说明 使用示例 2.5 鼠标的修饰符......
vue基础之事件v-onclick="函数"用法示例
10-17
主要介绍了vue基础之事件v-onclick="函数"用法,结合实例形式分析了vue.js事件v-on:click="函数"的data数据添加、点击响应、以及留言本功能相关操作技巧,需要的朋友可以参考下
Vue.js 中的 @click 事件详解
最新发布
weixin_63490470的博客
08-16 1493
除了使用@click指令监听原生 DOM 事件，Vue.js 还允许我们自定义事件，并在组件之间进行通信。-- 父组件 --> < template > < div > < ChildComponent @custom-event = " handleCustomEvent " /> < script > import ChildComponent from './ChildComponent.vue';
vue修饰符--可能是东半球最详细的文档（滑稽）
weixin_34268843的博客
10-24 382
为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符（实在不知道叫啥名字） 表单修饰符 填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的 .lazy &l...
vue事件绑定@click
wangshuai13383347132的博客
09-17 8756
vue事件绑定@click 事件绑定 1.Vue如果处理事件？ v-on指令用法 <input type= 'button' v-on:click = 'num++'/> v-on简写形式 <input type = 'button' @click = 'num++' /> 2.事件调用函数方式 直接绑定函数名称 <button v-on:click='say'>Hello</button> 调用函数 <button v-on:cl
JS中拼接VUE的ONCLICK事件
wejack的专栏
06-08 6497
本文为转载，原文地址：https://www.choupangxia.com/2020/04/19/js-vue-onclick/ ，非常感谢原作者 正常情况下，我们使用@click属性便可对HTML元素绑定onclick事件，完整示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue属性绑定</title..
Vue v-for循环之@click点击事件获取元素示例
10-16
接着，@click是Vue中用于绑定点击事件处理器的指令。在示例中，@click被用在了td元素和tr元素上，这展示了如何在不同级别的HTML元素上绑定点击事件。在事件处理器中，可以通过事件对象访问到被点击的元素，或者通过...
vue v-on:click传递动态参数的步骤
10-14
在具体实现时，我们首先在Vue实例的data属性中定义好数据结构和方法，然后在模板中通过v-for指令渲染这些数据，并在每个元素上绑定点击事件： ```html <div v-for="item in items"> <button v-on:click="upHref($...
详解vue.js的事件处理器v-on:click
10-19
`v-on`指令也可以与Vue的表达式配合使用，动态绑定事件处理函数： ```html <button v-on:click="handleClick(user.id)">Delete ``` 在上面的例子中，`handleClick`方法会接收到`user.id`作为参数。 ### 5. 内联...
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> 点击当前行文本 li2 li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) { //获取点击对象 var el = event.currentTarget; al
vue基础之事件v-onclick=”函数”用法示例
12-01
本文实例讲述了vue基础之事件v-onclick=函数用法。分享给大家供大家参考，具体如下： v-on:click/mouseout/mouseover/dblclick/mousedown….. 事件: v-on:click=”函数” v-on:click/mouseout/mouseover/dblclick/mousedown….. new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} }
vue学习：v-on 绑定HTML事件
daokoi的博客
03-22 325
vue学习：v-on 绑定HTML事件 绑定单击事件 v-on:click="…“或者@click=”…"，代码如下 <div id="app"> <!-- 事件中直接写js片段 --> <button v-on:click="num++">点赞</button> <!-- 事件指定一个回调函数，必须是Vue实例中定义的函数--> <button @click="cancle">取消</b
vue点击事件
liuarmyliu的博客
04-01 5495
vue点击事件 在写组件过程中经常会用到点击事件 可以在组件中绑定@click="你的方法名字" 如果想要获得点击的事件 可以传参数 $event 如果想获得当前该事件绑定的元素 在你的方法里写 e.currentTarget即可 ...
vue绑定事件
bingmoujs的博客
03-17 5187
3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行。
如何在Vue模板中绑定事件？
2301_77795034的博客
06-05 2112
如果你使用的是addEventListener()方法注册的事件处理程序，你可以在需要阻止事件的传递的事件处理程序中调用event.preventDefault()或event.stopPropagation()来达到同样的效果。如果你在一个非顶层元素上注册了一个事件处理程序（比如一个button元素），并且你想在这个元素上使用event.preventDefault()或event.stopPropagation()来阻止事件的传递，你必须在这个元素上注册事件处理程序而不是在它的父元素上注册。
【vue.js】绑定click事件
weixin_33851604的博客
04-14 361
 
如何给VUE 里的button绑定事件？@click=“btnclicked“
Kp0fS的草稿纸
09-09 3012
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Vue App 3.0"/> By @aaaa </div> <div class="home"> <h4>Username : <input type.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学亮编程手记

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值