快速学习前端开发-前端开发路线
2021-07-29 12:19:38 0 举报AI智能生成
登录查看完整内容
前端开发路线，暑期带你不走偏快速学习前端开发
作者其他创作
大纲/内容
认识WEB
HTML标签
语义化标签
html
基础选择器
复合选择器
伪类选择器
选择器
层叠性
继承性
优先级
CSS三大特性
定位
浮动
布局
方法一：margin + width
方法二：table + margin
方法三：inline-block + text-align
方法四：absolute + margin-left
方法五：absolute + transform
方法六：flex + justify-content
水平居中的几种方法
Block format content，块级格式上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
解释
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex inline-block等
形成BFC的常见条件
计算 bfc 的高度时，浮动元素也参与计算
bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
BFC 的特性
BFC
相邻元素垂直外边距的合并
嵌套块元素垂直外边距的合并（塌陷）
外边距合并
字体图标
Chrome调试
其他
CSS
精灵图
reset.css
normalize.css
CSS 样式初始化
LOGO SEO优化
网站 favicon 图片
title 网站标题
description 网站说明
keyword 关键字
网站TDK三大标签SEO优化
common.css
公共样式抽离
模块化开发
CSS进阶
H5新增的标签
CSS3新增选择器
盒子模型
滤镜
calc函数
过渡
translate
C3的新特性
rotate 旋转
orign 转换中心点
scale 缩放
rotate 3D旋转
transform
定义动画
调用动画
animation
本地存储
H5+C3
HTML和CSS
布局视口
视觉视口
理想视口
视口
1.流式布局(百分比布局)
2.Flex布局
3.rem+less
4.Bootsarp
5.Grid
常用布局
物理像素/设备像素
设备独立像素/设备无关像素
像素相关
viewport
多倍图
less
媒体查询
rem
Bootstarp
flexible.js与swiper
基础/插件
touchstart
touchmove
touchend
touchcancel
移动端事件
点击穿透
1px 边框问题
常见问题
移动端Web
基本语法
数据类型
函数
作用域和预解析
封装、继承、多态
面向对象编程
原型链、闭包
ECMAScript
事件捕获、冒泡、代理、委托
常用方法
DOM
定时器
localhost
history、navigator
BOM
let、count
symbol
解构赋值
箭头函数
模板字符串
ES5/6/7
Canvas(了解)
常用API
样式操作
jQuery效果
属性操作/元素操作
绑定事件
插件
jQuery
JavaScript
CommonJS
ES6
JS模块化
关于css阻塞
关于js阻塞
阻塞渲染
盒子模型相关属性会触发重布局
回流
重绘是一个元素外观的改变所触发的浏览器行为
重绘
重绘/回流
减少DOM操作
使用translate代替left、top
减少css选择器层级
修改DOM尽量使用css
性能优化
概念：延迟要执行的动作，若在延时的这段时间内，再次被触发了，则取消之前开启的动作，重新计时
函数防抖
设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行
函数节流
防抖与节流
SessionStorage
LocalStorage
Web Storage
浏览器在本地磁盘上将用户之前请求的数据存储起来
当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据\t
缓存理解
强缓存
协商缓存
缓存分类
缓存header参数
缓存
JavaScript高级
NPM
Yarn
系统模块
第三方模块
Gulp
Node.js
HTPP协议的概念
HTTP协议是什么?
报文
HTTP协议
基本命令
增、删、改、查
创建集合
约束字段
集合关联
MongoDB
语法
条件判断
循环遍历
模板继承
模板配置
art-template
ejs
art-template模板引擎
Request
Response
cookie
session
数据加密
express框架
cheerio
download
Selenium
爬虫高级
Node.js爬虫框架
原生Ajax
jQuery的ajax方法
JSONP
cors
跨域问题总结
AJAX
服务器端基础
Mustache
v-once
v-htmll
v-text
v-pre
v-cloak
插值指令
缩写-> :
v-bind绑定class
v-bind绑定style
v-bind绑定属性
计算属性的setter和getter
计算属性的缓存
computed计算属性
v-on
.stop
.prevent
.keyCode | keyAlias}
once
navtive
v-on修饰符
事件监听指令
v-if
v-else
v-else-if
v-show
条件渲染指令
v-for
Vue中key属性
pusho
popo
shifto
unshift
splice
sort
reverse
数组响应式方法
Vue.set修改响应式数据
v-if 和 v-for
循环遍历指令
.lazy
.number
.trim
v-model的修饰符
动态的给value赋值
值绑定
v-model
Vue.directive 注册全局指令
自定义指令
数据变化时执行异步或开销较大的操作
注意: watch 中的属性 一定是data 中 已经存在的数据
侦听器 watch
Vue.filter()
常见的文本格式化/处理
过滤器
mixin 混入
beforeCreate
created
beforeMount
mouted
beforeUpdate
update
beforeDestroy
destroyed
生命周期
Vue基础
安装装vue-router
路由组件详解
Vue-Router基础
路由的默认路径
路径的History模式
router-link的其他属性
配置路由的属性
编程式导航
动态路由匹配
路由配置其他补充
将路由对应的组件打包成一个个的JS代码块
const Home = () => import('../components/Home.vue')
使用
路由懒加载
1. 创建组件
嵌套路由实现
路由嵌套
$route.query
query获取
params
query
传递参数的方式
$router是 VueRouter 实例，对路径相关导航操作
route是当前 path 映射的组件对象
$router 和 $route的区别
获取参数
通过 meta 定义路由元信息
路由元信息
全局后置钩子
可以做一些单个路由的跳转拦截
路由独享钩子函数
组件内钩子函数
导航守卫⚔
在路由跳转的时，不会保存页面当前的状态
旧的组件会被销毁，新组件会被创建，再走一遍完整的声明周期
页面缓存
keep-alive是 Vue 内置的一个组件
可以使被包含的组件保留状态，或避免重新渲染
作用
inclue：值是字符串或正则表达，只有匹配的组件会被缓存
exclue：值是字符串或正则表达，任何匹配的组件都不会被缓存
属性
activated
deactivated
keep-alive独有生命周期
keep-alive组件
VueRouter
State之所以叫单一状态树，就是因为用一个对象包含了全部层级状态
单一状态树
state的改变完全由 mutations 控制
State 单一状态特点
当一个组件需要获取多个状态时
mapState
State
当你需要对 State 进行计算、筛选、过滤时
你可以把他看作Vuex的计算属性
描述
state
getters
可以传递给getters参数
传递参数
Getters参数
mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
mapGetters
Getters
Vuex的 state 状态更新的唯一方式：提交Mutation
Mutation状态更新
字符串的事件类型， 也就是事件名/函数名
一个回调函数，该回调函数第一个参数就是state
Mutation主要包括两部分
mutation接收两个参数：state和payload
Mutation传递参数
1. 通过 commit 方式提交
2. 通过 type 方式提交
Mutation提交方式
Mutation 常量替换事件类型
Mutations
Action 可以包含任意异步操作
基本定义
在Vue组件中，使用 dispatch 来调用 Action 中的方法
Action的分发
用来获取在 Action 中异步操作状态
Action返回Promise
Actions
Modules
Vuex
Vue
React基础语法
React绑定属性
React事件绑定
React条件渲染
React基础
React 生命周期
React 组件通信
高阶组件
React其他特性
React组件化开发
认识纯函数
Redux核心API
React-Redux的使用
React-Redux
Redux-Middleware中间件
redux-sage
immutable
Redux
history模式
link组件
NavLink组件
BrowserRouter
hash模式
Link组件
HashRouter
Router用于路径的匹配
path：用户设置匹配到的路径
component：匹配到的路径，渲染的组件
exat：精准匹配
Route
路径被选中时，对应的a元素添加class
活跃时(匹配)的样式
activeStyle
活跃时添加地class
activeClassName
精准匹配
axact
NavLink
使用场景
使用 Switch 包裹所有 Route 组件
Switch
Redirect用于路由的重定向
to="/login"
Redirect
React-Router核心API
withRouter(手动路由跳转)
react-router其他补充
·将所有的路由配置放到一个地方进行集中管理
yarn add react-router-config
配置路由映射关系数组
安装
在路由嵌套中配置路由映射关系
嵌套子路由配置映射关系
reacat-router-config
React-Router
css
css-module
styled-component
React样式的选择
React
前端开发路线
0 条评论
回复 删除
下一页
