vue——v-on

最新推荐文章于 2023-11-21 16:08:48 发布
最新推荐文章于 2023-11-21 16:08:48 发布
阅读量134 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/he3236220/article/details/107818620
版权

函数

v-on 缩写@

  1. 当abc()没有传参数的时候，可以简写成abc
    在这里插入图片描述
  2. acb(name)
  • 没有传的时候abc(),name是undefined
  • 直接写abc时，name返回当前事件even内容
    在这里插入图片描述
    结果：
    在这里插入图片描述
  1. abc(name,event)
  • 写aa时，name是undefined，event是undefined；
  • 写aa，name是当前的event对象，event是undefined；
  • aa(‘aa’)，name是aa，event是undefined；
  • aa(‘aa’,$event),name是aa,event是当前的event对象

在这里插入图片描述
结果：
在这里插入图片描述

修饰符

  • .stop停止冒泡
  • .prevent 阻止默认事件
  • keyup.enter 监听enter键（其他同理）
  • .once 只触发一次
没错就是我哎呀
关注
专栏目录
Vue语法 事件监听(v-on)
富有知识的小窝
07-21 1233
我们监听按键的使用，我们将上一个监听输入的案例，变成按回车抬起后才输出内容。点击按钮我们发现并没有什么改变，我们并没有把函数与我们的按钮进行绑定。刷新启动过的项目页面，再点击按钮可以发现可以改变计数。我们刷新启动的项目页面，在输入框输入内容并按下。在网站中存在很多按钮，点击会触发不同的功能。我们编写一个计数器，更好的理解监听事件。我们刷新启动的项目页面，在输入框输入内容。我们可以看到当我们按下回车键输出了内容。中怎么实现这一功能呢，使用到了。绑定函数时，如果我们没有写。中，我们编写如下代码。......
vue——v-on指令的常用修饰符
weixin_44649210的博客
11-02 951
stop 作用： 阻止事件冒泡 <body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({
Vue v-bind、v-on实现v-model原理
u010234868的专栏
08-28 593
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id=".
vue里面v-on的使用
yamili的博客
03-23 5596
首先我们看看v-on的简单使用： 按钮1是将事件写在表达式里，按钮2是将事件添加到methods中定义的函数。 v-on的语法糖写法： v-on的参数： 当通过methods中定义的方法，以供@cilck调用时，需要注意参数问题。 情况一：如果该方法不需要额外参数，那么方法后的()可以不加，如果方法本身有一个参数没那么会默认将原生事件event参数传递进去。 情况二：如果需要同时掺入某个参数...
重学Vue——v-model用v-bind和v-on的简易实现
qq_45593068的博客
03-01 433
v-model用v-bind和v-on的简易实现 <body> <div id="app"> <div>{{ msg }}</div> <input type="text" :value="msg" @input="input" ref="input"> </div> <script src...
Vue中的v-on
m0_72694993的博客
09-05 5414
1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码 即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
Vue——04-02v-model的使用原理、结合radio、checkbox、checkbox（多选）、checked（值的绑定）、select以及修饰符的使
郊眠寺
06-24 868
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。先看一下简单的v-model使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NK3t7FfW-1656055213426)(https://juejin.cn/ “点击并拖拽以移动”)]效果如下：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E7eFOh0A-1656055213427)(
Vue事件绑定（v-on用法）
qq_65715980的博客
07-28 4159
ES6事件绑定，v-on的基本使用，v-on的参数传递，v-on的修饰词，阻止冒泡事件，添加事件监听器时使用事件捕获模式。 capture只当在 event.target 是当前元素自身时触发处理函数。 prevent点击事件将只会触发一次。 once .passive 修饰符尤其能够提升移动端的性能。 .passive.........
Vue学习笔记 —— v-model
weixin_43340295的博客
08-29 166
v-model vue中、这类表单元素，使用v-model实现这些标签数据的双向绑定，vue会根据控件类型自动选取正确的方法更新元素 v-mode的本质是一个语法糖。例： <input v-model="test"> 等同于： <input :value="test" @input="test = $event.target.value"> 其中，@input是对输入事件的一个监听，:value="test"是将数据放入到input。 那么这句代码的意思就是，先将变量test绑定
vue第一天笔记05——v-bind
lqh的博客
08-17 214
<!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>D.
Vue源码阅读（24）：v-on 指令的源码解析
f18855666661的博客
08-30 3003
今天讲讲 v-on 指令的底层实现原理。在 Vue 中，v-on 指令有两种用法，第一种是将 v-on 指令使用在自定义组件上，例如：<my-component v-on:myEvent="doSomething"></my-component>，使用 v-on 指令监听了组件的 myEvent 事件，回调函数是doSomething，当在组件中执行 this.$emit('myEvent') 时，会触发执行 doSomething 函数，有没有发现这和我上一篇文章中的 vm.$o.
vue(事件处理：v-on)
热门推荐
qq_42238554的博客
01-22 2万+
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
Vue指令之v-on
俊而不逊的博客
12-07 1万+
Vue指令之v-on 目录 Vue指令之v-on 1.v-on怎么使用？ 2.事件名到底写什么呢？ 3.方法名在哪里定义呢？ 4.v-on的简写 5.访问data中的数据,通过this关键字 6.总结 v-on指令是事件绑定指令，当用户需要点击，按下键盘，滚动鼠标等操作时，想要添加一些自己的逻辑处理时，就可以为特定的元素绑定一些特定的事件。 我们先在被vue实例挂载的标签div中，放入一个按钮为input标签，在标签内部写入v-on指令，冒号(:)后面就是事件名，等号(=)后面就是需..
vue指令之v-on
duansamve的博客
04-07 1842
main.js：var app = new Vue({ el: '#app', methods: { onClick: function(){ console.log("clicked!"); }, onEnter: function(){ console.log("mouse ente...
Vue自定义指令实现v-on及v-model
lightning_1的博客
12-02 1822
我们来模仿v-on和v-model实现简易的v-on和v-model，带你彻底理解自定义指令的使用，运行前请先引入vue2.x
vue源码解析：vue事件方法之$on方法的实现原理
lee前端技术站
07-12 6943
vue中事件方法一共就四个，挂载在vue实例上的$on用来监听自定义事件时，通常会用到，那么$on的内部实现原理是什么呢？下面我们来详细说下$on: vm.$on( event, callback ) 参数： {string | Array<string>} event(数组只在 2.2.0+ 中支持) {Function} callback 作用： 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 事例： vm.$o.
wifi打印机打印（二维码，条形码等）uniapp
he3236220的博客
01-16 3955
【代码】wifi打印机打印（二维码，条形码等）
v-charts使用，报错找不到 echarts/lib/visual/dataColor
he3236220的博客
04-02 3532
原因是v-charts里面的echarts-liquidfill的版本是2.0.2； echarts里面的echarts-liquidfill版本是2.0.6； 解决办法： npm i v-charts echarts@4.9.0 -S 下面是v-charts的具体使用 安装 npm i v-charts echarts@4.9.0 -S 引用 这里可以按需引入，也可以完整引入（目前是引用的折线图） import VeLine from "v-charts/lib/line.common";
https想访问本地部署的http://localhost接口
最新发布
he3236220的博客
11-21 2549
网址是https的，想访问java本地启的一个程序接口http://localhost:8089。
Vue3与百度地图WebGL融合——vue-bmap-gl@next地图组件升级
资源摘要信息:"vue-bmap-gl是一套支持Vue2、Vue3和百度地图WebGL版本的地图组件，主要适配Vue3，同时调整事件绑定形式，调整为使用v-on进行事件绑定。支持全量导入、按需导入和自动导入。对于Vue2的用户，可以使用0....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值