类型: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方法详解