在created中创建dom操作的方法是什么?

简介: 在created中创建dom操作的方法是什么?

使用Vue.nextTick()是什么?

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;

nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数

<template>
  <div class="hello">
    <h1 id="nextTick" ref="hello">hello boy!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld'
    }
  },
    created(){
        let that=this;
          that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
          that.$refs.hello.innerHTML="hello girl!";  //写入到DOM元素
      });
 
  },
}
</script>
 
<style scoped>
h1 {
  font-weight: normal;
}
</style>
目录
相关文章
|
4天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
4天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM通过属性(如nodeName、nodeValue、parentNode、childNodes和attributes)和方法提供编程接口,让开发者用JavaScript等语言以节点方式交互XML。属性描述节点信息,方法执行操作,如删除节点。
|
4天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
10 2
|
4天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
14 0
|
4天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
16 0
|
4天前
|
XML JavaScript 前端开发
XML DOM - 属性和方法
XML DOM 提供编程接口,让开发者用JavaScript等语言操作XML文档。接口包含属性和方法,属性如nodeName、nodeValue、parentNode和childNodes,用于查询节点信息;方法如getElementsByTagName、appendChild和removeChild,执行增删操作。示例中,JavaScript代码`txt=xmlDoc.getElementsByTagName(&quot;title&quot;)[0].childNodes[0].nodeValue`从books.xml获取第一个&lt;title&gt;元素的文本内容,赋值给变量txt。
|
4天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
4天前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
16 0
|
4天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
4天前
|
JavaScript 前端开发
JavaScript Dom方法
JavaScript Dom方法
41 2