Vue-35、Vue中使用ref属性

1、ref属性

在这里插入图片描述

2、代码

<template>
  <div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">-->
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM"  ref="btn">点我输出上方dom元素</button>
    <School ref="sch"></School>
  </div>
</template>
<script>
import  Student from './components/Student.vue'
import School from './components/School.vue'
export default {
  name: 'App',
  components: {
    Student,
    School
  },
  data(){
    return{
      msg:'欢迎来学习',
    }
  },
  methods:{
    showDOM(){
      console.log(this.$refs.title);//获取真实dom元素
      console.log(this.$refs.btn);//真实DOM元素
      console.log(this.$refs.sch);//school组件实例对象
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #500012;
  margin-top: 60px;
}
</style>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

gdzwfw某省公共资源交易平台逆向学习

声明&#xff1a;本文中网站仅为学习技术使用&#xff0c;请勿暴力爬取数据。 学习地址&#xff1a;aHR0cHM6Ly95Z3AuZ2R6d2Z3Lmdvdi5jbi8jLzQ0L2p5Z2c 此网站采用请求头反爬&#xff0c;难点是请求头中几个参数是如何生成的&#xff08;别问为什么知道是请求头&#xff0c;一…

推荐系统算法 协同过滤算法详解(二)皮尔森相关系数

目录 前言 协同过滤算法(简称CF) 皮尔森(pearson)相关系数公式 算法介绍 算法示例1&#xff1a; 算法示例2 前言 理解吧同胞们&#xff0c;实在是没办发把wps公式复制到文章上&#xff0c;只能截图了&#xff0c;我服了&#xff01;&#xff01;&#xff01; 协同过滤算法…

pytestallure分析redis的数据并动态生成testCase报告

1.pytest.mark.parametrize pytest.mark.parametrize 是一个pytest的装饰器&#xff0c;它可以用于将参数传递给测试函数。使用 pytest.mark.parametrize 装饰器时&#xff0c;需要在装饰器中指定参数名称和参数值。对于多个参数&#xff0c;可以使用多个装饰器。 下面是一些…

ZXing开源库生成二维码

引言 二维码&#xff08;QR Code&#xff09;作为一种快速、高容量、高密度的矩阵条码&#xff0c;已经在各行各业得到广泛应用。ZXing&#xff08;Zebra Crossing&#xff09;是一款由Google开源的Java二维码生成和解析库&#xff0c;提供了丰富的功能和易于使用的API。本篇博…

sqlmap使用教程(5)-信息获取

MySQL数据库 -b&#xff0c;用来获取数据库标识 --hostname&#xff0c;可以获取数据库服务器的主机名 -current-user&#xff0c;用来获取当前连接数据库的用户名 --users&#xff0c;获取数据库管理系统中的所有用户 --passwords&#xff0c;可以获取数据库用户密码的哈希值…

接口文档管理工具(yapi的使用)

文章目录 一、API管理工具二、yapi 接口管理工具功能权限管理项目管理页面功能接口接口创建接口配置管理界面 动态成员管理数据管理设置 三、 docker安装yapi三、使用流程四、参考 一、API管理工具 [推荐-官方描述]使用 YApi 管理 API 文档&#xff0c;测试&#xff0c; mock …

【C++干货铺】 RAII实现智能指针

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 为什么需要智能指针&#xff1f; 内存泄漏 什么是内存泄漏&#xff0c;内存泄露的危害 内存泄漏的分类 堆内存泄漏&#xff08;Heap leak&#xff09; 系统资…

LIO-SAM 论文阅读

论文链接 LIO-SAM 0. Abstract 提出了一种通过平滑和映射进行紧耦合激光雷达惯性里程计的框架 LIO-SAM&#xff0c;它实现了高精度、实时的移动机器人轨迹估计和地图构建 LIO-SAM 在因子图上制定激光雷达惯性里程计&#xff0c;允许将多种相对和绝对测量&#xff08;包括闭环…

k8s-基础知识(Pod,Deployment,ReplicaSet)

k8s职责 自动化容器部署和复制随时扩展或收缩容器容器分组group&#xff0c;并且提供容器间的负载均衡实时监控&#xff0c;即时故障发现&#xff0c;自动替换 k8s概念及架构 pod pod是容器的容器&#xff0c;可以包含多个container pod是k8s最小可部署单元&#xff0c;容器…

理解分布式存储的真实成本 - 10PB的硬件和软件

我们最近与一家大型银行的首席信息官进行了一次对话。他们是全球系统性重要银行之一——规模极其庞大。这位CIO决定将MinIO引入为数据分析计划的对象存储。这个部署从抵押贷款、交易和新闻平台收集数据&#xff0c;以运行Spark和其他分析工具&#xff0c;为银行提供洞察力。Min…

【C语言】【插入排序】

void InsertSort(int* a, int n) {int end 0, tmp 0;for (int i 0;i < n - 1;i){end i;tmp a[end 1];while (end > 0){if (a[end] > tmp){a[end 1] a[end];--end;}elsebreak;}a[end 1] tmp;} }逻辑解释&#xff1a; 变量end代表某次循环&#xff0c;要比较…

学习笔记-李沐动手学深度学习(三)(10-11,隐藏层、多层感知机、激活函数、模型超参数选择、欠过拟合)

总结 多体会&#xff08;宏观、哲学&#xff09; 【深度学习的核心】首先是要模型足够大&#xff0c;在此基础上通过各种手段 来控制模型容量&#xff0c;使得最终得到较小的泛化误差 【一般深度学习特指神经网络 这一块】 【学习的核心是要学习 本质上不变的那些核心思想&a…

MySql必知必会

41.undo log、redo log、 bin log的作用是什么&#xff1f; undo log 基本概念 undo log是一种用于撤销回退的日志&#xff0c;在数据库事务开始之前&#xff0c;MySQL会先记录更新前的数据到 undo log日志文件里面&#xff0c;当事务回滚时或者数据库崩溃时&#xff0c;可以…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用Binning像素合并功能(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用Binning像素合并功能&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和短曝光功能的技术背景Baumer工业相机通过CameraExplorer软件使用Binning功能Baumer工业相机通过NEOAPI SDK使用Binning功能1.引用合…

基于禁忌搜索算法的TSP路径规划matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 TSP问题描述 4.2 禁忌搜索算法原理 4.3 算法步骤 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP路径规划,输出优化收敛曲线以及路线规划图。 2.测试软件版本以及运行结果展示 …

芯课堂 | 通过ISP升级芯片固件方法及框架

一、升级原理 芯片在应用前&#xff0c;是一颗裸片&#xff0c;内部没有任何驱动或应用程序。芯片在贴上PCB板子后&#xff0c;会实现各种功能&#xff0c;这是时候会开发对应的驱动或者应用程序&#xff0c;在芯片上面运行的程序&#xff0c;一般称之为固件&#xff08;Firmw…

线程池高手进阶:揭秘ThreadPoolExecutor的小妙招!

RejectedExecutionHandler总结 ThreadPoolExecutor 是 Java 中用于创建和管理线程池的接口&#xff0c;当线程池中的任务队列已满&#xff0c;并且线程池中的线程数量已经达到最大时&#xff0c;如果再有新的任务提交&#xff0c;就需要一个策略来处理这些无法执行的任务。它 …

antd 日期选择框增加季度预设范围

测试同学说想要有个季度的预设选择框&#xff0c;方便快速选择季度的开始和结束日期。 antd 的rangepicker是支持预设的 日期选择框 DatePicker - Ant Design 实现方法很简单&#xff0c;按照官网示例用moment初始化一下即可 获取当前一季度的开始日期时间&#xff1a; mom…

系统移植 day2 bootloader->u-boot 移植

一、栈的复习 1、满栈&#xff1a;当堆栈指针SP总是指向最后压入堆栈的数据&#xff0c;称为满栈&#xff1b; 2、空栈&#xff1a;当堆栈指针SP总是指向下一个将要放入数据的空位置&#xff0c;称为空栈&#xff1b; 满栈状态下&#xff0c;先移动指针&#xff0c;后赋值. 空…

量化交易学习1

一、股票数据基本分类 可分为&#xff08;1&#xff09;技术面数据和&#xff08;2&#xff09;基本面数据 &#xff08;1&#xff09;技术面数据 技术面数据是通过股票的历史价格和交易量等市场数据进行计算和分析得出的指标。常用的技术指标包括移动平均线、相对强弱指标、…