Vue生命周期-手动挂载理解

改前端遇到个bug,console能够输出值,但是前端不能显示。

我简直一脸懵逼,vue的问题?网络的问题?浏览器的缓存问题?

 

公司网络,所以直接排除网络问题。

浏览器缓存,试了下确实一定概率可以显示,但是,哪怕浏览器不行,我们也只能从自己的代码里修改来配合它,兼容它。

 

所以,这是vue的问题。

那么是vue的兼容问题?vue的缓存问题?vue的数据显示问题?

 

兼容这玩意,要改只能大改vue的代码了,我是后端工程师,所以,直接pass,真到这步肯定直接给前端的搞了。

那么是缓存还是显示?

console能够输出值,但是前端不能显示。显然,是显示问题。

 

所以,直接看vue的生命周期

 Vue生命周期-手动挂载理解_第1张图片

显然能输出空值,应该是绑定事件之后出的错,那么就是数据挂载的问题。

解决方法:默认的挂载不行,那么就手动挂载呗。

但是,网上的手动挂载什么的js代码都很长,其实可以直接利用html5的特性,绕过绑定。

 

 

//v-show="false" 不显示
//{{v.userId}} 直接在html5页面取出来

 

 

 

不适用绑定方法,直接取值,然后不显示,这是最简单的手动挂载,只用一句!

 

                           

 

 

后接js的方法

用$mount()手动挂载

    var obj= {name: '张三'}  
    var vm = new Vue({  
        data: obj
    })  
    function test() {  
        vm.$mount("#app");  
    }  

 用extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例,即直接js写html页面

var app= Vue.extend({  
    template: '

{{firstName}} {{lastName}}

', data: function () { return { firstName: 'Walter', lastName: 'White' } } }) // 创建 app实例,并挂载到一个元素上。 new app().$mount('#app')

 

转载于:https://www.cnblogs.com/ydymz/p/8463067.html

你可能感兴趣的:(Vue生命周期-手动挂载理解)