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. uni-app 动态修改主题色

    老是碰到初版制作完成没多久,就整一出说什么要更改整个项目的色彩体系.真的是宝宝心里苦啊! 起初都是通过uni项目自带的uni.scss中定义,在替换页面上对应的css.以便于达到一次性修改整体布局的样 ...

  2. vue下载与安装

    首先安装node.js环境: node.js 安装推荐文章:https://www.cnblogs.com/zhouyu2017/p/6485265.html 基于node.js安装淘宝镜像npm i ...

  3. [seaborn] seaborn学习笔记10-绘图实例(2) Drawing example(2)

    文章目录 10 绘图实例(2) Drawing example(2) 1. Grouped violinplots with split violins(violinplot) 2. Annotate ...

  4. 迁移学习（DANN）《Domain-Adversarial Training of Neural Networks》

    论文信息 论文标题:Domain-Adversarial Training of Neural Networks论文作者:Yaroslav Ganin, Evgeniya Ustinova, Hana ...

  5. ONNX模型分析与使用

    本文大部分内容为对 ONNX 官方资料的总结和翻译,部分知识点参考网上质量高的博客. 一,ONNX 概述 深度学习算法大多通过计算数据流图来完成神经网络的深度学习过程. 一些框架(例如CNTK,Caf ...

  6. S2-012 CVE-2013-1965

    漏洞名称 S2-012(CVE-2013-1965) 远程代码执行 利用条件 Struts Showcase App 2.0.0 - Struts Showcase App 2.3.14.2 影响版本 ...

  7. Java进阶篇——设计模式

    设计模式 一.代理模式 使用代理类对真实对象进行代理,包括真实对象方法的调用.功能的扩展等.访问的时候也只能访问到代理对象,既保护了真实对象同时可以在原始对象上进行扩展.类似于中介在卖家和买家之间的角 ...

  8. 关于Token和Cookie做权限校验的区别及Token自动续期方案

    title: 关于Token和Cookie做权限校验的区别及Token自动续期方案 categories: 后端 tags: - .NET Token和Cookie的区别 首先,要知道一些基本概念:h ...

  9. [Leetcode]设计循环队列

    题目   代码 class MyCircularQueue { public: /** Initialize your data structure here. Set the size of the ...

  10. P3934 [Ynoi2016] 炸脖龙 I

    题面 给一个长为 \(n\) 的序列,\(m\) 次操作,每次操作: 1.区间 \([l,r]\) 加 \(x\) 2.对于区间 \([l,r]\),查询: \[a[l]^{a[l+1]^{a[l+2 ...