2019.3.28 vue epub入门,进度条(background实现)

1、对代码进行抽象改造。
2019.3.28 vue epub入门,进度条(background实现)_第1张图片
上述代码有2处相同的地方,可以抽象成
2019.3.28 vue epub入门,进度条(background实现)_第2张图片
2、对象的属性读取(如book = { } 对象,key=‘name’)
在这里插入图片描述
读取book.name

在这里插入图片描述
就是读取book.key。
要当心,所以读取的是赋值过的数据 用book[key]而不是book.key,

3、对于app支持中英文翻译,vue提供了vue-i18n包。可以实现。
首先安装在这里插入图片描述
同时在src中建立lang目录载入预先配置的语言js
2019.3.28 vue epub入门,进度条(background实现)_第3张图片
在该目录创建index.js,将vue实例引用进来,将vue-i18n库引用,将en,cn资源文件引用,使用Vue.use应用插件 ,创建messages对象存放en,cn,通过i18n创建对象,实例化i18n,引用引出模块
2019.3.28 vue epub入门,进度条(background实现)_第4张图片
再main.js中加载该模块
2019.3.28 vue epub入门,进度条(background实现)_第5张图片
最后进行引用
在这里插入图片描述在这里插入图片描述
默认locale = 'cn’中文 已引用成功。

3、说一句话共勉互勉,尤其是如何?对于年少无为,却即将后生可畏的人。你首先要做的是拥有一个健康的身体,健康的作息。以及其余时间努力的学习,做到心无杂念,你可以抽一点时间做喜欢的事,放松你的身,你的大脑。也可以投入,不过决不能一心二用。久而久之的一心二用,会注定你未来道路的崎岖分叉,这是吸引定律,科学的讲。不要攀比,不要羡慕,更不要猜忌,人活着嘛,
渺小的不能再渺小的东西,一生很长吗?不过能活很久,混日子吹牛皮到自然死亡,也是本事,但是人的一生真的不长,何况多数人活不出精彩,感叹年少无为,或是年少少为,看你的追求了。其实能活一辈子首先,绝对是福气。所以,我强调一定要身体健康,其次要爱憎分明,不与淤泥同流,你可以用语言攻击对方,你不能骂任何人的父母,父母是伟大的,对方伤害你的健康,你第一步一定要忍让,其再为,你回击,若其还为,我的做法,就是在法律容许的最大限度内伤害他的身,教育他的心,看你的本事了,有没有度。所以,第三点就是不能让小人得志。换句话说,人的一生,必定有血,就像大风大浪年年有。但正能量的人绝不会吃亏,正义也不会迟到,他知道如何把握,这就涉及到决策力,第四点就是一定要学会放松,就像我现在这样说自己想说的这种无约束的行为都可以…

4、动态添加css文件
2019.3.28 vue epub入门,进度条(background实现)_第6张图片
5、本地数据渲染到页面上流程(如theme)
1、获取localStorage中的theme对象判断是否存在,不存在则取第一次赋值,default。
存在,则获取属性值。
2、将属性值打入vuex指定的defaultTheme
3、在通过方法调用,将theme渲染入页面

6、尝试举一反三
2019.3.28 vue epub入门,进度条(background实现)_第7张图片
在学习微信书城时,发现老师的代码(1处),有不合情理之处,老师的意思是实现theme link渲染的同时,先移除所有href为theme的link(为了降低资源内存)。不合理第一处,没必要全部清除,你只需要每一次加载theme时,对上一处的theme,指定清除即可,这里我采用给link增加attribute(‘theme’)属性,表示区分。不合理二,就是如果一次性全部清空,会出现页面闪烁的情况,不好描述,就是你移除一个元素背景,html渲染自身的背景,但你又加入了css样式背景,会有三个变化。也就是从HTML默认样式背景渲染,同时又混入了新样式背景。理论上应该直接到渲染样式,就意味着你需要保留至少2个theme link ,在移除theme处时,留一处theme,覆盖html默认样式,就是第一个link。
7、一个简单的CSS问题研究了好久好久,终于找到解决问题的根本了。
问题:因为各种权重(不知多少)css样式的!important覆盖了style样式,但是控制标签如input的指定style.backgroundSize 还是无法超越!important的权重
解答: 那就让style也加上!important的权重,就是重构 style里面的内容
在这里插入图片描述
搞定!!!!!
7、进度条CSS实现模板。
2019.3.28 vue epub入门,进度条(background实现)_第8张图片
注:此处不知为何,必须linear-gradient为头,然后后边可以跟个其他颜色。

你可能感兴趣的:(2019.3.28 vue epub入门,进度条(background实现))