v-on事件监听

于 2022-04-24 08:30:17 发布
阅读量584 收藏 3
点赞数 1
分类专栏： Vue 文章标签： 前端框架 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61541602/article/details/124374286
版权

v-on用于监听用户发生的事件，例如点击、拖拽等

1.v-on基本使用与语法

   作用: 绑定事件监听器

   缩写(语法糖): @

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h2>计数器: {
  {message}}</h2>
        <!-- 普通写法 -->
		<button @click="add">+</button>
        <!-- 语法糖写法 -->
		<button v-on:click="decrement">-</button>
	</div>
	<script src="../vue.js"></script>
	<script>
		const app = new Vue({
			el:'#app',
			data: {
				message: 0
			},
			methods: {
				ad
最低0.47元/天 解锁文章
爱与永恒369
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
10. vue常用指令 v-on 给元素绑定监听事件
人无远虑,必有近忧.
07-05 785
文章目录1. v-on指令是什么2. v-on 指令的 用法2.1 v-on指令基本格式2.2 v-on:click.stop 阻止事件冒泡事件冒泡阻止事件冒泡2.3 v-on:click.self 只有当前元素自身触发回调函数才会执行2.4 v-on:click.capture 事件捕获2.5 v-on:click.prevent 阻止默认事件2.6 v-on:click.once 只触发一次回调3. v-on指令的注意点3.1 如果回调函数不需要传递参数,那么可以把()去掉3.2 如果回调函数
V-on指令的使用
ADC06的博客
03-15 5198
一.V-on指令 (一) .1. v-on 的作用 用来给元素注册点击事件的 2.v-on 的语法 (1).v_on:事件名 ="事件函数" (2).v-on:click 可以简写 @click (3).v-on:mouseenter 可以简写 @mouseenter 3.v-on的注意点 (1).注册事件需要一个事件的函数 (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法 （二）.案例： 代码部分如下: <div ...
传说中 VUE 的“语法糖”到底是啥？
前端人的博客
09-24 5416
一、什么是语法糖？ 语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。 使用语法糖可以简化代码，更便于程序员开发。 二、VUE中语法糖有哪些？ 1、最常见的语法糖 v-model 使用 v-model 可以实现数据双向绑定，但是如何实现的呢？ v
v-on 基本使用和语法糖
weixin_45677987的博客
02-23 1089
1： const 关键字： 在很多语言中已经存在， 比如C 语言/ C++ 中， 主要将某个变量修饰为常量。 在js 中也是如此， 使用const 修饰的标识符为常量， 不可以再次赋值。 2： 什么时候使用const 关键字呢？ 当我们修饰标识符不会再次被赋值时， 就可以使用const 关键字来保证数据的安全性。 建议： 在es6 中开发中， 优先使用const 关键字， 只要需要改变某一个标识符的时候才使用let 关键字。 3： const 注意一： const a = 20; a...
vue指令之v-on
jh1906338271的博客
03-11 2218
1.v-on的基本使用 点击加号即可加加1，点击减号就会减一。 v-on的作用是用来事件监听的，是用来绑定一些事件的。绑定的一些事件就在自己的方法里面定义，定义完之后调用函数就行了 v-on的简写是@。 2.v-on的参数问题 在事件定义时，写方法省略了小括号，但是方法本身是需要一个参数的，这个时候，Vue会默认将浏览器生成的event事件对象作为参数传入到方法，而且方法定义时，我们需要ev...
etcd事件监听
不求大道出迷途，纵负贤才岂丈夫
09-26 4286
    etcd是CoreOS开发的一个高可用的键值存储系统，主要用于共享配置和服务发现。它使用Go语言编写，并通过Raft一致性算法处理日志复制以保证强一致性。etcd目前的最新版本是2.2.0。     和zookeeper的二进制接口不同，它提供了HTTP/JSON的rest api接口，所以对使用它的客户端来说是很友好的，几乎每种编程语言都有较成熟的http client开发包，基于...
详解vue中v-on事件监听指令的基本用法
11-20
Vue.js 是一款流行的前端JavaScript框架，它提供了许多方便的功能，其中`v-on`指令是用于事件监听的关键组件。本文将详细解析Vue中`v-on`事件监听指令的基本用法，并通过一个简单的计数器示例进行说明。 1. **基本...
vue v-on监听事件详解
12-29
在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。 <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> [removed][removed...
Vue 事件监听(v-on的基本使用、参数传递、修饰词)
weixin_44289916的博客
11-14 5638
1.1 v-on的基本使用 1.2 v-on的参数传递 1.3 v-on的修饰词 1.1 v-on的基本使用 ​ 在前面的计数器案例中使用了v-on:click监听单击事件。这里在回顾一下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n...
vue的事件监听，指令v-on
qq_45700583的博客
10-12 1264
1.事件监听： 在前端开发中，我们需要经常和用户交互。 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等 2.在Vue中使用v-on指令来监听事件 指令v-on介绍： 作用：绑定事件监听器 缩写：@ 预期：Function | Inline Statement | Object 参数：event ...
Vue学习（五）——v-on指令
weixin_45927758的博客
10-05 600
1.v-on语法糖 v-on:click="函数名"，可以简写为@click="函数名"。 2.v-on事件监听传参 其他情况下，如果函数需要参数，但是我们并没有传参，那么该参数就是undefined类型，但是在Vue中，我们在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的（并且只需要一个参数），这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入方法中，比如鼠标点击的数据。 如果我们想要在有参数的同时传入event事件对象，我们可以传入：$event,这样就可以得到浏
指令v-on
yh95926的博客
11-03 362
指令-v-on介绍 1.什么是v-on指令? v-on指令专门用于给元素绑定监听事件 2.v-on指令格式 v-on:事件名称="回调函数名称" @事件名称="回调函数名称" 3.v-on注意点: v-on绑定的事件被触发之后, 会去Vue实例对象的methods中查找对应的回调函数 指令-v-on修饰符 1.v-on修饰符 在事件中有很多东西需要我们处理, 例如事件冒泡,事件捕获, 阻止默认行为等 那么在
Vue知识点总结(4)——v-on（超级详细）
CreatorRay的博客
12-12 1141
v-on指令的作用其实就是绑定事件。 事件是JavaScript的灵魂，事件驱动着JavaScript程序的执行。 vue为我们提供了v-on指令用于绑定事件。 <button v-on:click="add">加分</button> <button @click="reduce">减分</button> 这是两种基本的语法格式。 其中的add和reduce必须在vue实例中的methods中提前声明好。 vue语法具有很强的灵活性，其实我们可以将事件写成动
Vue知识整理，让你快速入门Vue.js：03_4.本地应用：v-on指令（事件绑定）、v-on指令简写、methods方法定义、this关键字修改数据
鲁迷那的专栏—坚持实践后再写出来！
03-22 761
目录 一、v-on指令语法介绍 1、v-on指令的作用 2、那么方法写在哪里呢？ 3、如何绑定事件呢？ 4、一种更简单的写法：把v-on 替换成 @ 5、实例测试验证 （1）实例代码 （2）效果展示 二、this关键字，修改数据 1、不用再操作dom元素 2、this关键字 3、实例测试验证 （1）实例代码 （2）效果展示 三、内容-总结 上一篇文章我们介绍了v-......
v-on修饰符使用
vfjcgg的博客
06-07 236
v-on修饰符使用 在某些情况下，我们拿到的event的目的可能是进行一些事件处理。 Vue提供了修饰符来帮助我们方便的处理一些事件： .stop-调用event.stopPropagtion(). <div id="app"> <!-- 1 .stop修饰符的使用 --> <div @click="divClick"> aaaaaaa <button @click.stop="btnC
v-on的使用
lzh的博客
02-04 648
v-on基础 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用 下面的代码中，我们使用了v-on:click="counter++” <div id="app"> <h2>{{counter}}</h2> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> </di
绑定事件监听 v-on指令与其参数传递和修饰符
qiutian24的博客
10-04 475
v-on 1.基础 官方文档链接 https://cn.vuejs.org/v2/api/#v-on 作用：绑定事件监听。 事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 预期：Function | Inline Statement | Object 语法： <div id="app"> <!--eventA()是自己定义的方法--> <button v-on:click="eventA()">A1
【前端框架学习】使用v-on定义Vue中的事件
Jerry‘s word
01-13 383
1.使用传统js的方式定义事件 传统的js中通常会操作DOM来定义事件。 <div id="app"> <input type="button" id='btn'> </div> <script> //传统js方式定义事件 document.getElementById('btn').onclick = function(){ alert('hello,world!'); } </script&
v-on怎么监听defineEmits()组件定义自定义事件
最新发布
06-11
要监听`defineEmits()`定义的组件自定义事件，你可以像监听普通事件一样使用`v-on`指令来监听自定义事件。只需将自定义事件名称作为事件名称传递给`v-on`指令即可。 例如，假设我们在组件中使用`defineEmits()`定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值