ref属性

1、被用来给元素或子组件注册引用信息（id的替代者）

2、应用在html标签上获取的是真实DOM元素；

应用在组件标签上是组件实例对象 vc

3、使用方法：

（1）打标识：<h1 ref="XXX"></h1> 或 <School ref="sch"></School>

（2）获取：this.$refs.XXX

案例:

控制台输出：

Vue ref属性的更多相关文章

  1. Vue ref属性 && props配置项

    1 // # ref属性: 2 // # 1.用来给元素或者子组件注册引用信息(id的替代者) 3 // # 2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc) ...

  2. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

  3. Vue使用ref 属性来获取DOM

    注意,在父组件中可以使用this.$refs.属性名  获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...

  4. Vue学习之--------脚手架的分析、Ref属性、Props配置（2022/7/28）

    欢迎大家加入我的社区:http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录 1.脚手架的分析 2.ref属性 2.1 基础知识 2.2 代码实现 2.3 测试效果 3.Props ...

  5. vue$ref

    vue的$ref方法 可以在元素上template中直接添加ref属性 类似html的id属性 用来做选项卡的切换的

  6. ref属性

    ref属性 1.被用来给元素或组件注册引用信息(id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识:<h1 ref=& ...

  7. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  8. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  9. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  10. spring中ref属性与<ref/>标签

    在bean的内部引用另一个bean对象: 使用ref标签对其进行引用: <ref bean="viewResolver2"/> <bean id="vi ...

随机推荐

  1. 解读JVM级别本地缓存Caffeine青出于蓝的要诀2 —— 弄清楚Caffeine的同步、异步回源方式

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们继Guava Cac ...

  2. css样式实现平行四边形

    强大的css样式实现平行四边形: 啥也不说了,直接上代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  3. ConditionAlOnProperties实现可插拔？

    大家好,我是3y,一年CRUD经验用十年的markdown程序员‍常年被誉为职业八股文选手 我又又又又被吐槽了,随之而来,我的消息推送平台开源项目Austin又又又又更新啦,迭代自己的项目多是一件美事 ...

  4. 利用Git同步思源笔记

    旧文章从语雀迁移过来,原日期为2022-10-22 思源笔记是一款优秀的本地优先的双链大纲笔记软件,拥有强大的笔记编辑功能且都是免费,唯一付费的就是云同步等一些服务了.但如果暂时还用不着云同步的,我们 ...

  5. [数据与分析可视化] D3入门教程3-d3中的数据操作

    d3.js入门教程3-d3.js中的数据操作 文章目录 d3.js入门教程3-d3.js中的数据操作 数学操作 对象和数组 过滤Filtering 排序Sorting 映射group 循环loop 重 ...

  6. [python] 基于matplotlib_venn实现维恩图的绘制

    文章目录 VENN DIAGRAM(维恩图) 1. 具有2个分组的基本的维恩图 Venn diagram with 2 groups 2. 具有3个组的基本维恩图 Venn diagram with ...

  7. python进阶之路18 os、sys、json模块

    os模块与sys模块 os模块主要与操作系统打交道 sys模块主要与python解释器打交道 os模块(重要) os模块主要与代码运行所在的操作系统打交道 import os os.path.spli ...

  8. Flutter框架渲染流程与使用

    Flutter简述 Flutter是一个UI SDK, 可以进行移动端(iOS, Android),Web端, 桌面,它是一个跨平台解决方法. Flutter的特点:美观,快速,高效,开放. 美观:F ...

  9. NLP知识图谱项目合集（信息抽取、文本分类、图神经网络、性能优化等)

    NLP知识图谱项目合集(信息抽取.文本分类.图神经网络.性能优化等) 这段时间完成了很多大大小小的小项目,现在做一个整体归纳方便学习和收藏,有利于持续学习. 1. 信息抽取项目合集 1.PaddleN ...

  10. Lamdba表达式的无参数无返回值的练习-Lambda表达式有参数有返回值的练习

    Lamdba表达式的无参数无返回值的练习 题目给定一个厨子Cook接口,内含唯一的抽象方法makeFood,且无参数.无返回值.如下∶public interface cook {void makeF ...