React+Vue+Node+html5+css3+移动端+less+sass+angularjs课程大纲

未分类

本课程大纲为中石油需求所定制

已一次课2小时为评估
- 总时长66时
- 上33次课
- 要上33周

JavaScript基础入门---课时：6时

课时：6时

1. JavaScript开发方式

2. 入门小例子

3. 变量的命名规则

4. 函数的使用

5. 元素的属性操作
   -案例 --- 模拟手机短信发送

6. 流程控制if语句
   -案例 --- 显示隐藏切换

7. 数据类型和运算符

8. 元素获取

9. 流程控制for循环

   • 案例 --- 选项卡切换

10. 定时器

    • 案例 --- 自动轮播图

11. 数组、字符串的方法

    • 案例 --- 文字搬运工

12. Math对象

    • 案例 --- 随机点名

javascript中级课程---课时：10时

课时： 10小时

1. DOM操作

   • 操作DOM节点
   • 元素的尺寸
   • 事件模型
   • 事件对象

2. 面向对象

   • 面向对象基本概念
   • 原型和原型链
   • 组件开发
   • Es6中class的使用

3. Jquery基础学习

   • jQuery整体架构
   • jQuery选择器
   • jQuery事件绑定

4. jQuery动画和插件

   • 使用animate方法做运动
   • 内置的运动函数
   • 如何使用第三方插件
   • 如何编写插件

React 基础 - 对React思想的理解,框架入门 ---课时：6时

课时：6时

1. 创建一个组件
2. 让组件结合起来
3. 抽象理解jsx
   
   • 语法
4. props, 让数据在组件之间流动
5. state, 更新视图
   
   • 初始化state
   • state的异步更新
   • 设置state的原则
6. 重新审视数据变化
   
   • 为什么state会更新视图
7. 组合组件的另一种方式
   
   • props.children
   • 特性
   • react提供的遍历方案
8. 创建一个标准化的组件
   
   • PropTypes
   • defaultProps
9. 绑定事件
   
   • 在unmount之前取消绑定
10. 拿到真实DOM, refs
11. 让底层组件通知老爹
12. 处理好this
    
    • 丢失的this
    • bind高阶函数的实现
    • 只在constructor使用bind
13. 自动生成的Component
    
    • list
14. 生命周期
    
    • 钩子函数
    • 生命周期
      
      • constructor()
      • componentWillMount()
      • render()
      • componentDidMount()
      • componentWillReceiveProps()
      • shouldComponentUpdate()
      • componentWillUpdate()
      • componentDidUpdate()
      • componentWillUnmount()
    • 避免渲染循环

实例：
1. React留言板
2. todolist任务列表

Vue课程大纲 ---课时：12时

课时：12时

1. vue的特性：

   • 响应的数据绑定
   • 可组合的视图组件

2. Vue 实例

   • 选项对象
   • 生命周期

3. 模板语法

   • 指令v-html v-bind v-on v-if v-for
   • 过滤器

4. 计算属性

   • computed抽离模板中数据逻辑
   • 观察water

5. 条件和列表渲染

   • 指令v-if v-else-if v-else
     v-show v-for
   • 变异方法 splice push

6. 事件处理器

   • v-on绑定事件
   • 事件修饰符v-on.修饰符
     v-on.13 v-on.enter
   • 选项参数methods

7. 组件

   • 全局组件 Vue.compoennts()
   • 局部组件 components:{}
   • 动态组件
   • 递归组件

8. 过渡动效

   • 动效标签transition
   • name属性自定义calss名
   • 动画的阶段

9. 单文件组件

   • 以.vue结尾的文件
   • 组件的三个组成：template、script、style

10. vue-cli

    • 脚手架工具使用

11. vue-router

    • 路由配置
    • 按需加载视图
    • 命名路由/视图
    • router-link
    • router-view
    • 路由信息对象
    • 懒加载
      滚动行为

12. vueX

    • 状态管理模式
      State 单一状态
      Getters 获取计算后数据
      Mutations 改变状态唯一途径
      Actions 异步操作状态
      Modules 分割模块
      vueX的项目结构
      API使用

13. axios

    • 数据请求模块
      支持Promise的API

案例：

- todolist任务列表
- 实战单页应用
- 移动端项目实操

Nodejs课程大纲 ---课时：8时

课时 8课时

1. Node介绍
   
   • 事件驱动
   • 异步I/O

2. Node模块

   • Node模块介绍
   • 引入模块 require
   • 导出模块 module.exports、export

3. NPM的使用

   • 模块管理器
   • 下载删除更新模块
4. express框架使用
   
   • 中间件
   • 路由
   • 模板引擎

5. 数据库MongoDB

   • mogoose模块的使用

6. path模块

   • 路径处理模块
7. fs模块
   
   • 文件操作模块

案例：
- 网站的登录注册
- 简易的个人博客

Html5+css3大纲 ---课时：6时

课时：6课时

1. Html5标签

   • 新特性
   • 标签语义化
   • 表单验证

2. css3选择器

   • 属性选择器
   • 伪类选择
3. 自定义文字
   
   • font-face
4. 弹性盒模型
   
   • display:flex
   • align-items
   • flex-wrap
5. 新UI方案
   
   • 圆角
   • 线性渐变
   • 径向渐变
   • 背景
   • 遮罩
6. css3过度动画
   
   • transition
   • animation
7. 3D变换

移动端 ---课时：8时

课时：8课时

1. 课前准备
   
   • 开发工具
   • 服务环境搭建
2. 像素比
   
   • 点
   • 物理像素
   • 像素渲染
   • 获取像素比
3. 视口
   
   • 初始比例
   • 是否允许缩放
   • 最大缩放比
   • 最小缩放比
4. 响应式布局
   
   • 媒体特性
   • @media
5. 移动端事件
6. transform详解
7. 自定义滑块区域

Less大纲---课时：1时

课时：1课时

1. 概念
   
   • 理解预处理器
   • 扩展css语言
2. 环境搭建
   
   • Koala工具
3. 变量
4. 嵌套规则
5. 命名空间
6. 作用域

Sass大纲---课时：1时

课时：1课时

1. 概念
   
   • 理解预处理器
   • 扩展css语言
2. 环境搭建
   
   • Koala工具
3. 导入
   @import
4. 变量
   
   • 默认变量
   • 特殊变量
   • 多值变量
   • 全局变量
5. 嵌套
   
   • 选择器嵌套
   • 属性嵌套
   • 跳出嵌套
6. 混合mixin
   
   • 无参mixin
   • 有参mixin
   • 多参mixin
7. 继承
8. 函数
9. 运算
10. 条件判断及循环

angularJs大纲---课时：8时

课时：8课时

1. angularJs的MVC模式
   
   • model 数据
   • view 视图
   • controller 控制
2. $scope作用域
   
   • 依赖注入
3. 指令和双向数据绑定
   
   • ng-controller
   • ng-app
   • ng-model
4. 模块化操作
   
   • angular.module
5. 过滤器
   
   • filter
   • 管道符
6. 自定义指令
   
   • directive