V-on说明

最新推荐文章于 2024-03-23 11:46:42 发布
最新推荐文章于 2024-03-23 11:46:42 发布
阅读量268 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44231864/article/details/115337396
版权

v-on

  • 为元素绑定事件
  • methods和el等平级
  • on做到在页面上修改数据，this方法用于追加
  • 指令可以简写为@
  • 绑定的方法定义在methods里
  • 事件绑定的方法写成函数调用的形式@
  • 定义事件方法时需要定义形参来接收（p1,p2）
  • .prevent取消默认行为
  • .stop阻止事件冒泡
  • .capture 捕获事件（可以从外到里）
  • .self只有点击自身才会触发的事件（只会阻止自己这层的冒泡）
  • .once只能触发一次
  • 事件的后面更上.修饰符对事件进行限制（keyup.enter当回车抬起时触发）
浮生若梦_为欢几何_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-on的用法
我有一个梦的博客
06-28 1万+
说明 今天将介绍一下vue.js中的指令v-on的用法。 用法 v-on是用来给目标元素绑定事件的，事件的类型由参数决定。接下来，将举一个v-on用法的小例子。代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
Vue自定义指令实现v-on及v-model
lightning_1的博客
12-02 1786
我们来模仿v-on和v-model实现简易的v-on和v-model，带你彻底理解自定义指令的使用，运行前请先引入vue2.x
vue快速入门学习笔记（一）v-text v-html v-on
自救 唯有自强
07-09 2121
问就是工作需要！快速入门！可以看到div标签内的写法和jQuery开发差不太多 script标签内部，先用el挂载app标签，再给同名变量message赋值 上面是单个变量赋值，多个也可以哦~ 注意，如果要对静态的文本进行动态替换（静态文本动态文本结合展示），需要使用双大括号的写法： 这三种标签的写法都可以拼接字符串哦！ 可以看到，v-html标签和v-text标签的区别就在于 v-html可以解析出超链接（a href=‘www.cxxxx’），有一定前端开发基础的同学对这个应该不陌生。 这也说明
Vue中的emit、on和v-on
qq_38722097的博客
03-07 2369
由于本人才疏学浅本文章参考了诸多大神的想法，会在文末贴上原文地址 一. $on &amp;&amp; $ emit $emit(eventName, [...args])：触发事件 $on(eventName, callBack)：监听事件 如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派($emit)男人做事，而男人则一直监听($on)着女士的指派($...
Vue源码阅读（24）：v-on 指令的源码解析
f18855666661的博客
08-30 2660
今天讲讲 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和event
weixin_43288858的博客
03-23 1330
事件处理：v-on 完整格式： v-on:事件名=“函数名” 或 v-on:事件名=“函数名(参数……)” 缩写格式： @事件名=“函数名” 或 @事件名=“函数名(参数……)” 注意： @ 后面没有冒号 event ：函数中的默认形参，代表原生 DOM 事件 当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入 作用：用于监听 DOM 事件 v-on:cli...
vue中的$on，$emit，v-on 三者关系
热门推荐
weixin_43798490的博客
11-26 2万+
on，on，on，emit，v-on 三者关系 每个 Vue 实例都实现了事件接口： 使用 $on(eventName) 监听事件 使用 emit(eventName)触发事件如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派(emit(eventName) 触发事件 如果把Vue看成一个家庭（相当于一个单独的components)，女主人一直在家里指派(emi...
vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听
qq_27009517的博客
08-31 2205
vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 例如下面的层级关系 <top> <center> <bottom> </bottom> </center> &lt
在WebStorm中使用Vue的v-bind，v-on等内置指令时报命名空间的错误
WinstonLau的博客
09-26 5133
报错详情： Namespace 'v-bind' is not bound、Namespace 'v-on' is not bound 等 问题说明： 出现这个错误不是代码本身的问题，而是 WebStorm 这个编辑器的问题，因为 WebStorm 不认识这个名字 【注意】博主曾通过一个简单的例子测试过这个...
Vue：v-on中出现Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘push’）”
qq_55872579的博客
08-23 2498
TypeError: Cannot read properties of undefined (reading ‘push’
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9223
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
Vue2/3 - 报错Error in v-on handler: ReferenceError: Cannot access ‘x‘ before initialization“ found in
最新发布
高级前端工程师
03-23 2445
vue2，vue3，报错解决方法，浏览器控制台出现错误，报红，vue2报错，vue3报错，vue报错怎么解决，[Vue warn]: Error in v-on handler: "ReferenceError: Cannot access 'x' before initialization" found in，有什么解决方法，一直无法解决怎么办，vue错误警告该怎么处理，vue浏览器报错，vue控制台错误处理，详细解决方案，vue项目出现报错，vue报ReferenceError: Cannot acce
Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console
QAQ
02-17 3588
一.指令 什么是指令？ 指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。 二、v-text和v-html 使用v-text和v-html指令来替代 {{}} 说明： v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出 v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染vue_day1/03_v-textandv-html.html： <!DOCTYPE html> <ht
vue报错：Component template should contain exactly one root element. If you are using v-if on.....
qq_41261490的博客
07-29 1193
今天在写项目的时候遇到的问题： 代码如下： <template> <div class = "a">{{time}}</div> <test-component></test-component> </template> 报错如下： 意思是说：组件模板应只包含一个根元素。如果在多个元素上使用v...
Vue虚拟DOM原理及面试题（笔记）
weixin_44231864的博客
03-27 6056
Vue虚拟DOM原理及面试题（笔记） 面试题：请你阐述一下对vue虚拟dom的理解 什么是虚拟dom？ 虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树 为什么需要虚拟dom？ 在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的创建、更新、插入
Vue的diff算法（双指针）
weixin_44231864的博客
03-29 1701
面试题：请阐述vue的diff算法 参考回答： 当组件创建和更新时，vue均会执行内部的update函数，该函数使用render函数生成的虚拟dom树，将新旧两树进行对比，找到差异点，最终更新到真实dom 对比差异的过程叫diff，vue在内部通过一个叫patch的函数完成该过程 在对比时，vue采用深度优先、同层比较的方式进行比对。 在判断两个节点是否相同时，vue是通过虚拟节点的key和tag来进行判断的 具体来说，首先对根节点进行对比，如果相同则将旧节点关联的真实dom的挂到新节点上，然后根据需要更.
Vue性能优化（笔记版）
weixin_44231864的博客
03-30 248
使用key 对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素 使用冻结的对象 冻结的对象不会被响应化 使用函数式组件 参见函数式组件 使用计算属性 如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们 非实时绑定的表单项 当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。 特别是当用户改变表单项时，页面有一些动画正在
Node（后端）中的MVC与前端中MVVM之间的区别与反馈验证
weixin_44231864的博客
03-30 219
后端MVC： MVVM（即框外View）:VM是MVVM思想的核心；VM是M和V之间的调度者 M中保存的是页面中单独的页面 VM是调度者，分割了M和V V就是每个页面中的HTML结构 el挂载点 Vue 反馈 验证码机制：后台随机生成【后端认为前端会被伪造】 后端调用相关绘图第三方库，或（PHP,.NET,JAVA）系统核心绘图类库进行图片绘制 绘制的随机数字字母，都是后端预先定义 将绘制好的图片URl地址通过网络发送给客户端，客户端用img标签引用验证码地址 后端绘制完验证码后，生成的字母不能抛弃
v-on:后可以加哪些事件，请分别举详例具体说明
04-13
v-on:后可以加很多不同的事件，具体取决于应用程序需要的功能。以下是一些常见的事件： 1. click：当用户单击一个元素时触发，如按钮或链接。例：v-on:click="handleClick" 2. input：当用户在文本输入框中输入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值