vue中的mounted方法详解

Vue干货 小白 暂无评论

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

喜欢 ()or分享