【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>

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

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

相关文章

Kubernetes 常用操作大全:全面掌握 K8s 基础与进阶命令

Kubernetes&#xff08;简称 K8s&#xff09;作为一种开源的容器编排工具&#xff0c;已经成为现代分布式系统中的标准。它的强大之处在于能够自动化应用程序的部署、扩展和管理。在使用 Kubernetes 的过程中&#xff0c;熟悉常用操作对于高效地管理集群资源至关重要。本文将详…

sqlmap --os-shell的原理(MySQL,MSSQL,PostgreSQL,Oracle,SQLite)

1. MySQL 条件 数据库用户需要具备高权限&#xff08;如 FILE 权限&#xff09;。数据库服务运行用户需要对目标目录有写权限。Web 服务器有可写目录&#xff0c;且支持执行上传的脚本&#xff08;如 PHP、JSP 等&#xff09;。 原理 利用 MySQL 的 SELECT ... INTO OUTFIL…

Springboot 2.x 升级到Springboot 2.7.x问题汇总

Springboot 2.x 升级到Springboot 2.7.x问题 Springboot 2.x 升级到Springboot 2.7.x问题汇总 不废话 上干货 改变 1.mysql依赖groupId和artifactId更改&#xff1b; <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</…

【计算机网络】实验13:运输层端口

实验13 运输层端口 一、实验目的 本次实验旨在验证TCP和IP运输层端口号的作用&#xff0c;深入理解它们在网络通信中的重要性。通过实验&#xff0c;我将探讨端口号如何帮助区分不同的应用程序和服务&#xff0c;使得在同一台主机上能够同时运行多个网络服务而不发生冲突。此…

【Redis】Redis基础——Redis的安装及启动

一、初识Redis 1. 认识NoSQL 数据结构&#xff1a;对于SQL来说&#xff0c;表是有结构的&#xff0c;如字段约束、字段存储大小等。 关联性&#xff1a;SQL 的关联性体现在两张表之间可以通过外键&#xff0c;将两张表的数据关联查询出完整的数据。 查询方式&#xff1a; 2.…

vuex 是什么?怎么使用?哪种功能场景使用它?

Vuex是Vue.js的状态管理库。它可以用来管理应用程序中的共享状态&#xff0c;并提供了一种集中式的方式来管理状态的变化。 使用Vuex&#xff0c;首先需要安装它&#xff1a; npm install vuex --save然后&#xff0c;在Vue应用程序的入口文件中&#xff0c;导入Vuex并在Vue实…

ElK 8 收集 MySQL 慢查询日志并通过 ElastAlert2 告警至飞书

文章目录 1. 说明2. 启个 mysql3. 设置慢查询4. filebeat 设置5. 触发慢查询6. MySQL 告警至飞书 1. 说明 elk 版本&#xff1a;8.15.0 2. 启个 mysql docker-compose.yml 中 mysql&#xff1a; mysql:# restart: alwaysimage: mysql:8.0.27# ports:# - "3306:3306&q…

PyTorch基本使用-张量的索引操作

在操作张量时&#xff0c;经常要去获取某些元素进行处理或者修改操作&#xff0c;在这里需要了解torch中的索引操作。 准备数据&#xff1a; data torch.randint(0,10,[4,5]) print(data--->,data)输出结果&#xff1a; data---> tensor([[3, 9, 4, 0, 5],[7, 5, 9, …

【服务器监控】grafana+Prometheus+node exporter详细部署文档

我们在进行测试时&#xff0c;不可能一直手动看着服务器的性能消耗&#xff0c;这时候就需要有个工具替我们监控服务器的性能消耗。这里记录下grafanaPrometheusnodeExporter的组合用于监控服务器。 简单介绍&#xff1a; grafana&#xff1a;看板工具&#xff0c;所有采集的…

第十七章 使用 MariaDB 数据库管理系统

1. 数据库管理系统 数据库是指按照某些特定结构来存储数据资料的数据仓库。在当今这个大数据技术迅速崛起的年代&#xff0c;互联网上每天都会生成海量的数据信息&#xff0c;数据库技术也从最初只能存储简单的表格数据的单一集中存储模式&#xff0c;发展到了现如今存储海量…

Jenkins授权策略的配置

简介:在Jenkins中,通过系统管理下的“Manage and Assign Roles”以及“Manage Roles”来配置角色,是实现权限管理的关键步骤。以下是关于这两个功能配置角色时的意义及注意事项的详细解释: 一、配置角色的意义 实现权限控制: 通过创建和分配角色,可以精确地控制不同用户…

centos 7.9 安装jdk1.8 mysql redis等

环境&#xff1a; centos 7.9 1、安装OpenJDK 1.8 步骤 1: 更新系统 首先&#xff0c;确保你的系统是最新的&#xff0c;执行以下命令来更新所有软件包&#xff1a; sudo yum update -y步骤 2: 安装 OpenJDK 1.8 CentOS 7 默认的包管理器是 yum&#xff0c;你可以通过以下命…

计算机键盘的演变 | 键盘键名称及其功能 | 键盘指法

注&#xff1a;本篇为 “键盘的演变及其功能” 相关几篇文章合辑。 英文部分机翻未校。 The Evolution of Keyboards: From Typewriters to Tech Marvels 键盘的演变&#xff1a;从打字机到技术奇迹 Introduction 介绍 The keyboard has journeyed from a humble mechanical…

Methods and Initializers

1 Method Declarations 这回不从comipler开始&#xff0c;从runtime开始。 GC也需要follow 接下来难点在于如何填充这些表 2 Compiling method declarations 难点&#xff1a; 一个类可以声明任意数量的方法。运行时需要查找并绑定所有这些方法。如果将这些方法都打包到一条…

飞飞5.4游戏源码(客户端+服务端+工具完整源代码+5.3fix+5.4patch+数据库可编译进游戏)

飞飞5.4游戏源码&#xff08;客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏&#xff09; 下载地址&#xff1a; 通过网盘分享的文件&#xff1a;【源码】飞飞5.4游戏源码&#xff08;客户端服务端工具完整源代码5.3fix5.4patch数据库可编译进游戏&#xff09; 链…

开源C代码之路:一、Gitee

开源c代码之路&#xff1a;一&#xff0c;Gitee 前言1、开源项目2、从哪里找&#xff1f;3、举个例子4、总结&#xff1a; 本系列回顾清单开源代码示例 前言 从开源开发的角度&#xff0c;由浅入深&#xff0c;一步步初探C语言编程的入门之路。 本篇讲解&#xff1a;Gitee 1…

基于协同过滤算法的宠物用品商城的设计与实现(计算机毕业设计)Java Spring 衍生为任何商城系统 毕业论文

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8&#xff0c;我们在这个平台上运行的。其他版本理论上也可以。 IDE环境&#xff1a; Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境&#xff1a; Tomcat 7.x,8.x,9.x版本均可 操作系统…

算法-字符串-165.比较版本号

一、题目 二、思路解析 1.思路&#xff1a; 比较的是两个版本号它们以“.”作为分割的部分的有效值&#xff08;即数值&#xff09;是否一致 2.常用方法&#xff1a; 1.s.split("\\规则")&#xff0c;将字符串按参数规则进行分割并存储在字符串数组中 String[] str …

MySQL(四)--索引

MySQL的服务器,本质是在内存中的,那么所有对数据的CURD操作,全都是在对内存进行操作。 而,提高数据的CURD操作的效率,有两种方式:1、组织数据的格式(数据结构);2、算法。 而,数据结构,就是索引,即组织数据的格式。 1、没有索引的问题 索引:提高数据库的性能,索…

C# (WinForms) 使用 iTextSharp 库将图片转换为 PDF

iTextSharp简介 iTextSharp 是一个开源的 .NET 库&#xff0c;主要用于创建和操作 PDF 文档。它是 iText 的 .NET 版本&#xff0c;iText 是一个广泛使用的 Java 库。iTextSharp 继承了 iText 的核心功能并进行了适应 .NET 平台的调整。 iTextSharp 的主要功能包括&#xff1a…