在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>
目录
相关文章
|
5天前
|
JavaScript
vue实例的data属性,可以在哪些生命周期中获取到
Vue实例的`data`属性在`beforeCreate`、`created`和`beforeMount`阶段已可访问。此时,虽能使用数据,但事件监听和DOM操作不可行。`beforeCreate`时数据可访问,但未初始化观测和事件;`created`时数据完全可用,但未挂载到DOM;`beforeMount`时仍可访问数据,DOM挂载未开始。
36 3
|
9月前
|
JavaScript
Vue Antdv 列表(table、list)自定义空数据状态UI
Vue Antdv 列表(table、list)自定义空数据状态UI
393 0
|
5天前
|
JavaScript
在created中创建dom操作的方法是什么?
在created中创建dom操作的方法是什么?
11 0
|
5天前
|
JavaScript 前端开发 定位技术
《vue3实战》在created生命周期中运用slice()方法结合element plus组件实现电影评价系统的分页
《vue3实战》在created生命周期中运用slice()方法结合element plus组件实现电影评价系统的分页
|
8月前
|
缓存 JavaScript
请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
请描述下你对vue生命周期的理解?在created和mounted这两个生命周期中请求数据有什么区别呢?
79 0
|
5月前
|
JavaScript
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
jQuery学习(一)—jQuery应用步骤以及ready事件和load事件的区别
|
8月前
|
JavaScript 容器
Vue初学-----模板语法,数据绑定,Object.defineProperty()事件等基础1
Vue初学-----模板语法,数据绑定,Object.defineProperty()事件等基础1
|
9月前
|
JavaScript
在created和mounted这两个生命周期中请求数据有什么区别呢?
在created和mounted这两个生命周期中请求数据有什么区别呢?
73 0
在created和mounted这两个生命周期中请求数据有什么区别呢?
|
算法 JavaScript 测试技术
vue3源码分析——实现element属性更新,child更新
在上面流程图中,如果在setup中有一个对象obj,并且赋值为 ref({a:1}),然后通过某种方式重新赋值为2,就会触发更新流程;
vue3源码分析——实现element属性更新,child更新
|
11月前
|
JavaScript
VUE中的mounted和created在页面加载过程只执行一次,computed和watch是用来监听值发生变化的
VUE中的mounted和created在页面加载过程只执行一次,computed和watch是用来监听值发生变化的