<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. 数组多功能splice()方法的插入,删除,替换

    多功能splice()插入.删除.替换 <script type="text/javascript"> var arr=['A','B','C','D','E','F' ...

  2. JavaScript中的appendChild()方法

    appendChild()方法是向节点添加最后一个子节点.也可以使用此方法从一个元素向另一个元素移动元素. 案例一:向节点添加最后一个子节点 <!DOCTYPE html> <htm ...

  3. 多线程 读写锁SRWLock

    在<秒杀多线程第十一篇读者写者问题>文章中我们使用事件和一个记录读者个数的变量来解决读者写者问题.问题虽然得到了解决,但代码有点复杂.本篇将介绍一种新方法——读写锁SRWLock来解决这一 ...

  4. classifier.cc-recv() [ns2.35]

    //without comments int chooseECNSlot() { ; ;i<=nslot_;i++) { *count) { *count); )*ti; ;j<=nslo ...

  5. mongodb数据库备份恢复-windows系统

    备份语法: mongodump命令脚本语法如下: >mongodump -h dbhost -d dbname -o dbdirectory -h: MongDB所在服务器地址,例如:127.0 ...

  6. YII2.0安装教程,数据库配置前后台 [ 2.0 版本 ]

    1.首先下载yii-advanced-app-2.0.6.tgz 2.解压到D:\wamp\www\yii2目录下面将目录advanced下所有文件剪切到 D:\wamp\www\yii2 3.打开c ...

  7. 如何用SAP Cloud for Customer的手机App创建销售订单

    第一次启动App,设置一个初始化的pin code: 输入C4C tenant的url,用户名和密码: 登录进系统后,找到Sales Order工作中心: 可以看到系统里很多已有的销售订单了.点击屏幕 ...

  8. Maven高级应用--编译全模块包-dist包

    1. 在需要生成dist包的模块级别,新建文件夹xxx-xxxx-dist 2. 进入目录,新建pom.xml,建议copy 3. dependencies节点,把要编译成全局包的应用引入进来 < ...

  9. Java中类继承、接口实现的一些要注意的细节问题

    1.接口A和接口B有相同的方法,只是返回值不同,则实现类不能同时实现这两个接口中的方法. 接口A有void C()方法,接口B有int C()方法,则无法同时实现这两个接口. Java为了弥补类单继承 ...

  10. PopupWindow学习笔记

    最近写程序第一次用到了PopupWindow,便简单了学习了一下.特此记下自己的收获.PopupWindow是一种悬浮框,比AlertDialog要灵活的多.先简单了实现一个PopWindow的效果, ...