vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

25、v-model详解

(1)v-model原理

1)原理:

v-model本质上是一个语法糖,比如:在应用于输入框时,就是value属性与input事件的合写。

2)作用
①数据变,视图变
②视图变,数据变

注:在模版中,$event用于获取时间的形参

3)示例:

(2)表单类组件封装与v-model简化代码

1)父传子:数据应该是父组件props传过来的,v-model拆解绑定数据
2)子传父:监听输入,子传父传值给父组件修改

简言之:利用父子通信实现v-model的效果(子组件不能使用v-model,因为数据是父组件的)

3)示例

初始:

①父传子

效果:

②子传父

初始(续上):

结果:

(3)父组件使用v-model简化代码,实现父组件和子组件数据的双向绑定

1)子组件中:props通过value进行接收,事件触发input

2)父组件中:v-model给组件直接绑数据(:value+@input)

原来:

用v-model:

3)效果(和原来一样,代码用v-model进行简化):

26、sync修饰符

(1)作用:可以实现子组件与父组件数据的双向绑定,简化代码

(2)特点:prop属性名,可以自定义,非固定值value

(3)适用场景:封装弹框类的基础组件,visible属性,true显示,false隐藏

(4)本质::属性名+@update:属性名的合写

(5)示例:

1)父传子

父组件:

2)子传父

子组件:

父组件:

③效果:

27、ref和$refs获取dom组件

(1)作用:利用ref和$refs可以用于获取dom元素,或组件实例

(2)特点:查找范围,当前组件内(更精确稳定)

(3)语法:

1)获取dom:
①给目标标签添加ref属性
②恰当时机,通过this.$refs.属性名,获取目标标签
2)获取组件
①给目标标签添加ref属性
②恰当时机,通过this.$refs.属性名,获取目标组件,就可以调用组件里的方法
③示例:

父组件通过ref属性获取子组件的值,并重置其值

代码:

结果:

获取:

28、Vue异步更新和$nextTick

(1)要点:通过$nextTick解决Vue异步更新问题

(2)示例:

点击之后,改变为输入框,并获取焦点

——>

源代码:

1直接使用this.&refs.ipt添加焦点,发现不仅未获取焦点,并报错(Vue异步更新,dom更新未完成)

2使用setTimeout,可以解决问题,但时间估计不一定准确

3使用 this.$nextTick,发现几乎没有延迟

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网络协议 — Keepalived 高可用方案

目录 文章目录 目录Keepalived 是实现了 VRRP 协议的软件Keepalived 的软件架构VRRP StackCheckersKeepalived 的配置Global configurationvrrp_scriptVRRP Configurationvrrp synchroization groupvrrp instancevirtual ip addressesvirtual routesLVS Configurationvirtual_s…

Qt+MySQL实现社团管理系统

开发环境 ● Qt 5.14.1 ● Win10 ● Mysql 5.7.28 系统介绍 系统主要实现的功能如下图所示 社团管理系统主要包含了以下几个亮点功能 轮播图显示社团信息支持excel形式的导入导出学生信息权限控制(管理员、超级管理员、用户) 系统效果展示 登录界面…

Leetcode(经典题)day2

H指数 274. H 指数 - 力扣(LeetCode) 先对数组排序,然后从大的一头开始遍历,只要数组当前的数比现在的h指数大就给h指数1,直到数组当前的数比现在的h指数小的时候结束,这时h的值就是要返回的结果。 排序…

Python酷库之旅-第三方库Pandas(021)

目录 一、用法精讲 52、pandas.from_dummies函数 52-1、语法 52-2、参数 52-3、功能 52-4、返回值 52-5、说明 52-6、用法 52-6-1、数据准备 52-6-2、代码示例 52-6-3、结果输出 53、pandas.factorize函数 53-1、语法 53-2、参数 53-3、功能 53-4、返回值 53-…

用户登陆实现前后端JWT鉴权

目录 一、JWT介绍 二、前端配置 三、后端配置 四、实战 一、JWT介绍 1.1 什么是jwt JWT(JSON Web Token)是一种开放标准(RFC 7519),用于在各方之间以安全的方式传输信息。JWT 是一种紧凑、自包含的信息载体&…

UML/SysML建模工具更新情况(2024年7月)(1)

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 工具最新版本:Enterprise Architect 17.0 BETA 更新时间:2024年7月2日 工具简介 性价比很高,目前最流行的UML建模工具。还包含需求管理、项目估算…

【ZooKeeper学习笔记】

1. ZooKeeper基本概念 Zookeeper官网:https://zookeeper.apache.org/index.html Zookeeper是Apache Hadoop项目中的一个子项目,是一个树形目录服务Zookeeper翻译过来就是动物园管理员,用来管理Hadoop(大象)、Hive&…

数据恢复篇:适用于 Android 的恢复工具

正在摆弄 Android 设备。突然,您意外删除了一张或多张图片。不用担心,您总能找到一款价格实惠的照片恢复应用。这款先进的软件可帮助 Android 用户从硬盘、安全数字 (SD) 或存储卡以及数码相机中恢复已删除的图片。 Android 上文件被删除的主要原因 在获…

昇思学习打卡-13-LLM原理与实践/解码原理--以MindNLP为例

文章目录 搜索方法集束搜索(beam search)贪心搜索(greedy search) 采样池处理结果 一个文本序列的概率分布可以分解为每个词基于其上文的条件概率的乘积 搜索方法 集束搜索(beam search) Beam search通过在每个时间步保留最可能的 num_beams 个词,并从中最终选择出…

C++·多态

1. 多态的概念 多态通俗讲就是多种形态,就是指去完成某个行为,当不同对象去做时会产生不同的结果或状态。 比如买火车票这个行为,同样是买票的行为,普通成年人买到全价票,学生买到半价票,军人优先买票。这个…

NFT如何解决音乐版权的问题

音乐版权问题一直困扰着音乐产业。传统的音乐版权管理模式存在以下问题。需要注意的是,NFT在音乐版权领域仍处于早期发展阶段,存在一些需要解决的问题,例如技术标准不统一、应用场景有限、法律法规不明朗等。但随着技术的进步和市场的完善&am…

可重入锁深入学习(有码)

【摘要】 ​今天,梳理下java中的常用锁,但在搞清楚这些锁之前,先理解下 “临界区”。临界区在同步的程序设计中,临界区段活称为关键区块,指的是一个访问共享资源(例如:共享设备或是共享存储器&a…

路径规划 | 飞蛾扑火算法求解二维栅格路径规划(Matlab)

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 路径规划 | 飞蛾扑火算法求解二维栅格路径规划(Matlab)。 飞蛾扑火算法(Firefly Algorithm)是一种基于自然界萤火虫行为的优化算法,在路径规划问题中也可以应…

Nginx入门到精通三(反向代理1)

下面内容整理自bilibili-尚硅谷-Nginx青铜到王者视频教程 Nginx相关文章 Nginx入门到精通一(基本概念介绍)-CSDN博客 Nginx入门到精通二(安装配置)-CSDN博客 Nginx入门到精通三(Nginx实例1:反向代理&a…

子进程继承父进程文件描述符导致父进程打开设备文件失败

开发过程中有时会遇到需要在程序中执行三方程序或者shell脚本,一般会通过system(), popen(), exec簇来完成该功能。我们知道以上方法会通过fork创建子进程后在子进程中执行相应指令。如图1为某个示例流程,具体的程序执行流程如图2所示,线程my…

使用Python和MediaPipe实现手势控制音量(Win/Mac)

1. 依赖库介绍 OpenCV OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和机器学习软件库。它包含了数百个计算机视觉算法。 MediaPipe MediaPipe是一个跨平台的机器学习解决方案库,可以用于实时人类姿势估计、手势识…

godis源码分析——database存储核心1

前言 redis的核心是数据的快速存储,下面就来分析一下godis的底层存储是如何实现,先分析单机服务。 此文采用抓大放小原则,先大的流程方向,再抓细节。 流程图 源码分析 现在以客户端连接,并发起set key val命令为例…

简单的SQL字符型注入

目录 注入类型 判断字段数 确定回显点 查找数据库名 查找数据库表名 查询字段名 获取想要的数据 以sqli-labs靶场上的简单SQL注入为例 注入类型 判断是数字类型还是字符类型 常见的闭合方式 ?id1、?id1"、?id1)、?id1")等,大多都是单引号…

微分方程的解法(Matlab)

微分方程分为刚性微分方程和非刚性微分方程,在数值解法中的表现和行为特性上存在显著差异。 刚性微分方程(Stiffness Equation)是指其数值分析的解只有在时间间隔很小时才会稳定,只要时间间隔略大,其解就会不稳定。这…

【BUG】Python3|COPY 指令合并 ts 文件为 mp4 文件时长不对(含三种可执行源代码和解决方法)

文章目录 前言源代码FFmpeg的安装1 下载2 安装 前言 参考: python 合并 ts 视频(三种方法)使用 FFmpeg 合并多个 ts 视频文件转为 mp4 格式 Windows 平台下,用 Python 合并 ts 文件为 mp4 文件常见的有三种方法: 调用…