第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script>
</head> <body>
<div id="app">
<input type="button" value="获取元素" @click="getElement" ref="mybtn">
<h3 id="myh3" ref="myh3">哈哈哈，今天天气太好了！！！</h3> <hr>
<login ref="mylogin"></login>
</div> <script> var login={
template:'<h1>登录组件</h1>',
data(){
return{
msg:'son msg'
}
},
methods:{
show(){
console.log('调用了子组件的方法')
}
}
} //创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
msg:''
},
methods:{
getElement(){
// console.log(document.getElementById('myh3').innerText) //ref 是英文单词 【reference】引用 referenceError
// console.log(this.$refs.myh3.innerText)
// console.log(this.$refs.mylogin.msg)
this.$refs.mylogin.show()
}
},
components:{
login
}
});
</script>
</body>
</html>
个人理解：相当于给你想要操作的DOM元素做过标记（ref），之后通过这个标记（ref）就可以获取DOM元素做相应的操作了，而不是通过操作DOM元素相关的API，比如document.getElementById()来获取DOM元素。
第六章 组件 67 使用ref获取DOM元素和组件引用的更多相关文章
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
随机推荐
- APP安全_Android反编译
反编译 Android的反编译工具:apktool,JEB等. Apk 文件的结构,如下: META-INF:签名文件 res:资源文件,里面的 xml 格式文件在编译过程中由文本格式转化为二进制的 ...
- web安全checklist
web安全漏洞场景分析 输入输出检验不充分 设计缺陷 环境缺陷
- 论文阅读 | Universal Adversarial Triggers for Attacking and Analyzing NLP
[code] [blog] 主要思想和贡献 以前,NLP中的对抗攻击一般都是针对特定输入的,那么他们对任意的输入是否有效呢? 本文搜索通用的对抗性触发器:与输入无关的令牌序列,当连接到来自数据集的任何 ...
- FTL-SLC&MTC&TLC
1.博客 SLC.. http://diybbs.zol.com.cn/67/231_661182.html 2.FTL --作者在普及了一些FTL基本知识后,主要分析了在linux上实现的途径 ht ...
- Docker不完全使用指南
Docker官方文档:https://docs.docker.com/ 神马是Docker? Docker可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器. 开发者在笔记本上编译测试通过 ...
- 记：SpringBoot项目莫名出现ClassNotFoundException
最近某个开发环境的某个应用,隔三差五出现了某某页面找不到,网上百度找了些同类的问题都是说jstl包与默认tomcat里的包冲突,但都感觉和我的问题不是很搭配(因为相同框架的其他项目都可以正常允许) 报 ...
- [转帖]postgresql 在等待服务器启动时超时
postgresql 在等待服务器启动时超时 2018年12月24日 :: my_name_nb 阅读数 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接 ...
- [转帖]shell中的特殊符号总结
http://www.embeddedlinux.org.cn/emb-linux/entry-level/201907/18-8747.html 在shell中常用的特殊符号罗列如下: # ; ...
- JSP与Servlet之间的交互,传值
一.Servlet 首先要明白一点,servlet需要容器的支持才能够运行,如Tomcat.jetty 达到servlet的请求,需要ServletRequest对象和ServletResponse对 ...
- 进阶Java编程(13)反射与Annotation
1,反射取得Annotation信息 从JDK1.5之后Java提供了Annotation技术支持,这种技术为项目的编写带来了新的模型,而后经过了十年的发展,Annotation的技术得到了非常广泛的 ...