第六章 组件 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 ...
随机推荐
- 【VS开发】socket编程原理
socket编程原理 1.问题的引入 1) 普通的I/O操作过程: UNIX系统的I/O命令集,是从Maltics和早期系统中的命令演变出来的,其模式为打开一读/写一关闭(open-write-rea ...
- 【VS开发】单文档中往视图中加入控件
[VS开发]单文档中往视图中加入控件 标签(空格分隔): [VS开发] 分隔视图的但文档窗口,要显示控件,推荐使用CFormView或者CCtrlView,前者和对话框的做法一致. 在MainFram ...
- SpringMVC 零配置 无web.xml
对SpringMVC启动流程的讲解 https://www.cnblogs.com/beiyan/p/5942741.html 与SpringMVC的整合 https://hanqunfeng.ite ...
- readline安装
wget -c ftp://ftp.gnu.org/gnu/readline/readline-6.2.tar.gz tar -zxvf readline-6.2.tar.gz cd readline ...
- 题解 P3627 【[APIO2009]抢掠计划】
咕了四个小时整整一晚上 P3627 [APIO2009] 抢掠计划(https://www.luogu.org/problemnew/show/P3627) 不难看出答案即为该有向图的最长链长度(允许 ...
- 怎样在 js 中实现 反转字符串 的功能?
"string".split('').reverse().join('');
- pat L2-008 复习manacher
马上要去比赛了 复习一下最长回文串的长度. 算法的实现两个步骤: 1. 一个是对原串的处理,在所有的空隙位置(包括首尾)插入同样的符号,要求这个符号是不会在原串中出现的.这样会使得所有的串都是奇数长度 ...
- C#面向对象14 List泛型集合/装箱和拆箱/字典集合(Dictionary)
1.List泛型集合 using System; using System.Collections.Generic; using System.Linq; using System.Text; usi ...
- MVC4学习要点记一
强类型的辅助方法:这些helper的特征是名称后面加上了 For , 这些叫做强类型的辅助方法. 共用布局页:可以在Views文件夹下面新建一个视图页,命名为_ViewStart.cshtml,将这部 ...
- HTTP请求管道事件BeginRequest和EndRequest
这是一个测试示例,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; ...