作品列表

自从在大二下学期接触了html和css，便引发了我对前端的兴趣，但是真正让我决定往前端方向发展的却是在大三上。但是在一个平时课业超级烦的中澳合作专业来说，抽空学前端技术的时间真的少的可怜，所以真正自学前端是从16年12月底开始，虽然现在前端行业竞争力大，但是仍会坚持学习，不断钻研下去的。

作品列表

1.某律所外包公司及法人信息表单填写及验证
2.没把所有任务做完的ife百度前端技术学院 ps:有时间会持更的
3.慕课教学の电商网站
(subpage: 数码城,
手机分类筛选 ps:后续又用ajax和base64重做了下,
产品详情,及后续购买、登录、注册页面)
4.慕课教学の企业官网 ——学会了myfocus焦点图插件
5.新年快乐移动端HappyNewYear ——浏览器以移动端方式打开
6.瀑布流布局 ——减少http请求
7.轮播图js练习懒蛋蛋！扑~
8.早期个人cv ——当时布局渣ｂ（￣▽￣）ｄ

感想

希望以后的自己能够有更多高质量的代码作品，在踩坑和填坑路上愈走愈远~~

置顶

展开全文 >>

前端基础知识补充

HTML篇

1. HTML语义化的意义：

为爬虫考虑提高搜索性，为其他要看代码的人考虑（不要今天只有你和上天看的懂代码，明天只有上帝能看的懂代码），无障碍阅读，更好的维护。

2. src和href的区别：

src是source的缩写，用于指向外部资源，比如文档中的图片，js脚本等资源，并下载应用到文档内，当浏览器解析该元素时，会暂停其他资源的下载和处理，直到该资源下载编译完毕。
href是链接网络资源，当浏览器识别该元素后，会并行下载资源并且不会停止对其他资源的处理，所以我们推荐使用link加载css，而不是@import，它不是并行加载文件，会导致页面渲染问题。

CSS篇

1.position有哪几种方式，它们之间的区别以及应用场景，跟float有什么区别

position：static，absolute，relative，fixed
float是布局，position是定位，通常比较大块的容器之间（整体框架）的布局用float，容器相对容器里面的定位用position

2.居中的方法

水平居中：

1
2
3
4
5
6
<!-- 父级 -->
css{display: flex;align-items: center;justify-content: center;}
<!-- 块级 -->
css{margin:0 auto}
<!-- 文本 -->
{text-align：center}

垂直居中：

1
2
3
4
5
6
7
8
<!-- 行级元素 -->
{line-height：}
<!-- 图片img内联块级元素 -->
{ vertical-align:middle;}
<!-- 块级元素 -->
{position:absolute;top:50% ;left:50%; margin-top: -0.5height; margin-left:-0.5width;}
<!-- 或者 -->
{ position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;}

3.清除浮动

（1）clear：both空标签-不推荐使用
（2）父级加height
（3）（最优！！！）父级长度不定时：在父级加：after伪类

1
2
.clearfix{display:block;clear:both;content:””;visibility:hidden;
height:0; zoom:1}-让父级div能自动获取到高度zoom适用于ie6/7 推荐使用

（4）父级div定义 overflow:hidden-必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ，不能和position配合使用，因为超出的尺寸的会被隐藏

more >>
置顶

展开全文 >>

Vue基础原理篇

什么是MVVM框架

首先解释下什么是MVC模式，即模型(model)－视图(view)－控制器(controller)的缩写，这也是最常见、最传统的软件架构之一。每次model中data的更新都需要重新刷新加载才能将新数据显示在网页上，但这种模式无疑浪费了很多资源，也增加了很多无意义的http请求，即使使用了Ajax的异步加载方法，任需要一些手动操作才能改变，为了提高效率，目前很多人支持使用MVVM框架，Vue、Angular皆是该模式的框架代表。
MVVM框架
如图所示，MVVM框架是有View（视图）、Model（数据）以及ViewModel（View与Model的连接器）组成。View与Model通过ViewModel实现双向绑定。

Vue是如何实现双向绑定

Vue
在Vue.js的ViewModel中使用directives指令（eg：v-bind，v-text等）对view中的dow进行封装。每一个指令都会对应一个Watcher（观察者）。

more >>
置顶

展开全文 >>

使用vue初建项目

本文所有操作都是基于已安装好Node.js和Git命令行的前提下进行的。
接触vue框架时间不长，但仍对Vue.js一知半解的，就算看了官方文档也是千头万绪，无从下手，所以我想在此博客下慢慢梳理自己的学习vue经历和知识点。

如何创建一个vue项目

1
$ npm install -g vue-cli

首先使用vue-cli（vue脚手架工具）搭建一个基本的代码结构

1
$ vue init <template-name> <project-name>

比如vue init webpack eleme 用webpack来创立一个项目名为eleme的项目
随后会自动跳出一些信息需要Author自己输入，包括：
项目名、项目描述、作者、eslint（代码风格检查器）、eslint preset（风格预设）：standard、Karma+Mocha(单元测试库)：No、e2e test：No

进入项目目录下后

1
$ npm install

安装依赖，可发现目录下多了node_modules文件夹
more >>

置顶

展开全文 >>