实力强的web前端培训机构排行榜
预约试听

课程详情

**章:前端开发基础篇(10天)

  1. HTML 基础:HTML 简介 W3C HTML 结构和规范 HTML 基础标签 字符实体 表格 table 表单 from 容器标签 框架 frame,学会网页标签的使用;

  2. CSS 和网页 布局:CSS 简介 如何定义样式表 CSS Selectors CSS Sprite CSS 优先级和权重计算,继承 盒子模型 Box Model 圆角边框,阴影,表格边框 CSS 画圆和三角形 块级元素,内联元素,文档流 网页布局 Layout float, clear, overflow position, z-index,结合HTML,可以实现页面的布局 ;

  3. 腾讯企业QQ 项目 :使用技术:HTML5+CSS3+DIV布局 课程涉及知识点: HTML:文本、图像、链接、列表、框架、视频、音频 CSS:浮动,定位,盒子模型,清浮动,实现前端web项目;

第二章:移动web开发篇(7天)

  1. HTML5:HTML5 新增标签 多媒体音频标签 多媒体视频标签 新增 input 标签 新增表单属性 属性选择器 结构伪类选择器 伪元素选择器,使用HTML5标签可以布局页面;

  2. CSS3:2D 转换之 translate 2D 转换 rotate 2D 转换之 scale 图片放大案例 分页按钮案例 动画(animation) 奔跑的熊大案例 3Dtranslate 3Drotate 两面翻转盒子案例 3D导航案例 3D旋转木马案例 无缝滚动案例 ,使用css3做各种特效 ;

  3. 流式布局:布局视口 layout viewport 视觉视口 visual viewport 理想视口 ideal viewport 物理像素&物理像素比 移动端视网膜屏幕像素处理 css3盒子模型 流式布局 京东移动端首页案例,使用流式布局,布局出移动端页面,可以自适应屏幕 ;

  4. flex布局 :flex布局原理 使用flex布局,布局出移动端页面,可以自适应屏幕 - flex-direction:设置主轴的方向 - justify-content:设置主轴上的子元素排列方式 - flex-wrap:设置子元素是否换行 - align-content:设置侧轴上的子元素的排列方式(多行) - align-items:设置侧轴上的子元素排列方式(单行) - flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap - flex子项目占的份数 - align-self控制子项自己在侧轴的排列方式 - order属性定义子项的排列顺序(前后顺序) 携程网首页案例;

  5. rem布局:rem单位 媒体查询 Less 变量 Less 嵌套 Less 运算 rem适配方案 苏宁首页案例 ,使用rem布局,布局出移动端页面,可以自适应屏幕 ;

  6. 响应式布局:响应式开发原理 响应式布局容器 bootstrap bootstrap布局容器 bootstrap栅格系统 阿里百秀案例,使用响应式布局,布局出移动端页面,可以自适应屏幕。

第三章:javascript网页编程篇(19天)

1.Javascript基 础:JavaScript 介绍,应用,编写,执行 console 注释 变量,变量声明提升,全局变量,常量 7 大数据类型 Object 三种类型、typeof、数据类型转换 运算符 流程控制:条件分支,循环,异常处理,break,continue 函数:定义,调用,函数表达式,函数递归,arguments 函数的作用域 闭包 Closures 立即执行函数、预定义函数 json数据处理 常用内置对象:Function, Number, Math, Date, String Array 数组,数组方法 pop push shift unshift,自定义数组 排序,冒泡排序 字符串、数组的相关函数 大量案例演示,学会使用js编码程序,实现简单业务逻辑;

2.web-API:DOM层级、类型 查找DOM节点操作 对节点的删除、添加、修改操作 节点间的固定定位距离、页面滚动距离、页面滚动事件 获取元素宽高及属性 获取可视区的大小 弹窗及window.location、window.navigator的使用 光标事件 event对象 事件流、事件捕获、事件冒泡、取消事件冒泡 事件绑定、取消事件绑定 键盘事件 默认事件及如何组织默认事件 事件委托及事件委托的好处 大量案例演示,学会使用js操作DOM节点,实现各种业务逻辑,效果;

3.javascript高级:正则表达式 RegExp对JS风格 正则涉及到的函数 search、match、replace 正则匹配的关键字、[]、排除、转义字符、量词的使用、中文匹配 面向对象、OOP特点 抽象、封装、继承 工厂模式 深入介绍闭包 构造函数、原型、原型链 继承、原型继承、call apply继承 es6的解释、es6发布时间 es6运行环境 let、const 解构Destructuring 模板字符串 函数参数的默认值 箭头函数 类和类的继承 set、map Promise 承诺编程,使用正则表达式完成字符的校验,可以使用原型创建对象,使用箭 头函数等;

4.数据可视化 Echarts:大屏幕适配技术解决方案的应用 Echarts 各类型数据可视化图表的应用 根据需要求创建折线图、K线图、地图等图表,使用Echarts可以创建出企业项目中需要的各种图表;

第四章:前后端交互篇(9天)

  1. Ajax:Ajax 基础 Ajax 运行原理及实现 onreadystatechange Ajax 异步编程 模板引擎 FormData 同源政策 JSONP CORS 跨域 $.ajax() $.get、$.post 全局事件 RESTful XML,使用Ajax可以发送异步请求到服务器,使用在不刷新页面的情况 下做业务逻辑;

  2. Git和GitHub:linux基本命令 Git 安装配置 SVN 使用 SVN 冲突解决 Git 安装配置 Git 工作流程 Git 工作区、暂存区和版本库 Git 创建仓库 Git 基本操作 Git 分支管理 Git 查看提交历史 Git 标签 Git Github Git 服务器搭建 GitHub ,使用git进行远程仓库的管理和本地仓库的管理,回退等操作;

  3. nodejs :node环境搭建 全局对象global Node.js模块化开发 系统模块 第三方模块 Gulp使用 Gulp插件 服务器端基础概念 创建web服务器 HTTP协议 HTTP请求与响应处理 Node.js异步编程,使用nodejs创建后台服务器,可以和前端配合实现前后端逻辑交 互;

第五章 Vue.js篇(24天)

1.Vue基础:Vue 特点 Vue 实例 插值表达式 {{}} 指令: v-bind, v-if, v-for, v-model, v-on 使用组件构建应用 Vue 实力属性和方法 实例生命周期 模板语法与绑定 过滤器 Filter 计算属性 computed 方法 methods 观察 Watchers v-bind:class, v-bind:style 条件渲染:v-if, v-show 列表渲染 组件和 v-for 数组更新检测:变异方法,非变异方法 事件处理器 $event 特殊变量 事件修饰符 按键修饰符,内置按键别名,组合按键修饰符 表单控件绑定 表单绑定修饰符:.lazy, .number, .trim,使用Vue.js可以创建前端程序;

2.Webpack+ES6 模块化:Webpack Webpack 安装,打包,脚本配置,运行 Source Map 配置 使用 webpack 构建本地服务器 Loaders Babel Babel plugins json loader css loader & style loader CSS modules 模块化 :global CSS 预处理器 less loader sass loader postcss loader banner plugin html webpack plugin html webpack plugin extract-text-webpack-plugin uglifyjs-webpack-plugin Code Splitting – CSS Code Splitting - require.ensure 缓存控制 babel 默认导入/导出 按需导入/导出,使用WebPack可以打包我们的前端程序进行上线使用;

3.Vue高级:组件 Component 注册全局,局部组件 组件命名约定 is 属性 组件 data 函数 父子组件数据传递 prop 验证 自定义事件:$on, $emit 原生事件监听 .native 非父子组件通信 Slot 分发内容 单个 Slot,匿名 Slot,具名 Slot 作用域插槽 动态组件 keep-alive 可复用组件 子组件索引 $refs 异步组件 resolve reject v-once 异步队列更新 自定义指令 Directive 混合 Mixin,全局混合 插件 Plugins,自定义插件 单文件组件和项目 CSS 抽取 路由 Router Vue 单元测试及覆盖率报告生成 Vuex,使用Vue高级知识点创建Vue程序;

4.Vuecli3+ElementUI:Layout 布局,Container 布局容器,Color 色彩 Typography 字体,Icon 图标 Button 按钮,Form,Radio 单选框,Checkbox 多选框 Input 输入框,,InputNumber 计数器 Select 选择器,Cascader 级联选择器 Switch 开关,Slider 滑块 TimePicker 时间选择器,DatePicker 日期选择器,DateTimePicker 日期时间选择器 Upload 上传,Rate 评分,ColorPicker 颜色选择器,Transfer 穿梭框 Form 表单,Data,Table 表格,Tag 标签,Progress 进度条 Tree 树形控件,Pagination 分页 Badge 标记,Notice,Alert 警告 Loading 加载,Message 消息提示 MessageBox 弹框,Notification 通知 Navigation,NavMenu 导航菜单 Tabs 标签页,Breadcrumb 面包屑 Dropdown 下拉菜单,Steps 步骤条,Dialog 对话框 Tooltip 文字提示,Popover 弹出框 Card 卡片,Carousel 走马灯,Collapse 折叠面板,使用Element-UI组件库进行项目的开发;

5.Vue项目:使用技术:vue+vue-cli+vuerouter+vuex+localStorage+swiper+axios 课程涉及知识点: vue:vue基础、vue组件及组件间传值、vue属性方法指令、vue过 滤器、计算属性、列表渲染、修饰符、axios等 vuex:统一状态管理 store 、state、actions、mutations、getters router:vue路由的定义、子路由的定义、路由链接的使用、路由传 参、路由懒加载、路由守卫 本地缓存:localstorage、sessionstorage swiper:轮播插件的引入,轮播的配置 Vant,使用Vue.js进行实际项目的开发;

第六章 微信小程序篇(10天)

  1. 微信小程序基础:json配置 WXML WXSS wx.request 数据缓存 地理位置 导航条动画 导航 下拉刷新 登录 用户信息,使用微信小程序开发工具进行微信小程序的开发;

  2. 微信小程序项目 :使用技术:小程序模块utils+事件绑定+组件+小程序api 课程涉及知识点: 小程序的运行环境的搭建 小程序项目的编写和上传发布 小程序结构:json配置、WXML、WXSS、JS 小程序的组件的使用:view、scroll-view、icon、text、表单组件、 导航、地图、 小程序常用API的使用:wx.request、数据缓存、地理位置、导航 条动画、导航、下拉刷新、登录、用户信息等接口的调用 ,使用微信小程序开发工具进行微信小程序的开发;

第七章 react.js篇(12天)

  1. react基础:JSX 组件系统 虚拟 DOM 生命周期 无状态组件 有状态组件 ref class 组件通信 create-react-app 路由 插值 state,掌握React基本语法,能够使用class组件实现常见的业务功能;

  2. Hooks:useState useEffect useRef useContext useEffect高级用法 放大镜案例 购物车案例,运用hooks核心知识实现购物车和放大镜经典案例效 果。

  3. Redux:状态管理流程 action dispatch store reducer redux-thunk 中间件 combineReducers react-redux 开发调试工具 点餐案例,结合React技术栈,运用redux实现点餐系统的状态管理 ;

  4. React项目:

    1.基于react hooks实现中大型后台管理系统的解决方案

    2.基于ant-design组件库解决方案

    3.基于react-router的前端路由解决方案

    4.基于redux的状态管理解决方案

    5.基于react-quill的富文本编辑器解决方案

    6.基于create-react-app的构建react项目解决方法

    7.基于axios封装请求工具类解决方案

    8.基于token的前端登录解决方案


学习不是一蹴而就 你的顾虑我们定将解答
免费领取学习资料大礼包
  • 学不会怎么办?咨询
  • 非计算机专业零基础可以学习吗?咨询
  • 免费试学真的不用掏一分钱吗?咨询
  • 想学习没有那么多学费怎么办?咨询
  • 学完能做什么?好就业吗?咨询
  • 学费多少钱?学不会能退费吗?咨询

在线快速问答通道

机构介绍

博睿同创自成立之初,一直专注于软件测试领域的研究和技能传播,坚持“一个人点燃另一个人,改变一个家庭”的职业教育本质,在功能测试、接口测试、性能测试、Python自动化测试等领域进行深入研究,为学员提供...

校区导航

玄武校区: 南京市玄武区玄武中山路薛家巷268号汇杰广场

免费试听