AtomG 的技术博客

记录学习与生活

主页

标签

Github

简历

[翻译] 理解Nuxt 2.12中的 fetch

Nuxt

翻译

前端

[翻译]理解Nuxt2.12中的fetch>在研究Nuxt源码的过程中发现fetch的运行过程竟然和官网上说的完全不同，于是我灵机一动去看了英文官网...果然Nuxt2.12中更新了fetch，可以说完全变了个样，更加强大好用了，但是中文官网的文档还是2.11.X，并没有更新。看了英语文档之后在官网发现了这篇[博文](https://zh.nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12)，写得很不错，想翻译过来给学习Nuxt的同学一个参考，毕竟现在中文资料基本没有，限于水平，有错误还请指出。<aname="A8vH3"></a>介绍Nuxt在最新发布的2.12版本中引入了一个新的方法--`fetch`。Fetch提供了一种全新的方式将数据引入Nuxt应用程序中。在这篇文章中，我们将探讨`fetch`钩子的不同功能，并尝试

2020-05-25

深入理解 flex 属性

CSS

引言最近想更改一下博客首页的布局样式，添加几个侧栏，就去看了看常见的布局方式，什么「双飞翼布局」「圣杯布局」也就两侧固定中间自适应的三栏布局方案。不过我之前一直都是用的Flex布局，Flex布局是不是也可以做到呢，网上搜索一番，代码如下：```html<htmllang="en"><body><divstyle="display:flex;"><divclass="a"></div><divclass="b"></div><divclass="c"></div></div></body><style>.a{background-color:thistle;width:20%;}.b{background-color:tomato;flex:1;}.c{background-color:violet;width:100px;}.a,.b,.c{height:100px;}</style></

2020-05-04

使用 vw+rem 进行移动端适配

CSS

移动端适配

引言移动端适配方案千千万：弹性盒子布局，媒体查询，百分比长度，rem单位，是否了解了很多手段却不知道如何在项目中实践，今天我来告诉大家我是如何组合使用这些方法进行网站移动端适配的淘宝Flexible的REM适配在一次阿里AMFE无线前端团队双十一技术分享的时候，从手机淘宝团队中流传出了一种更加灵活的布局方案——Flexible布局，其原理可以概括成如下几点：将视觉稿分成100份，每份被称为一个单位a将根元素的font-size设置为10a即1rem为10a（rem单位长度始终等于根元素font-size大小）这样就可以使rem单位长度随着视口宽度而变化，然后使用rem单位进行开发，这样元素大小等就会随着不同设备的视口大小而变化，真正的实现了弹性布局，适配性非常的不错。>关于淘宝Flexible的具体使用方法和更深层次的原理，请移步[使用Flexible实现手淘H5页面的终端适配](http

2020-03-04

居中到底能有多少种方法

CSS

前言居中可以说是网页布局中非常常见的布局了，垂直居中，水平居中，其中又分为块级元素和行内元素，没有系统的整理过还真有点搞不清楚。来看看各式各样的居中到底有多少种。水平居中行内元素水平居中行内元素水平居中最常见的场景就是文字居中，最常用的就是对其父元素设置`text-align:center`,这个方法对一下几种元素都有效：display:inlinedisplay:inline-block、display:inline-tabledisplay:inline-flex```html<divclass="parent"><a>我的博客</a></div>``````css.parent{text-align:center;}```![显示效果](https://img.liuxiaogu.com/blog-img/2020-2-24-1582509104320.png)块级元素水平居中1.设

2020-02-24

JavaScript 数据类型与类型判断

JavaScript

一、JavaScript数据类型JavaScript数据类型有两种，分别是基本数据类型和引用数据类型。基本数据类型NumberStringBooleanUndefinedNullSymbol(ES6新增，表示独一无二的值)引用数据类型ObjectFunctionArray我们来详细了解一下这两种数据类型的特点1.基本数据类型值不可变基本类型的值是不可变的```javascriptvarname='javascript';name.toUpperCase();//'JAVASCRIPT'console.log(name);//'javascript'```但是我们不是经常有++a这种操作吗？比如```javascriptleta=1console.log(++a)//'2'```其实这个时候并不是a指向的1直接加了1，而是新建了一个1+1=2的值，再将a指向这个新建出来的2，原来的那个1并没

2020-02-17