获取DOM
<template>
<div>
<header-vue :msg="msg" ref="header">heheh</header-vue>
<body-vue></body-vue>
<footer-vue></footer-vue>
<div ref="div">{{msg}}</div>
</div>
</template>
<script>
export default{
data(){
return{
msg:"这是一个aaa"
}
},
methods:{
},created(){//数据装载之前获取DOM
//获取不到DOM
},
mounted(){//数据装载完成获取DOM
console.log(this.$refs.div.innerHTML);//获取原生DOM
console.log(this.$refs.header.$el.innerHTML);//获取组件DOM
}
}
</script>
<style>
</style>
获取DOM的更多相关文章
- 通过class和id获取DOM元素的区别
1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
- 用document.onreadystatechange和document.readyState确保文档加载完毕才获取DOM
document.onreadystatechange = function(){ //document.readyState有“interactive”和“complate”两个值 if(docum ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- vue 获取dom的css属性值
<template> <div id="topInfo" ref="topInfo" style="width: 200px;hei ...
随机推荐
- linux下通过NFS将远程磁盘mount到本地
最近由于项目原因需要和其他两家公司对接,需要取对方服务器中的图像数据,原本约定是三方都通过http协议来进行通讯,奈何对接方不配合,说文件就在他们服务器放着,怎么取他们不管.所以采取将对方服务器磁盘挂 ...
- C++中long是什么类型
long long本质上还是整型,只不过是一种超长的整型. int型:32位整型,取值范围为-2^31 ~ (2^31 - 1) .long:在32位系统是32位整型,取值范围为-2^31 ~ (2^ ...
- Java基础之Java中的泛型
1.为什么要使用泛型 这里我们俩看一段代码; List list = new ArrayList(); list.add("CSDN_SEU_Cavin"); list.add(1 ...
- P4python: python interface to Perforce API
P4python is the python interface to Perforce API, it helps to do Perforce operations through python. ...
- POI 导出excel带小数点的数字格式显示不对解决方法
最近看到了一个问题就是java导出excel中带小数点的数字显示不对, 比如我想在excel中第一行显示: 3,000.0 但是在excle中导出的格式总是不带小数点 3000(非文本格式),而且也 ...
- Myeclipes连接Mysql数据库配置
相信大家在网站上也找到了许多关于myeclipes如何连接mysql数据库的解决方案,虽然每一步都按照他的步骤来,可到最后还是提示连接失败,有的方案可能应个人设备而异,配置环境不同导致.经过个人多方探 ...
- lua学习笔记之userdata
这一段时间看了<programming in lua>中的第28章,看一遍并不是很难,但是只是朦胧的感觉,雾里看花,水中望月.最终还是决定敲出来自己看看,练练手,结果受益不少,也遇到了一些 ...
- CVE-2016-3231
摘要:重现了下韩国小哥Lokihardt在pwn2own上的过沙箱提权漏洞. 1 #include <windows.h> 2 #include <atlbase.h> 3 # ...
- msvcr100.dll丢失原因及解决方法
msvcr100.dll为Visual Studio 2010的一个动态链接库,如果某程序是用它开发出来的,那么该程序的运行就有可能需要此动态链接库.有些程序直接将其打包到了安装目录,并注册,就不会出 ...
- WBS 工作分解结构
WBS:工作分解结构(Work Breakdown Structure) 创建WBS:创建WBS是把项目 交付成果和项目工作分解成较小的,更易于管理的组成部分的过程. 主要用途WBS是一个描述思路的规 ...