类型:Function
详细:
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
该钩子在服务器端渲染期间不被调用。
<div id="app">
<p ref="zz">{{msg}}</p>
<div ref="wrap">
<div v-for="a in arr" ref="hh">{{a}}</div>
</div>
</div>
<script>
this.$data vm上的数据
this.$el 当前el元素
this.$watch 监控
this.$set 后加的属性实现相应式变化
this.$options vm上的所有属性
this.$refs
this.$nextTick(()=>{ //异步方法,等待渲染dom完成后获取VM
console.log(vm);
})
this.$refs 放在dom上,就是获取dom元素的
let vm=new Vue ({
a:1,
el:"#app",
data:{
msg:"hello",
arr:[1,2,3]
},
mounted(){
如果dom元素不是通过v-for循环出来的,只能获取一个,通过v-for循环出来的,可以获取多个
console.log(this.$refs.zz);
console.log(this.$refs.hh);
this.arr=[1,2,3,4];
console.log(this.$refs.wrap.children.length);
this.$nextTick(()=>{ 如果数据变化后,想获取真实的dom中的内容,
// 需要的那个带页面渲染完成后再去获取,所有的dom,最好在nextTick中
console.log(this.$refs.wrap.children.length);
debugger
})
}
})
</script>转载请注明: Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的mounted方法详解

