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')
Vue生命周期-手动挂载理解的更多相关文章
- vue 生命周期钩子的理解 watch computed
一 理解vue的生命周期,首先需要注意几个关键字 1. el :选择器 2. $el:对应选择器的template模板(html代码) 3. render:也是vue实例中的一项,其参数更接近vue ...
- vue生命周期的理解
我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...
- Vue生命周期,面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- Vue生命周期,我奶奶看了都懂了
最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- 面试题之(vue生命周期)
在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...
- 深入 Vue 生命周期
深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
随机推荐
- C#中DBNull.Value和Null的用法和区别
DBNull.Value,, 是适用于向数据库的表中插入空值.而 null,是指在程序中表示空引用. 或者对象为空.就是没有实例化. row[column]的值为DBNull.Value的话,至少说明 ...
- WebApi 接口返回值类型详解 ( 转 )
使用过Webapi的园友应该都知道,Webapi的接口返回值主要有四种类型 void无返回值 IHttpActionResult HttpResponseMessage 自定义类型 此篇就围绕这四块分 ...
- Mego开发文档 - 索引
Mego 开发文档 Mego 快速概述 主要特性 获取Mego 使用流程 模型 查询 保存数据 入门 Mego 快速开始 创建项目 安装Nuget包 创建连接字符串 创建模型及数据上下文(添加引用) ...
- ELK学习总结(2-5)elk的版本控制
----------------------------------------------------------------- 1.悲观锁和乐观锁 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据 ...
- groovy入门(2-1)Groovy的Maven插件安装:Plugin execution not covered by lifecycle configuration
参考链接:http://www.cnblogs.com/rightmin/p/4945797.html 1.引入groovy的jar包 2.引入groovy编译插件 3.遇到问题 Plugin exe ...
- 基于python的统计公报关键数据爬取 update
由于之前存在的难以辨别市本级,全市相关数据的原因,经过考虑采用 把含有关键词的字段全部提取进行人工辨别的方法 在其余部分不改变的情况下,更改test部分 def test(real_Title,rea ...
- jodatime 时间比较
public ArrayList<CalcPeriod> getCalcPeriods() { DateTime now = DateTime.now(); DateTime.Proper ...
- java.lang.IllegalAccessError: tried to access method org.apache.poi.util.POILogger.log from class org.apache.poi.openxml4j.opc.ZipPackage
代码说简单也简单,说复杂那还真是寸步难行. 之前好好的excel导出功能,本地启动调试的时候突然就不行了,一直报上面的错. 一直在本地折腾了半天,去测试环境上看,又是好的,可以正常导出excel. 搜 ...
- git 添加管理成员
git 添加管理成员 登录git后的样子: 具体操作流程看截图和说明 : * 图中1:打开设置面板: * 图中2:打开成员面板: * 图中3:添加成员功能标签: * 图中4:添加的成员,这里会弹出 ...
- Java-NIO(八):DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.操作步骤: 1)打开 DatagramChannel 2)接收/发送数据 同样它也支持NIO的非阻塞模式操作,例如: @T ...