<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. Windows Server 2008 R2配置JSP网站无法访问

    在Windows Server 2008 R2中配置好JSP网站后,在本机可以使用 localhost访问网站,但是局域网内其机器无法访问,则需要在Windows Server 2008 R2的系统管 ...

  2. springmvc中配置RESTful风格控制器

    一般的http请求中其实只需要get和post就可以满足项目需求了,而为什么还要使用restful可能就是为了使请求url看起来更加直观,好看吧.. restful常用的请求方式:get,post,p ...

  3. CVE-2015-1642 POC

    月初,玄武实验室的“每日安全动态”推送了一篇office UAF漏洞利用的文章,之前对office上UAF漏洞利用占位问题有些疑问,刚好就借助这篇文章重现了一下.其中堆喷射部分不是特别稳定,漏洞成因和 ...

  4. 沉淀,再出发:Git的再次思考

    沉淀,再出发:Git的再次思考 一.前言 使用git也有很久了,后来有一段时间一直没有机会去使用,现在想来总结一下自己学习了这么长时间的一些心得感悟,我写的博客一般都是开了一个轮廓和框架,等到以后有所 ...

  5. Spark Worker原理和源码剖析解密:Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等

    本课主题 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 Spark Worke ...

  6. 【zz】史上最全设计模式导学目录(完整版)

    2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多篇与设计模式学习相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式 +  简单工厂模式),为了方便大家 ...

  7. July 20th 2017 Week 29th Thursday

    The darkness is no darkness with you. 有了你,黑暗将不再是黑暗. The darkness will not be driven out if we failed ...

  8. January 25 2017 Week 4 Wednesday

    In every triumph, there's a lot of try. 每个胜利背后都有许多尝试. There's a lot of try behind every success, and ...

  9. 解决SpringMVC拦截器拦截静态资源的问题。

    在使用SpringMVC进行开发的时候,遇到了以下代码不能执行的情况.而且我已经正确导入了JQuery框架. <script type="text/javascript"&g ...

  10. canvas的两个方法说明

    今天在用canvas的时候,发现有两个方法比较陌生,在此记录详细说明一下. (1)文本绘制的一个方法 canvas.drawTextOnPath(text, path, hOffset, vOffse ...