vue新学习 02 vue命令v-model,数据代理(作用域和作用域链),事件,监听,条件渲染,计算属性(也就是把操作属性的语句放到vue实例中)

news2024/11/18 21:38:09

双向绑定用命令v-model:
v-bind的命令是单项去绑定data中的相关属性,此时的data是真正的data,并没有用变量声明的方式去接收vue实例对象,也就是例如用const vm = new Vue({})。而是直接就采用了new Vue({})这样子的形式,(v-bind和v-model在这个例子中都是如此,所以现在并没有数据代理的问题)所以此时数据的来源是vue实例对象,不是以后所采用的数据代理模式(也就是变量vm的数据来源)。

v-model通常是和输入元素进行合作的,这一部分通常是表单标签,例如input,checkbox等等,功能是修改输入元素的值,会去修改相应的vue实例化的对象中的data中的相关属性。
例如:
在这里插入图片描述

结果:
在这里插入图片描述
用v-model来与不是输出标签的标签进行合作:
在这里插入图片描述
结果:
在这里插入图片描述
数据代理:
首先是用Object.defineProperty方法,这个方法在以后的vue知识点中都是很重要的,因为这个是给对象额外(也就是在规划之外的时候添加对象的属性值)添加属性并且获取和赋值。
Object.defineProperty(参数1,参数2,参数3)
用法:参数1是对象名,参数2是需要添加的属性名,参数三是一个配置对象,是对这个添加的属性进行配置,包括value值,可遍历,可写,可删除等等
在这里插入图片描述
在这里插入图片描述

Object.defineProperty()有两个重要的函数,用于对新增属性的获取和赋值。
对新增属性的获取:get():
设置新增的属性:set():
在这里插入图片描述
注意:js的作用链和作用域
作用域:在js中,作用域一般有三个,全局作用域,函数作用域和块级作用域。

块级作用域:就好比是一个函数的一个功能块,就是if条件块,for循环块,在这些块中声明的变量是不可以在出了这些块后还可以继续用的。
在这里插入图片描述
在这里插入图片描述

函数作用域:和java中的函数作用域一样,在这个函数中声明的变量只能在这个函数中去用,出了这个函数就会无法调用。
在这里插入图片描述

全局作用域:可以认为是java中的静态资源,static修饰的,这个是在这个html文件都可以去用的。
在这里插入图片描述

作用域链:在js中,
在这里插入图片描述
所谓的作用域链就是,在函数嵌套的情况下,变量的值会从内部开始去寻找,在内部找不到就会向这个寻找的函数的上一级函数去寻找,一直找到相符合条件的变量。

箭头函数:主要是看this这个问题。

在这里插入图片描述

所以vue实例对象中如何去用箭头函数呢?
在这里插入图片描述

vue的数据代理:
用的大概是const vm=new Vue({})。
这个时候vm就是数据代理,所谓的数据代理,就是一个数据对象A可以操作另一个数据对象B,那么这个对象A就是对象B的数据代理。
例子:

在这里插入图片描述

看结果:
左上是vue实例原型
左下的是vue实例原型的数据代理对象,vm。
右下的是vm的进一步升级,此时也就是完整版的数据代理对象vm。
vm中的属性name,address都是通过Object.defineProperty这个方法的get()和set()方法去获取和修改vm._data中的name和address属性。
在这里插入图片描述

其中vm在控制台运行情况如下:
address和name都是冒号右边是(…)

address=(...)
name=(...)

这表示用了get和set方法
在这里插入图片描述

vue事件:
01.绑定事件和事件的参数
js中有很多的事件,比如说点击事件,键盘keydown和keyup事件等等。
在vue中如何去实现事件功能?用命令v-on去绑定相关的事件,而事件的功能在vue的methods属性中去完成。
比如说点击事件:

在这里插入图片描述
v-on:click=“方法名”,这里的方法名是showInfo1,showInfo2。参数event是一个默认的参数,也就是说每一个在methods中去声明的方法参数中都带有event(无论是无参还是有参方法声明的时候也可以不写event)。但是如果你需要去用event参数,此时方法不是无参方法的话(如果有参数例如number),这个有明显参数的方法,需要添加关键字$event在vue语句模版中。
在这里插入图片描述
结果:
在这里插入图片描述
02.事件的修饰符问题
js中特有的事件冒泡问题?
在这里插入图片描述
dom树:
在这里插入图片描述
如果你想去阻止事件冒泡的发生:
vue中有一个修饰符stop,在内部去写stop,因为事件冒泡顺序是从内部dom中去执行的。
在这里插入图片描述

如果你想去阻止事件默认事件的发生:
如果事件绑定的标签是一个超链接的标签<a href="www.hao123.com">,你不想在点击事件后会自动跳转到hao123页面,这样子需要在事件中去添加一个修饰符prevent(在触发事件类型的后面写)用来阻止默认事件的发生,此时的默认事件是超链接的点击后自动跳转。
在这里插入图片描述

如果你想去让事件发生一次:比如说按钮按第一次就会弹出对话框,其他的时候不会弹出对话框。
在这里插入图片描述

如果你想去让事件发生的顺序是捕获模式,而不是默认的冒泡模式:
默认的冒泡模式:
在这里插入图片描述
相关的事件:
在这里插入图片描述

结果:
在这里插入图片描述
这里是冒泡的顺序。
而capture的顺序是:
和冒泡的顺序相反的,事件的获取顺序是,先去捕获,而后冒泡执行。
添加修饰符capture,在最外层:
在这里插入图片描述

异步执行命令的时候用passvie
比如说wheel事件,这个是鼠标滚动事件:如果wheel事件绑定的函数,执行的代码过多的话,就会产生事件的长时间等待而后去完成鼠标的滚动效果。passvie的作用是无需等待回调函数的执行完成,就会直接去执行事件。
代码:
在这里插入图片描述

相关的事件:
在这里插入图片描述

事件修饰符的总结:
在这里插入图片描述
键盘点击事件:
在这里插入图片描述
如果你想指定某个特殊的键盘中的按钮,就需要在事件类型后添加别名在这里插入图片描述
这里存在一个问题,系统设置的别名只有几个,但是你想要添加的按钮数量却是很多,那么就需要自定义别名:
在这里插入图片描述
这里的keycodes表示的按钮代表的值,键盘上的每一个按钮都会代表一个相关的值。

如果你想要全部的按钮都可以实现相关的功能的话,就不添加别名。

事件全部总结:
在这里插入图片描述
第三条.vue中去使用箭头函数需要用一般的函数来包装一下,这样子this的志向才会是vue这个实例

监听:
vue中的一个属性watch

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/802871.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

戴琼海院士——人工智能正深刻地改变这个时代

原创 | 文 BFT机器人 2023世界人工智能大会将继续发挥“科技风向标、应用展示台、产业加速器、治理议事厅”的重要作用&#xff0c;打造“会议论坛、展览展示、评奖赛事、应用体验”四大核心内容&#xff0c;汇聚世界顶级科学家、企业家、政府官员、专家学者、国际组织、投资人…

Ssm+Mysql实现的Java Web酒店管理项目源码附带视频指导运行教程及需求文档

由ssmmysql实现的一款酒店管理系统&#xff0c;该系统实现了酒店客房预订管理的基本功能&#xff0c;还增加了图表显示统计结果的功能有需要的可以联系我分享给大家&#xff0c;下面是运行后的一些截图&#xff1a;

【密码学】四、SM4分组密码算法

SM4分组密码算法 1、概述1.1初始变量算法1.2密钥扩展算法1.3轮函数F1.3.1合成置换T1.3.2S盒 2、算法设计原理2.1非平衡Feistel网络2.2T变换2.2.1非线性变换τ2.2.2线性变换L2.2.3基础置换 2.3密钥扩展算法的设计 1、概述 SM4分组密码算法是一种迭代分组密码算法&#xff0c;采…

使用requests库发送http请求

1. get请求 # 导入requests库 import requests# 此处使用的接口地址为zrlog系统后台登录首页的地址 url "http://172.16.171.129/admin/login"# 通过requests库发送get请求 r requests.get(url url)# 以文本的方式返回响应内容 print(r.text)# 返回HTTP协议状态码…

qssh使用

到官网下载qssh的源码QSsh-botan-1&#xff0c;使用qtcreator打开后&#xff0c;直接编译&#xff0c;即可得到qssh的库 头文件将QSsh-botan-1\src\libs\ssh目录下的.h文件拷到include文件夹下&#xff0c;即为库头文件。 qssh有个问题&#xff0c;如果你将qssh的类放在子线程…

定时发朋友圈怎么设置?

目前微信作为最大的社交平台之一&#xff0c;吸引了众多使用者。你是否听过有些朋友感叹这么多微信号&#xff0c;需要每天手动发布朋友圈&#xff0c;任务很繁琐呢&#xff1f;是否希望可以事先设置好定时发送的功能&#xff0c;让朋友圈自动更新&#xff0c;省去手动发送的麻…

sqlserver row _number函数的运用

sql语句&#xff1a; select dept_id,stcd,row_number() over (partition by dept_id ORDER BY STCD) as 排序 from tb_station_config 这段代码是使用ROW_NUMBER()函数结合窗口函数的语法&#xff0c;用于给结果集中的每一行分配一个唯一的序号。 具体解释如下&#xff1a; R…

uniapp 小程序实时且持续获取定位信息(全局设置一次)(单页面监听定位改变)(不采用定时器)

本篇文章实现了uniapp 微信小程序实时获取定位信息,小程序打开即可持续获取定位信息, 位置更新也会触发相关自定义事件 优点 只设置一次不采用定时器的方式无需多个页面调用单独页面若想获取当前位置是否变化 可单独设置监听,并调用不同逻辑事件 原理: 采用uniapp推出的: un…

基于深度强化学习的DQN模型实现自动玩俄罗斯方块游戏(附详细代码讲解)

一、DQN&#xff08;Deep Q-Network&#xff09;方法概述 DQN&#xff08;Deep Q-Network&#xff09;是一种强化学习方法&#xff0c;通过结合Q-learning算法和深度神经网络来解决强化学习问题。它是深度强化学习的里程碑之一&#xff0c;由DeepMind在2013年提出&#xff0c;被…

【SQL Server】DBCC CHECKDB只是一个数据库维护命令吗?

日期&#xff1a;2023年7月27日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

【数据仓库】Apache Hive初体验

为什么使用Hive&#xff1f; 使用Hadoop MapReduce直接处理数据所面临的问题&#xff1a; 人员学习成本太高需要掌握ava语言MapReduce实现&#xff0c;复杂查询逻辑开发难度太大&#xff01; 1&#xff0c;使用Hive处理数据的好处操作接口采用类SQL语法&#xff0c;提供快速开发…

MUR2080CT- ASEMI二极管的特性和应用

编辑-Z 本文将详细介绍MUR2080CT二极管的特性和应用。首先&#xff0c;将介绍MUR2080CT二极管的基本结构和工作原理。然后&#xff0c;将探讨MUR2080CT二极管的特性&#xff0c;包括正向电压降、反向漏电流和反向恢复时间等。接下来&#xff0c;将介绍MUR2080CT二极管在电源、…

linux环境安装mysql数据库

一&#xff1a;查看是否自带mariadb数据库 命令&#xff1a;rpm -qa | grep mariadb 如果自带数据库则卸载掉重新安装 命令&#xff1a;yum remove mariadb-connector-c-3.1.11-2.el8_3.x86_64 二&#xff1a;将压缩文件上传到/user/local/mysql文件夹 或者直接下载 命令&a…

18款iPad绘画软件推荐!iPad必备生产力工具

每当提起iPad&#xff0c;少不了会听到坊间流传已久的那句话&#xff0c;「买前生产力&#xff0c;买后爱奇艺」&#xff0c;确实有不少奔着生产力入手iPad的人&#xff0c;最终让iPad沦为煲剧神器或泡面盖&#xff0c;但我们没必要因噎废食&#xff0c;因为总有人能克服iPad上…

互联网医院系统源码实现:打造现代化医疗服务平台

摘要 本文将介绍一个基于Python的简化版互联网医院系统的源码实现&#xff0c;主要包含用户注册与登录、医生信息管理、在线预约挂号、在线问诊与咨询、电子病历管理、在线支付与结算等功能。该源码实现仅为示例&#xff0c;实际开发中需要考虑更多的业务逻辑和安全性。 1. …

摄像头m2dock(MAIX-II DOCK)

官方文档地址 https://wiki.sipeed.com/soft/maixpy3/zh/index.html 一、软件准备 1 烧录镜像软件 2 镜像 当前最近版本镜像文件 3 SDFormatter 4 Maixpy IDE 二、SD卡准备 1 格式化SD卡&#xff08;用SDFormatter&#xff09; 2 烧录 3 弹出&#xff0c;插入开发板中 出现…

会议OA项目之待开历史所有会议(使用一个dao方法完成三种会议状态的查询)

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.主要功能点介绍 二.效果演示 三.前端…

多线程(JavaEE初阶系列5)

目录 前言&#xff1a; 1.什么是定时器 2.标准库中的定时器及使用 3.实现定时器 结束语&#xff1a; 前言&#xff1a; 在上一节中小编给大家介绍了多线程中的两个设计模式&#xff0c;单例模式和阻塞式队列模式&#xff0c;在单例模式中又有两种实现方式一种是懒汉模式&a…

小白如何在简单的分布式锁里反复踩坑

背景 为什么要做分布式锁&#xff1f; Java开发就逃不过多线程问题&#xff0c;而对于单个实例&#xff0c;我们可以使用synchronized锁作为基本的线程锁&#xff0c;解决多线程问题&#xff0c;但对于实际项目中集群部署&#xff0c;分布式系统&#xff08;不同的客户端&…

HTML再出发

HTML再出发 注意事项VScode相关排版标签语义化块级元素和行内元素文本标签img标签图片格式超链接 注意事项 VScode相关 vscode必须打开一个文件夹才能使用liveServer&#xff0c;只打开一个文件无法使用liveServer功能。网页编写不标准&#xff0c;缺少head&#xff0c;body等…