<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的更多相关文章

  1. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  2. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  3. React 点击删除列表中对应项(React 获取DOM中自定义属性)

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  4. 用document.onreadystatechange和document.readyState确保文档加载完毕才获取DOM

    document.onreadystatechange = function(){ //document.readyState有“interactive”和“complate”两个值 if(docum ...

  5. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  6. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  7. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  8. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  9. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  10. vue 获取dom的css属性值

    <template> <div id="topInfo" ref="topInfo" style="width: 200px;hei ...

随机推荐

  1. php 环境搭配 脚本模式(1)

    php介绍目标1:<?phpecho 'hello world'; //配置好了apacheecho '<br/> 现在时间:" .date(’Y-m-d H:i:s‘)“ ...

  2. Netty入门4之----如何实现长连接

    ​ 前面三章介绍了Netty的一些基本用法,这一章介绍怎么使用Netty来实现一个简单的长连接demo. 关于长连接的背景知识,可以参考<如何使用Socket实现长连接> ​ 一个简单的长 ...

  3. percona toolkit之slave工具

    1:pt-slave-find ,主要是查找MySQL的层级,其实我感觉这个用处不是很大,因为层级比较多架构本身就很少,查看从库的话一般情况我们可以通过show slave hosts查看(不过不能显 ...

  4. 图的存储结构(邻接矩阵与邻接表)及其C++实现

    一.图的定义 图是由顶点的有穷非空集合和顶点之间边的集合组成,通常表示为: G=(V,E) 其中:G表示一个图,V是图G中顶点的集合,E是图G中顶点之间边的集合. 注: 在线性表中,元素个数可以为零, ...

  5. MapReduce过程详解(基于hadoop2.x架构)

    本文基于hadoop2.x架构详细描述了mapreduce的执行过程,包括partition,combiner,shuffle等组件以及yarn平台与mapreduce编程模型的关系. mapredu ...

  6. 用poi-3.6-20091214.jar 实现java给excel资料加密

    用poi-3.6-20091214.jar 实现java给excel文件加密我用了网上的很多方法,但是都没有成功! HSSFWorkbook wb = new HSSFWorkbook(new Fil ...

  7. UVa 10048 - Audiophobia(Floyd变形)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  8. UVa 10817 - Headmaster's Headache(状压DP)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. Codeforces Round #527 (Div. 3) D2. Great Vova Wall (Version 2) 【思维】

    传送门:http://codeforces.com/contest/1092/problem/D2 D2. Great Vova Wall (Version 2) time limit per tes ...

  10. 配置文件和mybatis文件存放位置导致系统启动不了

    1.web.xml <!-- 加载spring容器 --> <context-param> <param-name>contextConfigLocation< ...