当前位置: 首页 > news >正文

【Vue】v-model、ref获取DOM

目录

v-moel

v-model的原理

v-model用在组件标签上

方式

 defineModel()简写

ref属性

获取原生DOM

获取组件实例

nextTick() 


v-moel

v-model:双向数据绑定指令

  1. 数据变了,视图跟着变(数据驱动视图)
  2. 视图变了,数据也会跟着变

v-model的原理

作用在原生输入框时,本质就是:value="数据"+@input="数据=输入框的值"的组合

如下:

第1行代码和第2行代码所实现的效果是一样的.

  • :value="msg",实现了v-model的数据驱动视图
  • @input="msg = $event.target.value",实现了v-model的视图驱动数据,$event.target获得触发input监听事件的dom对象。

<template>

<input type="text" v-model="msg"/>  //1

<input type="text" :value="msg" @input="msg = $event.target.value"/> //2

</template>

<script setup>

    import { ref } from 'vue'

    const msg = ref("aaaa")

</script>

v-model用在组件标签上

<XXX v-model="数据"/>,XXX是一个组件

等价于

<XXX :modelValue="数据" @update:modelValue="数据=新值" />

  • 这种方式使用到了父传子的方式, modelValue属于自定义类型,子组件需要接收。

<XXX :modelValue="数据" @update:modelValue="数据=新值" />方式

父组件

<script setup>import { ref } from 'vue'import MyOption from './components/MyOption.vue';const activetedId=ref('333')
</script>
<template><MyOption :modelValue="activetedId" @update:modelValue="activetedId=$event"/>
</template><style scoped></style>

子组件

<template>
<select :value="modelValue" @change="emit('update:modelValue', $event.target.value)" v-if="modelValue.length>0"><option value="111">北京</option><option value="222">上海</option><option value="333">广州</option>   <option value="444">深圳</option><option value="555">杭州</option><option value="666">南京</option>
</select>
</template><script setup>defineProps({modelValue: String,Required: true})const emit=defineEmits()
</script><style scoped></style>

 defineModel()简写

  1. 父:<xxx v-model="父的响应式数据" />
  2. 子:const model=defineModel(),子组件可以对这个model响应式数据做读、写操作

父组件

<script setup>import { ref } from 'vue'import MyOption from './components/MyOption.vue';const activetedId=ref('333')
</script>
<template><MyOption v-model="activetedId"/>
</template><style scoped></style>

子组件

<template>
<select v-model="model"><option value="111">北京</option><option value="222">上海</option><option value="333">广州</option>   <option value="444">深圳</option><option value="555">杭州</option><option value="666">南京</option>
</select>
</template><script setup>//defineModel()的返回值是一个ref数据,并且可以在子组件直接操作这个ref数据,子组件修改这个数据会引起父组件的数据的同步更新const model=defineModel()
</script><style scoped></style>

ref属性

这里要与ref函数做区别,这里ref属性是作用在标签上的属性,是vue新增的,原生不具备这个属性的。

作用

用来获取原生DOM或组件实例(进而调用组件提供的方法)

获取原生DOM

  1. 先创建一个ref响应式数据
  2. 将标签的ref属性绑定创建好的ref响应式数据
  3. 通过divRef.value获取到<div></div>
<template>
<div ref="divRef">Some text...
</div>
</template><script setup>import { onMounted, ref } from 'vue'const divRef=ref(null)onMounted(() => {divRef.value.style.color="blue"  })
</script>

获取组件实例

如下使用示例:

MyFrom提供的校验方法和账号、密码输入框,根组件依靠ref属性调用子组件提供的方法

MyFrom.vue

组件需要让外部使用的函数,需要对外暴露,类似于导出,defineExpose({ })

<template><div class="from-container">账号:<input type="text" v-model="username"><br /><br />密码:<input type="password" v-model="password"><br /><br /></div>
</template><script setup>import { ref} from 'vue'const username = ref('')const password = ref('')    const validate=()=>{return username.value=="admin" && password.value=="123456"}defineExpose({validate})    
</script><style scoped></style>

App.vue

<template>
<div><MyForm ref="fromRef"/><button @click="onLogin">登录</button>
</div>
</template><script setup>import {ref} from 'vue'import MyForm from './components/MyForm.vue'const fromRef=ref(null)const onLogin=()=>{if(fromRef.value.validate()){console.log('success')}else{console.log('fail')}}
</script><style scoped></style>

nextTick() 

nextTick() 是vue3提供的一个方法

作用

当数据变了,想获取更新后的DOM,需要把代码写在这个方法的回调中。

什么时候使用这个方法

当数据变了,想DOM操作,如果直接拿不到,在这个方法的回调中去获取。

如下,当v-if的判断值为true后,DOM还未更新,此时就需要在nextTick() 中操作更新后的DOM

<script setup>import {ref,nextTick} from 'vue'const onEdit=()=>{isShowEdit.value=true//此时显示文本框,但是在vue3中,DOM的更新是异步的,此时直接获取更新后的DOM是拿不到的,因为还没有更新nextTick(()=>{inputRef.value.focus()})}
</script>

相关文章:

【Vue】v-model、ref获取DOM

目录 v-moel v-model的原理 v-model用在组件标签上 方式 defineModel()简写 ref属性 获取原生DOM 获取组件实例 nextTick() v-moel v-model&#xff1a;双向数据绑定指令 数据变了&#xff0c;视图跟着变&#xff08;数据驱动视图&#xff09;视图变了&#xff0c;数…...

Python 类的设计(以植物大战僵尸为例)

关于类的设计——以植物大战僵尸为例 一、设计类需满足的三要素1. 类名2. 属性和方法 二、以植物大战僵尸的为例的类的设计1. 尝试分类2. 创建对象调用类的属性和方法*【代码二】*3. 僵尸的继承 三、代码实现 一、设计类需满足的三要素 1. 类名 类名&#xff1a;某类事物的名…...

python中权重剪枝,低秩分解,量化技术 代码

目录 python中权重剪枝,低秩分解,量化技术 代码 权重剪枝 低秩分解 scipy 量化技术 python中权重剪枝,低秩分解,量化技术 代码 权重剪枝 权重剪枝可以通过PyTorch的torch.nn.utils.prune模块实现。以下是一个简单的例子: import torch import torch.nn as nn impor…...

调用matlab用户自定义的function函数时,有多个输出变量只输出第一个变量

很多朋友在使用matlab时&#xff0c;会使用或自己编辑多个function函数&#xff0c;来满足自己对任务处理的要求&#xff0c;但是在调用function函数时&#xff0c;会出现这个问题&#xff1a;调用matlab用户自定义的function函数时&#xff0c;有多个输出变量只输出第一个变量…...

RabbitMQ七种工作模式之简单模式, 工作队列模式, 发布订阅模式, 路由模式, 通配符模式

文章目录 一. Simple(简单模式)公共代码:生产者:消费者: 二. Work Queue(工作队列模式)公共代码:生产者:消费者1, 消费者2(代码相同): 三. Publish/Subscribe(发布/订阅模式)公共代码:生产者:消费者: 四. Routing(路由模式)公共代码:消费者: 五. Topics(通配符模式)公共代码:生…...

Win10安装kafka并用C#调用

kafka安装 jdk、kafka版本如下&#xff0c;zookeeper使用kafka自带版本 安装包下载位置:https://download.csdn.net/download/henreash/90087368 (赚点csdn下载资源分) 安装jdk后&#xff0c;解压kafka压缩包&#xff0c;修改配置文件&#xff1a; kafka_2.13-3.9.0\config\…...

高级架构二 Git基础到高级

一 Git仓库的基本概念和流程 什么是版本库&#xff1f;版本库又名仓库&#xff0c;英文名repository,你可以简单的理解一个目录&#xff0c;这个目录里面的所有文件都可以被Git管理起来&#xff0c;每个文件的修改&#xff0c;删除&#xff0c;Git都能跟踪&#xff0c;以便任何…...

深入解析二叉树算法

引言 二叉树(Binary Tree)作为数据结构中的一种重要形式,在计算机科学的诸多领域中得到了广泛应用。从文件系统到表达式解析,再到搜索和排序,二叉树都扮演着关键角色。本文将从二叉树的基础概念出发,详细探讨其各种算法及其应用,并提供相关代码示例,旨在为读者建立扎实…...

如何解决maven项目使用Ctrl + /添加注释时的顶格问题

一、问题描述 相信后端开发的程序员一定很熟悉IDEA编译器和Maven脚手架&#xff0c;使用IDEA新建一个Maven工程&#xff0c;通过SpringBoot快速构建Spring项目。在Spring项目pom.xml文件中想添加注释&#xff0c;快捷键Ctrl /&#xff0c;但是总是顶格书写。 想保证缩进统一…...

总结的一些MySql面试题

目录 一&#xff1a;基础篇 二&#xff1a;索引原理和SQL优化 三&#xff1a;事务原理 四&#xff1a;缓存策略 一&#xff1a;基础篇 1&#xff1a;定义&#xff1a;按照数据结构来组织、存储和管理数据的仓库&#xff1b;是一个长期存储在计算机内的、有组织的、可共享 的…...

渤海证券基于互联网环境的漏洞主动防护方案探索与实践

来源&#xff1a;中国金融电脑 作者&#xff1a;渤海证券股份有限公司信息技术总部 刘洋 伴随互联网业务的蓬勃发展&#xff0c;证券行业成为黑客进行网络攻击的重要目标之一&#xff0c;网络攻击的形式也变得愈发多样且复杂。网络攻击如同悬于行业之上的达摩克利斯之剑&…...

用Go语言重写Linux系统命令 -- nc简化版

用Go语言重写Linux系统命令 – nc简化版 1. 引言 netcat&#xff0c;简称 nc&#xff0c;被誉为网络工具中的“瑞士军刀”&#xff0c;是网络调试与分析的利器。它的功能十分强大&#xff0c;然而平时我们经常使用的就是他的连通性测试功能&#xff0c;但是nc是被设计用来测试…...

面试复盘 part 02·1202-1207 日

作品集讲述部分 分析反思 作品集讲述部分&#xff0c;视觉讲述部分需要更换&#xff0c;需要换成其他视觉相关的修改 具体话术 这是一个信息展示优化方案&#xff0c;用户为财务&#xff0c;信息区分度不足&#xff0c;理解成本较高&#xff0c;因此选择需要降低理解成本。…...

Linux评估网络性能

网络性能直接影响应用程序对外提供服务的稳定性和可靠性 ping命令检测网络的连通性 如果网络反应缓慢&#xff0c;或连接中断&#xff0c;可以用ping来测试网络的连通情况 time值(单位为毫秒)显示了两台主机之间的网络延时情况。如果此值很大&#xff0c;则表示网络的延时很大…...

实战ansible-playbook(四) -文件操作重定向/追加

原始命令: ----------阶段1--------------- apt-get update -y apt install nano vim iputils-ping net-tools dialog gcc apt-utils make -y systemctl stop unattended-upgradessystemctl disable unattended-upgradesecho APT::Periodic::Update-Package-Lists "1&qu…...

简单题:1.两数之和

题目描述&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 要求&#xff1a; 可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素…...

RTCMultiConnection 跨域问题解决

js套件地址 https://github.com/muaz-khan/RTCMultiConnection server套件地址 https://github.com/muaz-khan/RTCMultiConnection-Server 要解决的就是server代码的跨域问题 原装写法&#xff1a; 解决写法&#xff1a; // 喜欢组合语法的自己组 const io new ioServer.S…...

23种设计模式之解释器模式

目录 1. 简介2. 代码2.1 Expression &#xff08;抽象表达式类&#xff09;2.2 TerminalExpression &#xff08;终结符表达式类&#xff09;2.3 OrExpression &#xff08;非终结符表达式类&#xff09;2.4 AndExpression &#xff08;非终结符表达式类&#xff09;2.5 Test &…...

Postgresql内核源码分析-表数据膨胀是怎么回事

专栏内容&#xff1a;postgresql内核源码分析个人主页&#xff1a;我的主页座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物&#xff0e; 目录 前言 表数据膨胀的由来 什么时候产生膨胀 首先是update 还有delete 如何消…...

github使用SSH进行克隆仓库

SSH 密钥拉取git 查询密钥是否存在 s -al ~/.ssh这个文件夹下 known_hosts 就是存在的密钥文件 创建密钥文件 ssh-keygen -t rsa -b 4096 -C "testtt.com"-t rsa 是 rsa 算法加密 -b 是指定密钥的长度&#xff08;以位为单位&#xff09;。 -C 是用于给密钥添加注…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...