新手对vue中特殊的标签属性ref和key的理解

最新推荐文章于 2024-05-02 18:43:48 发布
最新推荐文章于 2024-05-02 18:43:48 发布
阅读量1k 收藏 1
点赞数 1
文章标签： 前端 javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vest_er/article/details/126474419
版权

ref属性

定义：用来给元素或子组件注册引用信息
理解：类似id（原生js中id的替代者），给元素或者组件打标识

作用

1、应用在html标签上，是用来获取真实的DOM元素（相当于原生的document.getElementById("xxx")）

2、应用在组件标签上，得到的是组件的实例对象

使用方式

第一步：打标识

<h1 ref="xxx">...</h1>
<School ref="xxx"></School>

第二步：获取

this.$refs.xxx
ref属性与原生的id属性的区别

1、添加在html标签上

两者结果相同，都是得到真实的DOM元素

2、添加到组件上

ref属性获取的是组件实例对象
id属性相当于给组件最外层容器添加了id属性，得到的是最外层包裹着的所有真实DOM元素

key属性

理解：给虚拟DOM对象添加标识，相当于给每个元素添加一个独一无二的id身份
作用：当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新旧虚拟DOM的差异对比，比较规则如下：

对比规则

1、旧虚拟DOM中找到与新虚拟DOM相同的key

① 若虚拟DOM中的内容没有变化，那么直接使用之前的真实DOM
② 若虚拟DOM中的内容变化了，则生成新的真实DOM，随后替换掉页面之前的DOM

2、新虚拟DOM中未找到与旧虚拟DOM相同的key

创建真实的DOM，随后渲染到页面

用index作为key可能引发的问题

1、若对数据进行：逆序添加和删除等破坏数据顺序的操作

会产生没有必须的真实DOM更新，页面效果没问题，但效率低

2、若结构中包含输入类的DOM

会产生错误的DOM更新，页面出现问题

开发中如何选择key

① 如果数据有唯一标识，比如id，身份证号，学号等，可以直接使用数据的唯一标识
② 如果不存在逆序等破坏顺序的操作，仅用于渲染展示，那么使用index作为key值没有问题

离奇6厘米
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2中ref属性的使用方法及注意事项
08-30
主要给大家介绍了关于Vue 2中ref属性的使用方法及注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
详解如何理解vue的key属性
12-29
如果没有这个属性的时候vue应用 in-place patch（就地复用）策略。列表里的顺序发生改变的时候比如shuffle（列表打乱）的时候，vue为了提升性能，不会移动dom元素，只是更新相应元素的内容节点。 就地复用的弊端 这...
Vue技术_ref属性（被用来给元素或子组件注册引用信息）
weixin_55772633的博客
07-20 4329
1. 使用ref属性获取子组件时，可以直接获取到子组件的实例对象，而不仅仅是子组件编译解析后的模板。这意味着你可以直接调用子组件的方法、访问子组件的数据等，方便后期对子组件进行操作和通信。2. 而使用id则需要手动操作DOM，并且只能通过DOM的选择器方法来获取对应的DOM元素，无法直接获取组件实例对象。3. 综上所述，使用ref属性可以简化DOM操作，并且获取子组件时可以直接获取到组件实例对象，提供了更方便灵活的操作和通信方式。这使得Vue中的开发更加便利和高效。
Vue（标签属性：ref、配置项：props、混入mixin、插件、样式属性：scroped）
weixin_57920269的博客
05-02 1431
标签属性：ref、配置项：props、混入：使用相同配置、插件、样式属性
vue3_03_简单介绍标签的ref属性
最新发布
浪漫韫秋
05-02 755
ref的本质就是打标记的，就是为了规避id的这种错误的东西的；可以加载在普通的html标签身上，拿到的是dom元素的；也是可以加载在组件标签当中的，拿到的就是实例对象的；
Vue,ref标识
weixin_43228946的博客
10-02 266
ref作用：用于给节点打标识 读取方式：this.$refs.xxxxxx ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
key属性的作用
weixin_64227680的博客
11-27 362
向数组某个位置中插入一个元素。
vue 标签属性数据绑定和拼接的实现方法
08-27
Vue 标签属性数据绑定和拼接的实现方法 在 Vue.js 中，数据绑定和拼接是非常重要的概念，它们可以帮助我们更方便地处理数据和渲染页面。本文将主要介绍 Vue 标签属性数据绑定和拼接的实现方法。 一、数据绑定 在 ...
vue基础3（六）解构赋值与解构插槽，动态插槽，插槽缩写#
差不少的博客
08-05 1245
解构赋值与解构插槽，动态插槽，插槽缩写#
【Vue学习】Vue学习：v-for标签中key属性的作用
只剩渣了的博客
02-23 579
:key属性 使用key属性绑定元素时，需要保证元素与key属性绑定的元素是一一对应的 这里尤其要注意“元素与属性绑定的一一对应”的含义。例如下面例子中对数组进行增删改等操作时，也需要保证元素与key属性绑定的元素是一一对应 例如： 遍历数组案例中的names为[“mike”, “kobe”, “tom”]，若在“tom”（“tom”的index为2）前加入一个新的值—“amy”，则“amy”的i...
[Vue]ref属性
emmmm.....
10-13 5083
1. ref 属性 1.1 ref 属性的使用方式 1.1.1 标识元素或子组件 1.1.2 获取标识的元素或子组件 1.2 使用 ref 属性标记 html 标签元素 1.3 使用 ref 属性标记子组件 1.4 使用 id 获取元素或子组件
一文讲清楚vue3中的内置特殊内容key、ref、is、＜component＞、＜slot＞、＜template＞
m0_57202548的博客
01-24 2534
在 Vue 3 中，key的作用主要与重新渲染和优化有关。用于标识列表中的元素，以便在列表更新时，Vue 可以识别哪些元素发生了变化，而不是简单地替换所有元素。key绑定的值应为基础类型，如字符串或数字。不要使用对象作为v-for的 key。例如，如果有一个动态列表，希望在列表更新时保留某些元素的身份，可以使用key。在这个例子中，使用key可以确保列表的渲染更加高效，因为它可以区分哪些元素发生了变化，而不是每次重新创建所有元素。同一父元素下的子元素必须具有。
vue中ref标签属性和$ref的关系,
chunmeizhang_88的博客
09-28 5325
javascript原生语法和jquery都是属于操作DOM节点元素,去实现功能的. Vue给我们提供了一个专门用来获取DOM节点的方法 ，使用元素的ref属性，使用起来非常方便 (这只是用于偶尔vue需要操作节点时候才使用) vue的ref属性 ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素...
vue ref属性(标签属性)
MCCLS的博客
07-20 8211
要点： 之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作 vue中用ref 并且可以在component上找到 这边this指向的就是app组件, 显示,其实ref就是id的代替者,只不过不需要再写dom元素操作了 其实就是你在哪个标签上加ref,就vue component 帮你收集哪个元素 比如这边在h1和btn上加了ref则在vue component的$ref中,收集了,title和btn元素 注意： 如果在一个组...
ref 的属性与标签
u010325193的博客
04-12 4380
spring中ref属性与&lt;ref/&gt;标签在bean的内部引用另一个bean对象：　　使用ref标签对其进行引用： &lt;ref bean="viewResolver2"/&gt; 123456&lt;bean id="viewResolver"        class="org.springframework.web.servlet.view.InternalResourceVi...
vue中：key 和react 中key={} 的作用，以及ref的特性？
weixin_30561425的博客
03-19 256
vue中：key 和react 中key={} 为了给 vue 或者react 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性 一句话概括就是key的作用主要是为了高效的更新虚拟DOM ref的特性 React的ref有3种用法： 字符串(已废弃) 回调函数 React.createRef() （React16.3提供） 1. 字符串 最...
Vue与ref属性与refs
热门推荐
前端技术的学习整理
05-25 17万+
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册实例：这里为了在create的时候引用DOM元素，先在DOM中使用ref标签进行了注册，然后便可以通过’this.$refs’再跟注册时的名称来...
vue 对象里面有id属性_Vue对象提供的属性功能
weixin_39857899的博客
12-28 924
3. Vue对象提供的属性功能3.1 过滤器过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。定义过滤器的方式有两种。3.1.1 使用Vue.filter()进行全局定义Vue.filter("RMB1", function(v){//就是来格式化(处理)v这个数据的if(v==0){return v}return v+"元"})3.1.2 在vue对象...
在vue3中ref标签属性使用
06-11
在 Vue 3 中，`ref` 是一个新的响应式 API，用于在模板中引用一个元素或组件，并可以在 JavaScript 代码中访问该元素或组件的属性和方法。 在模板中，可以使用 `ref` 指令来创建一个 `ref` 对象，并将其绑定到一个元素或组件上。例如： ```html <template> <div> <input type="text" ref="inputRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const inputRef = ref(null); function handleClick() { inputRef.value.focus(); } return { inputRef, handleClick, }; }, }; </script> ``` 在这个例子中，我们使用 `ref` 指令将 `input` 元素绑定到 `inputRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `inputRef.value`，并调用了 `focus` 方法，以便将焦点设置到 `input` 元素上。 需要注意的是，在 Vue 3 中，`ref` 不再返回一个对象，而是返回一个包含 `value` 属性的普通 JavaScript 对象。因此，在访问 `ref` 对象的属性和方法时，需要使用 `.value` 来访问其值。 另外，在 Vue 3 中，`ref` 还可以用于引用组件，例如： ```html <template> <div> <MyComponent ref="myComponentRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, setup() { const myComponentRef = ref(null); function handleClick() { myComponentRef.value.someMethod(); } return { myComponentRef, handleClick, }; }, }; </script> ``` 在这个例子中，我们使用 `ref` 指令将 `MyComponent` 组件绑定到 `myComponentRef` 变量上。在 `setup` 函数中，我们使用 `ref` 函数创建了一个 `ref` 对象，并将其初始值设置为 `null`。然后，我们在 `handleClick` 函数中访问了 `myComponentRef.value`，并调用了 `someMethod` 方法，以便调用 `MyComponent` 组件的某个方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值