Vue生命周期-手动挂载理解
改前端遇到个bug，console能够输出值，但是前端不能显示。
我简直一脸懵逼，vue的问题？网络的问题？浏览器的缓存问题？
公司网络，所以直接排除网络问题。
浏览器缓存，试了下确实一定概率可以显示，但是，哪怕浏览器不行，我们也只能从自己的代码里修改来配合它，兼容它。
所以，这是vue的问题。
那么是vue的兼容问题？vue的缓存问题？vue的数据显示问题？
兼容这玩意，要改只能大改vue的代码了，我是后端工程师，所以，直接pass，真到这步肯定直接给前端的搞了。
那么是缓存还是显示？
console能够输出值，但是前端不能显示。显然，是显示问题。
所以，直接看vue的生命周期
显然能输出空值，应该是绑定事件之后出的错，那么就是数据挂载的问题。
解决方法：默认的挂载不行，那么就手动挂载呗。
但是，网上的手动挂载什么的js代码都很长，其实可以直接利用html5的特性，绕过绑定。
<option v-show="false" selected="selected">{{v.userId}}</option>
//v-show="false" 不显示
//{{v.userId}} 直接在html5页面取出来不适用绑定方法，直接取值，然后不显示，这是最简单的手动挂载，只用一句！
<select class="form-control" v-model="v.userId">
<option v-show="false" selected="selected">{{v.userId}}</option>
<option v-for="object in clientDTO.userList" :value="object.userId">
{{object.userId}}
</option>
</select>后接js的方法
用$mount()手动挂载
var obj= {name: '张三'}
var vm = new Vue({
data: obj
})
function test() {
vm.$mount("#app");
} 用extend()用以创建没有挂载的的子类,可以使用该子累创建多个实例，即直接js写html页面
var app= Vue.extend({
template: '<p>{{firstName}} {{lastName}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White'
}
}
})
// 创建 app实例，并挂载到一个元素上。
new app().$mount('#app') 本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-02-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读