Vue的数据代理+事件处理+事件修饰符+键盘事件

最新推荐文章于 2023-07-27 22:47:56 发布

pigpigpi

最新推荐文章于 2023-07-27 22:47:56 发布

阅读量215

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_40733968/article/details/123854406

版权

Vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、回顾Object.defineProperty()方法

1、几个属性

在这里插入图片描述

2、getter和setter（get函数和set函数）

在这里插入图片描述

二、初识Vue

在这里插入图片描述

三、数据代理

1、数据代理的定义

通过obj2去操作x
在这里插入图片描述

在这里插入图片描述

2、vue中的数据代理

1、概览
在这里插入图片描述

2、验证setter

3、数据代理图示

在这里插入图片描述

四、vue中的事件处理

1、点击事件

在这里插入图片描述

2、事件修饰符

在这里插入图片描述

五、键盘事件

1、常用按键

在这里插入图片描述

2、短横线

在这里插入图片描述

3、tab的用法

tab适用于keydown，不适用与keyup
在这里插入图片描述

4、定制按键别名

在这里插入图片描述

六、事件总结

1、修饰符可以连续写
2、系统修饰符后面可以跟一个具体的按键，表明两者一起按下时起作用

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

pigpigpi

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue事件代理

u011150251的博客

03-16

404

vue数据代理

Vue | Vue 核心【模板语法 + 数据绑定 + MVVM模型 + 数据代理 + 事件处理 + 计算属性computed + 监视属性watch + 渲染+收集表单数据+过滤器 + 内置指令】

不爱吃菜的菜菜的博客

07-05

753

官网Vue：一套用于构建用户界面的渐进式 JavaScript框架特点采用组件化模式，提高代码复用率、且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM + 优秀的Diff算法，尽量复用DOM节点。搭建Vue开发环境 vue文件引入关掉Vue控制台提示Vue开发者工具添加到chrome扩展程序里面，就不显示第一个了第二个提示框阻止 vue 在启动时生成生产提示容器的两个作用：区分JS表达式和 JS代码(语句）表达式：一个表达式会产生一

参与评论您还未登录，请先登录后发表或查看评论

vue中事件代理

weixin_34232363的博客

08-26

2708

由于在vue实例内部，this指向了实例本身，所以在编写事件代理的时候，用e.currentTarget引用绑定事件代理的元素，e.target引用事件目标元素。刚刚不注意想用this引用代理元素报错，羞愧~~ 转载于:https://www.cnblogs.com/alan2kat/p/7435051.html...

vue中事件代理的使用

qq_33404590的博客

01-05

1773

vue事件代理

Vue的事件代理

qq_42715869的博客

01-05

2402

vue事件代理使用场景与作用：将事件代理的程序代理到父节点，比如此时要v-for 1w个span标签，不使用代理每个标签都绑定一个click事件，使用代理只在父节点设置点击事件（循环数据量少其实不影响） ...

【Vue】基础（二）数据代理 - 事件处理 - 计算属性 - 监视属性 - 绑定样式

李子木的博客

10-22

623

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写），就是数据代理。y : 200 }这时候提一个需求：我们想要访问obj1中的x的值，但我们最好不要直接去访问obj1,而是想要通过obj2这个代理对象去访问。这时候就可以用方法，给obj2添加上存取描述符(也叫访问器属性，就是getter和setter)示例代码// 当读取obj2的x属性时，get函数（getter）就会被调用，且返回值就是x的值 get() {

vue：数据代理，事件处理，事件修饰符，键盘事件

m0_59588838的博客

10-21

757

为赶项目，火速肝vue第二天

web前端--vue2技术+涵盖多个知识点+适合刚学习vue的小白使用，促进学习

07-14

7. **数据代理**：通过Vue实例`vm`代理`data`对象中的属性，使得可以直接通过`vm`操作数据，方便且直观。 8. **methods中的函数**：避免使用箭头函数，因为这会导致`this`指向错误，应使用普通函数，让`this`自动...

vue——事件处理、事件修饰符、键盘事件

h_jQuery的博客

08-18

362

事件处理 基本使用： 1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名 2.事件的回调需要配置在methods对象中（触发了某个事件，就会调用其回调函数。回调函数：由我们声明创建，但不由我们调用），最终会在vm上显示 3.methods中配置的函数，不要用箭头函数，否则this就不是指向vm（vue实例） 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象 5.@click="函数名"和@click="函数名()"效果一样，但后者可

Vue 事件代理【记录备忘】

weixin_43867432的博客

02-24

212

@click.native="OpenWebSizeDrawer($event)" //父容器加入代理事件 native 表示所有的子事件 // 需要代理的元素加入 data-index index 可以随意取值 :data-index ="value" // 也可以加入属性 id 之类的 :id = "value" // 函数中方法名(e) { let dom = e.target ; let index = dom.dataset.index ; let id = do

Vue数据代理，事件处理，计算属性，监视属性

嘤嘤鸭的博客

07-28

320

Vue数据代理，事件处理，计算属性，监视属性

Vue —— 基础（一）（数据代理、事件处理、键盘事件）

HuoZhiyan 的博客

05-09

905

文章目录一、数据代理1. 回顾 Object.defineProperty 方法2. 数据代理3. vue 中的数据代理二、事件处理1. 事件的基本使用2. 事件修饰符3. prevent: 阻止默认事件（常用）4. stop：阻止事件冒泡（常用）5. once：事件只触发一次(从内到外)（常用）6. capture：使用事件的捕获模式（从外到内）7. self：只有 event.target 是当前操作的元素时才触发事件8. passive：事件的默认行为立即执行，无需等待事件回调执行完毕三、键盘事件1.

Vue中数据代理与事件处理

weixin_60719453的博客

11-30

1703

2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数。4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化。在Vue中的data数据，在其对象中以_data形式存在。

Vue事件委托优化

友人C君的博客

02-16

842

虽然Vue不提倡也很少需要手动生成DOM，但是有时难免需要手动生成新的标签，此时，手动生成的新标签也像原生JS操作DOM一样，不会绑定事件，如以下例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue事件委托</title> ...

【Vue】Vue数据及事件绑定

南栀的博客

02-13

1578

文章目录1. 数据绑定1.1 单向绑定1.1.1 插值绑定1.1.2 v-bind绑定1.2 双向绑定2. 事件绑定与监听2.1 方法及内联处理器2.2 修饰符事件修饰符键值修饰符 1. 数据绑定 1.1 单向绑定把Model绑定到View后，当用JavaScript代码更新Model时，View会自动更新。因此，我们不需要进行额外的DOM操作，只需要进行Model操作就可以实现视图的联动更新。单向绑定的实现过程是：所有数据只保存一份一旦数据变化，就去更新页面(只有data–>DOM，没有D

Vue学习日记（4）数据代理、事件处理、事件修饰符

GZN的博客

11-19

359

Vue中的数据代理

【vue系列-02】vue的核心属性，数据代理，事件

zhenghuishengq的博客

12-23

6284

深入理解vue的数据代理和事件

Vue教程(二)：数据代理和事件处理