<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. 按键精灵Q语言基础

    一.数据类型1.1数据类型可以表示一切的类型variant逻辑类型:boolean (true,false)数学类型: 整数:byte(0-255),integer(-32768-32767),lon ...

  2. 08_Redis持久化——RDB方式

    [简述] 持久化:Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可以根据硬盘中的记录恢复数据,这一过程就是持久化. Redis支持两种方式的持久化,简单来说如下: RDB方式:会根据指定 ...

  3. CentOS安装软件出现错误:bash: /usr/local/bin/rar: /lib/ld-linux.so.2: bad ELF interpreter: No such file or directory

    CentOS安装软件出现错误: bash: /usr/local/bin/rar: /lib/ld-linux.so.2: bad ELF interpreter: No such file or d ...

  4. unity3d代码优化标准

    转载自:https://blog.csdn.net/m0_37283423/article/details/84378384 代码优化 ● 尽可能使用for来代替foreach:每次foreach会产 ...

  5. eclipse安装checkStyle

    今天用eclipse mars 安装checkstyle 代码测试工具,安装完后重启竟然没有,最后发现原来是 自己安装的步骤错了,记录下. 1. 我的版本是:Version: Mars.2 Relea ...

  6. Netty入门3之----Decoder和Encoder

    ​ Netty强大的地方,是他能方便的实现自定义协议的网络传输.在上一篇文章中,通过使用Netty封装好的工具类,实现了简单的http服务器.在接下来的文章中,我们看看怎么使用他来搭建自定义协议的服务 ...

  7. 如何解决 Linux 虚拟机磁盘设备名不一致的问题

    问题描述 在 Linux 虚拟机内,将附加的多块数据磁盘以设备名(/dev/sdxx)的方式创建文件系统,并将之写入 /etc/fstab 文件中实现启动自动挂载功能.但是在虚拟机重启之后,会随机出现 ...

  8. SQL Server 2017 on Linux

    此文转载,原文地址:https://docs.microsoft.com/zh-cn/sql/linux/sql-server-linux-whats-new CTP 2.0 The CTP 2.0 ...

  9. java Maven项目右键没有maven菜单项的解决方案!

    修改项目.project文件,确保有maven2Builder和maven2Nature2个标签: <?xml version="1.0" encoding="UT ...

  10. 【Leetcode】【Medium】Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...