获取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 ...
随机推荐
- Windows Server 2008 R2配置JSP网站无法访问
在Windows Server 2008 R2中配置好JSP网站后,在本机可以使用 localhost访问网站,但是局域网内其机器无法访问,则需要在Windows Server 2008 R2的系统管 ...
- springmvc中配置RESTful风格控制器
一般的http请求中其实只需要get和post就可以满足项目需求了,而为什么还要使用restful可能就是为了使请求url看起来更加直观,好看吧.. restful常用的请求方式:get,post,p ...
- CVE-2015-1642 POC
月初,玄武实验室的“每日安全动态”推送了一篇office UAF漏洞利用的文章,之前对office上UAF漏洞利用占位问题有些疑问,刚好就借助这篇文章重现了一下.其中堆喷射部分不是特别稳定,漏洞成因和 ...
- 沉淀,再出发:Git的再次思考
沉淀,再出发:Git的再次思考 一.前言 使用git也有很久了,后来有一段时间一直没有机会去使用,现在想来总结一下自己学习了这么长时间的一些心得感悟,我写的博客一般都是开了一个轮廓和框架,等到以后有所 ...
- Spark Worker原理和源码剖析解密:Worker工作流程图、Worker启动Driver源码解密、Worker启动Executor源码解密等
本课主题 Spark Worker 原理 Worker 启动 Driver 源码鉴赏 Worker 启动 Executor 源码鉴赏 Worker 与 Master 的交互关系 Spark Worke ...
- 【zz】史上最全设计模式导学目录(完整版)
2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多篇与设计模式学习相关的文章,涵盖了七个面向对象设计原则和24个设计模式(23个GoF设计模式 + 简单工厂模式),为了方便大家 ...
- July 20th 2017 Week 29th Thursday
The darkness is no darkness with you. 有了你,黑暗将不再是黑暗. The darkness will not be driven out if we failed ...
- 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 ...
- 解决SpringMVC拦截器拦截静态资源的问题。
在使用SpringMVC进行开发的时候,遇到了以下代码不能执行的情况.而且我已经正确导入了JQuery框架. <script type="text/javascript"&g ...
- canvas的两个方法说明
今天在用canvas的时候,发现有两个方法比较陌生,在此记录详细说明一下. (1)文本绘制的一个方法 canvas.drawTextOnPath(text, path, hOffset, vOffse ...