独立完成一个移动点餐wap后的小结
1.技术栈:vue vue-router vuex Mint-ui better-scroll;
2.实践总结:
a.单页应用不重新渲染组件问题:组件在初次渲染后不会重新渲染,此时当从某个路径返回到此组件对应的路径时,不会执行created或者mounted,也就不会发请求获取新数据。解决方法是监听$route。代码示例:
watch: {
$route(to, from) {
if(to.path.indexOf("xxxxxx")) {
}
if(from.path.indexOf("xxxxxx")) {
}
}
}
to.path为将要到达的路径,from.path为来自的路径。当匹配到具体路径时调用获取数据的方法更新组件数据。
b.页面间必要参数的传递: 建议使用router的query来传递页面间的必要参数,用vuex的话当用户点刷新后会丢失,用storage不会丢失但是调试也会不方便
c.用vue.set(obj,'key', 'value')设置obj的属性值将会直接改变obj在堆中的状态,是永久性的。
d.使用watch监听数组或者对象时,常常需要深度监听。代码示例:
watch: {
goods: {
handler(newVal, oldVal) {
if(newVal) {
}
},
deep: true
}
}
监听的goods是一个对象数组,当某一个对象的属性发生变化时,watch就能监听到,此时的newVal即为最新的值。
3.布局样式方面总结:
a.页面容器高度自适应: 类似需求是在页面内容高度不固定的情况下,给容器设置一个背景色。以前的解决方法是用媒体查询给出不同的高度,给的高度比所内容都加载完需要的高度还高一点,能解决问题但是不完美而且代码量大。本次的解决方案是直接设置容器的position为relative,设置top:0,bottom:0。完美解决问题。
b.文本换行:使用css3的word-wrap属性来控制文本的换行显示,取值有normal(默认)和break-word(在空格、标点符号处换行)。
对比css3的word-break来适应不同的场景,取值normal(默认)、break-all(遇到容器边界就换行,会折断单词)、keep-all(遇到容器边界换行,但连续的单词不会折断)
c.文本识别回车符:white-space: pre-line用于将在文本域中设置的内容以回车符进行换行展示。
独立完成一个移动点餐wap后的小结的更多相关文章
- 独立开发 一个社交 APP 的架构分享 (已实现)
(本博客为原创:http://www.cnblogs.com/linguanh/) My BananaCloud Android Application 前言: 这算是我的第一个 完完全全 由自 ...
- 今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在Win中见过的/r回车符号。由于编辑软件的编码问题,某些IDE的编辑器在编辑完文件之后会自动加上这个^M符号。看起来对我们的源代码没有任何影响,其实并不然,当我们把源代码文件Check In到svn之类
今天在Mac机器上使用了Flex Builder编辑了一个源代码文件,保存后使用vim命令去打开时发现系统自动在每一行的结尾添加了^M符号,其实^M在Linux/Unix中是非常常见的,也就是我们在W ...
- qt widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后还原时界面停止刷新
qt widget设置Qt::FramelessWindowHint和Qt::WA_TranslucentBackground, 会出现一个bug: 在最小化后还原时界面停止刷新 Widget wit ...
- 独立开发一个App是一种怎样的体验?
(本文原文是我在知乎上写的一篇回答:独立开发一个 App 是一种怎样的体验?) UWP业余开发者表示,非常愿意做一股清流.在喧闹无比的iOS和Android平台,为了给应用造势,太多人费尽心思,勾心斗 ...
- 分布式计算 要不要把写日志独立成一个Server Remote Procedure Call Protocol
w https://en.wikipedia.org/wiki/Remote_procedure_call In distributed computing a remote procedure ca ...
- 001windows已遇到一个关键性问题 一分钟后自动重启
重装了系统Window7,出现了如题的提示"windows已遇到一个关键性问题 一分钟后自动重启" 查找原因: 通过事件管理器可以查看如上提示遇到的问题.一般是因为一些系统的服务没 ...
- python输入一个字符串,输出翻转后的字符串(翻转字符串)
题目:输出一个字符串,输出翻转后的字符串.例如:输入字符串a123,输出321a. 方法一:使用列表的reverse方法 string=input('请输入一个字符串:') lst=list(stri ...
- using 中写 return 一样会释放using 中对象 但是会在外面定义一个一样的对象 赋值后 释放 最后 return 外面定义的那个对象
static DataTable getDataTable() { ")) { SqlCommand com = new SqlCommand("", con); Sql ...
- Python写一个自动点餐程序
Python写一个自动点餐程序 为什么要写这个 公司现在用meican作为点餐渠道,每天规定的时间是早7:00-9:40点餐,有时候我经常容易忘记,或者是在地铁/公交上没办法点餐,所以总是没饭吃,只有 ...
随机推荐
- SQL Server 利用触发器对多表视图进行更新
其步骤就是:利用update操作触发器产生的2个虚拟表[inserted]用来存储修改的数据信息和[deleted]表,然后将对应的数据更新到对应数据表中的字段信息中: 1.首先创建3个表: a.信息 ...
- flask 视图函数的使用
flask框架 视图函数当中 各种实用情况简单配置 1 建立连接 2 路由参数 3 返回网络状态码 4 自定义错误页面 5 重定向 6 正则url限制 和 url 优化 7 设置和获取cookie # ...
- mongodb 索引的基本命令
mongodb的索引: 在数据量超大的时候,能够极大的增快查询速率,但是会降低更新效率.建立索引: db.集合.ensureIndex({属性:1}) //1代表升序 -1代表降序 db.集合.ens ...
- nginx配置反向代理详细教程(windows版)
内容属于原创,如果需要转载,还请注明地址:http://www.cnblogs.com/j-star/p/8785334.html Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(I ...
- oracle获取表字段属性
select b.COMMENTS,a.COLUMN_NAME,a.DATA_TYPE,a.DATA_LENGTH, a.DATA_PRECISION,a.DATA_SCALE,a.NULLABLE, ...
- ZOJ-1649 Rescue---BFS+优先队列
题目链接: https://vjudge.net/problem/ZOJ-1649 题目大意: 天使的朋友要去救天使,a是天使,r 是朋友,x是卫兵.每走一步需要时间1,打倒卫兵需要另外的时间1,问救 ...
- POJ-1861 Network---最小生成树
题目链接: https://vjudge.net/problem/POJ-1861 题目大意: 有一些公司,公司之间需要连接起来.给出了哪些公司可以连接以及连接边的长度.求最小生成树中最大的边,以及最 ...
- [论文阅读] Deep Residual Learning for Image Recognition(ResNet)
ResNet网络,本文获得2016 CVPR best paper,获得了ILSVRC2015的分类任务第一名. 本篇文章解决了深度神经网络中产生的退化问题(degradation problem). ...
- Http读书笔记1-5章
第一章 内容提要 这一章主要介绍了什么是http以及http是干嘛的,以及与之有关的相关概念,当然了这些概念都是概览式的介绍一些.所以我将采用问答式的方式描述这一章! Q:http是干嘛的? A:ht ...
- Collections、Arrays 简明
Collections : 它的出现给集合操作提供了更多的功能.这个类不需要创建对象,内部提供的都是静态方法. 一般方法 Collections. sort (list); list 集合进行元素的自 ...