改前端遇到个bug,console能够输出值,但是前端不能显示。
我简直一脸懵逼,vue的问题?网络的问题?浏览器的缓存问题?
公司网络,所以直接排除网络问题。
浏览器缓存,试了下确实一定概率可以显示,但是,哪怕浏览器不行,我们也只能从自己的代码里修改来配合它,兼容它。
所以,这是vue的问题。
那么是vue的兼容问题?vue的缓存问题?vue的数据显示问题?
兼容这玩意,要改只能大改vue的代码了,我是后端工程师,所以,直接pass,真到这步肯定直接给前端的搞了。
那么是缓存还是显示?
console能够输出值,但是前端不能显示。显然,是显示问题。
所以,直接看vue的生命周期
显然能输出空值,应该是绑定事件之后出的错,那么就是数据挂载的问题。
解决方法:默认的挂载不行,那么就手动挂载呗。
但是,网上的手动挂载什么的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')