Vue23 ref属性
1 简介
在js中,我们获取一个元素可以通过document.getElementById()去获取,在vue中,使用了ref属性来替代id,通过ref属性可以获取html元素以及vue组件实例对象
它被用来给元素或子组件注册引用信息(ID的替代者)
该属性应用在html元素时,获取的是dom元素对象,如果应用在组件标签上,那么获取的是组件实例对象(vc)
2 使用方式
在标签添加ref属性即可
<h1 ref=“xxx”>ref</h1>
<School ref=“xxx”></School>
通过组件实例的$ref属性可以获取
this.$refs.xxx
3 示例
1)main.js
//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue' // 关闭生产提示
Vue.config.productionTip = false //创建一个vue实例
new Vue({
//这个目前还没学过,先知道他的作用是将app放入容器中。
render: h => h(App), //配置该vue实例管理id为app的容器
}).$mount('#app')
2) app.vue
<template>
<!-- 编写结构 -->
<div> <!-- 分别使用id和ref -->
<h1 ref="h1d">ref属性学习</h1>
<h2 id="h2d">ref属性学习</h2>
<hr>
<school ref="schRef"></school>
<school id="schId"></school>
<button @click="showDom">打印dom</button>
</div>
</template> <script> //引入school组件
import school from "./components/School.vue" export default { components:{
//注册组件
school
},
methods:{
showDom(){
//根据id进行打印
console.log(document.getElementById("h2d"));
console.log(document.getElementById("schId")); //根据ref属性进行获取
console.log(this.$refs.h1d);
console.log(this.$refs.schRef); }
}
}
</script> <style> </style>
3) school.vue
<template>
<!-- 编写组件结构代码,也就是html代码 -->
<!-- 需要一个div括住,也就是只能有一个根元素,一般使用div -->
<div class="orange">
<div>学校:{{schoolName}}</div>
<div>地址:{{schoolAddress}}</div>
</div>
</template> <script>
//交互代码编写的地方,需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识,这里一般使用默认暴露,因为这是单文件组件,只需要暴露一个组件对象,
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
schoolName:"尚硅谷",
schoolAddress:"北京"
}
},
}
</script> <style>
/* 编写样式的地方 */
.orange{
background-color: orange;
}
</style>
4) html.index
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
5) 效果
两者获取html标签,获取到的都是html元素,通过原生js去获取组件标签,获取到的是组件最后在页面上的元素,而ref获取到的是组件实例对象。
Vue23 ref属性的更多相关文章
- spring中ref属性与<ref/>标签
在bean的内部引用另一个bean对象: 使用ref标签对其进行引用: <ref bean="viewResolver2"/> <bean id="vi ...
- spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" />
spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...
- [转]spring property标签中的 ref属性和ref 标签有什么不同
spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> sp ...
- Vue.js 源码分析(十) 基础篇 ref属性详解
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...
- Vue使用ref 属性来获取DOM
注意,在父组件中可以使用this.$refs.属性名 获取任何元素的属性和方法,子组件不可以获取父组件中的 <!DOCTYPE html> <html lang="en& ...
- React Native中ref的用法(通过组件的ref属性,来获取真实的组件)
ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...
- ref属性
ref属性 1.被用来给元素或组件注册引用信息(id的替代者) 2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识:<h1 ref=& ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue ref属性 && props配置项
1 // # ref属性: 2 // # 1.用来给元素或者子组件注册引用信息(id的替代者) 3 // # 2.应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc) ...
- Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
欢迎大家加入我的社区:http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录 1.脚手架的分析 2.ref属性 2.1 基础知识 2.2 代码实现 2.3 测试效果 3.Props ...
随机推荐
- RSA、DSA 和 ECC 加密算法有什么区别?
RSA.DSA 和 ECC 加密算法是用于在公钥基础设施中生成密钥的主要算法. 公钥基础设施 (PKI) 用于管理互联网通信和计算机网络中的身份和安全性. 启用 PKI 的核心技术是公钥密码术,这是一 ...
- Go语言核心36讲21
提到Go语言中的错误处理,我们其实已经在前面接触过几次了. 比如,我们声明过error类型的变量err,也调用过errors包中的New函数.今天,我会用这篇文章为你梳理Go语言错误处理的相关知识,同 ...
- 【云原生 · Kubernetes】Taint和Toleration(污点和容忍)
个人名片: 因为云计算成为了监控工程师 个人博客:念舒_C.ying CSDN主页️:念舒_C.ying Taint和Toleration(污点和容忍) 概念 添加多个tainit(污点) 使用例子 ...
- 基于python的数学建模---非线性规划
凸函数的非线性规划 minimize 求解的是局部最优解 简单的函数,无所谓 复杂的函数 初始值的设定很重要 scipy.optimize.minimize(fun,x0,args=(),method ...
- i春秋Zone
打开网页是个简单的表单填写, 尝试注入....没用 查看源码,没找到什么有用的信息 只有抓包了 发现一个cookie的login值为0,改为1试试 没什么特别的回显,但这应该就是登录与否的判定了,所以 ...
- Training: Stegano I
原题链接:http://www.wechall.net/challenge/training/stegano1/index.php 很明显,这是一道图像隐写题,因为他说的 我们右键图片,点击其他窗口打 ...
- Guess Next Session
打开又是一个输入框的界面,点一下下面的看源码 很简短的一个源码 大概意思是如果password等于session[password]就输出flag 直接搜了下session函数的漏洞,发现sessio ...
- Day21:方法重写以及注意细节
目录 方法重写 什么是方法重写? 方法重写有什么用? 方法重写的注意细节 方法重写 什么是方法重写? 方法重写指的是当子类和父类出现了一摸一样的方法声明 方法重写有什么用? 当父类中有一个方法时,子类 ...
- linux配置 python 开发环境sublime text及一些使用心得
前言 一直以来我都使用 sublime text 作为主流开发的 ide ,但其实我开始在我的 linux mint 系统使用 sublime text 配置 python3 的开发环境踩过的坑又何止 ...
- 嵌入式Linux Qt移植详细过程
嵌入式Linux下的Qt移植详细过程 开发说明 前段时间需要用开发板写一个下位机程序,是基于Linux系统,就想着用Qt来写,于是上网找教程看如何移植到开发板上.由于我不熟悉嵌入式Linux,加上网上 ...