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')

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

Vue生命周期-手动挂载理解相关推荐

Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
对vue生命周期的深入理解
一.Vue生命周期简介官网:https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程,就是生命周期.详细来说也就是从开始创建.初始化数据.编译 ...
vue 生命周期_深入理解Vue实例生命周期
‍vue实例生命周期与生命周期钩子‍ 每个 Vue 实例在被创建时都会经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 为了让开发者在 ...
vue生命周期、钩子理解
在vue文档中,对生命周期部分有如下视图: 看起来有些复杂,对于一些名词甚至还不是很熟悉,所以在查找后,我整理如下: new vue 创建vue实例 init events & lifecyc ...
对Vue生命周期钩子的理解
beforeCreate:是 new Vue() 之后触发的第一个钩子,在当前阶段 data.methods.computed 以及 watch 上的数据和方法都不能被访问. created:在实例创 ...
Vue生命周期钩子的理解
组件从创建到销毁的一系列过程叫做组件的声明周期. vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑,并且这些函数会在一些特定的场合下去执行.(在生命周期的某一个时刻进行触发). 组件 ...
Vue生命周期(个人理解)
描述:今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期剩下的自己扩展,哎,自己来了兴趣,为啥,自己第一次面试的时候记得很清楚.面试官:"简单说一下你对vue生命 ...
Vue生命周期（初始阶段、挂载阶段、更新阶段、销毁阶段）
目录钩子函数 Vue生命周期之初始化阶段 Vue生命周期之挂载阶段 Vue生命周期之更新阶段 Vue生命周期之销毁阶段代码执行: 首先,我们了解一下"生命周期"这个词. ...
Vue生命周期通俗理解
Vue 的生命周期个人通俗理解:把Vue生命周期想象成一个人的创造 01. 创建一个躯干:(new Vue) 02. 初始化耳朵.鼻子.眼睛:(创建一些空的生命周期函数和方法) 03. 赋予耳朵能听 ...
Vue生命周期和钩子函数的一些理解
vue生命周期简介咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

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

Vue生命周期-手动挂载理解相关推荐

最新文章

热门文章