南京博睿同創(chuàng)教育

**章：前端開發(fā)基礎(chǔ)篇(10天)

第二章：移動web開發(fā)篇(7天)

第三章：javascript網(wǎng)頁編程篇(19天)

1.Javascript基 礎(chǔ)：JavaScript 介紹，應(yīng)用，編寫，執(zhí)行 console 注釋 變量，變量聲明提升，全局變量，常量 7 大數(shù)據(jù)類型 Object 三種類型、typeof、數(shù)據(jù)類型轉(zhuǎn)換 運(yùn)算符 流程控制：條件分支，循環(huán)，異常處理，break，continue 函數(shù)：定義，調(diào)用，函數(shù)表達(dá)式，函數(shù)遞歸,arguments 函數(shù)的作用域 閉包 Closures 立即執(zhí)行函數(shù)、預(yù)定義函數(shù) json數(shù)據(jù)處理 常用內(nèi)置對象：Function, Number, Math, Date, String Array 數(shù)組，數(shù)組方法 pop push shift unshift，自定義數(shù)組 排序，冒泡排序 字符串、數(shù)組的相關(guān)函數(shù) 大量案例演示，學(xué)會使用js編碼程序,實(shí)現(xiàn)簡單業(yè)務(wù)邏輯；

2.web-API：DOM層級、類型 查找DOM節(jié)點(diǎn)操作 對節(jié)點(diǎn)的刪除、添加、修改操作 節(jié)點(diǎn)間的固定定位距離、頁面滾動距離、頁面滾動事件 獲取元素寬高及屬性 獲取可視區(qū)的大小 彈窗及window.location、window.navigator的使用 光標(biāo)事件 event對象 事件流、事件捕獲、事件冒泡、取消事件冒泡 事件綁定、取消事件綁定 鍵盤事件 默認(rèn)事件及如何組織默認(rèn)事件 事件委托及事件委托的好處 大量案例演示，學(xué)會使用js操作DOM節(jié)點(diǎn),實(shí)現(xiàn)各種業(yè)務(wù)邏輯,效果；

3.javascript高級：正則表達(dá)式 RegExp對JS風(fēng)格 正則涉及到的函數(shù) search、match、replace 正則匹配的關(guān)鍵字、[]、排除、轉(zhuǎn)義字符、量詞的使用、中文匹配 面向?qū)ο?、OOP特點(diǎn) 抽象、封裝、繼承 工廠模式 深入介紹閉包 構(gòu)造函數(shù)、原型、原型鏈 繼承、原型繼承、call apply繼承 es6的解釋、es6發(fā)布時(shí)間 es6運(yùn)行環(huán)境 let、const 解構(gòu)Destructuring 模板字符串 函數(shù)參數(shù)的默認(rèn)值 箭頭函數(shù) 類和類的繼承 set、map Promise 承諾編程，使用正則表達(dá)式完成字符的校驗(yàn),可以使用原型創(chuàng)建對象,使用箭 頭函數(shù)等；

4.數(shù)據(jù)可視化 Echarts：大屏幕適配技術(shù)解決方案的應(yīng)用 Echarts 各類型數(shù)據(jù)可視化圖表的應(yīng)用 根據(jù)需要求創(chuàng)建折線圖、K線圖、地圖等圖表，使用Echarts可以創(chuàng)建出企業(yè)項(xiàng)目中需要的各種圖表；

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

第五章 Vue.js篇(24天)

1.Vue基礎(chǔ)：Vue 特點(diǎn) Vue 實(shí)例 插值表達(dá)式 {{}} 指令: v-bind, v-if, v-for, v-model, v-on 使用組件構(gòu)建應(yīng)用 Vue 實(shí)力屬性和方法 實(shí)例生命周期 模板語法與綁定 過濾器 Filter 計(jì)算屬性 computed 方法 methods 觀察 Watchers v-bind:class, v-bind:style 條件渲染：v-if, v-show 列表渲染 組件和 v-for 數(shù)組更新檢測：變異方法，非變異方法 事件處理器 $event 特殊變量 事件修飾符 按鍵修飾符，內(nèi)置按鍵別名，組合按鍵修飾符 表單控件綁定 表單綁定修飾符：.lazy, .number, .trim，使用Vue.js可以創(chuàng)建前端程序；

2.Webpack+ES6 模塊化：Webpack Webpack 安裝，打包，腳本配置，運(yùn)行 Source Map 配置 使用 webpack 構(gòu)建本地服務(wù)器 Loaders Babel Babel plugins json loader css loader & style loader CSS modules 模塊化 :global CSS 預(yù)處理器 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 默認(rèn)導(dǎo)入/導(dǎo)出 按需導(dǎo)入/導(dǎo)出，使用WebPack可以打包我們的前端程序進(jìn)行上線使用；

3.Vue高級：組件 Component 注冊全局，局部組件 組件命名約定 is 屬性 組件 data 函數(shù) 父子組件數(shù)據(jù)傳遞 prop 驗(yàn)證 自定義事件：$on, $emit 原生事件監(jiān)聽 .native 非父子組件通信 Slot 分發(fā)內(nèi)容 單個 Slot，匿名 Slot，具名 Slot 作用域插槽 動態(tài)組件 keep-alive 可復(fù)用組件 子組件索引 $refs 異步組件 resolve reject v-once 異步隊(duì)列更新 自定義指令 Directive 混合 Mixin，全局混合 插件 Plugins，自定義插件 單文件組件和項(xiàng)目 CSS 抽取 路由 Router Vue 單元測試及覆蓋率報(bào)告生成 Vuex，使用Vue高級知識點(diǎn)創(chuàng)建Vue程序；

4.Vuecli3+ElementUI：Layout 布局,Container 布局容器,Color 色彩 Typography 字體,Icon 圖標(biāo) Button 按鈕,Form,Radio 單選框,Checkbox 多選框 Input 輸入框,,InputNumber 計(jì)數(shù)器 Select 選擇器,Cascader 級聯(lián)選擇器 Switch 開關(guān),Slider 滑塊 TimePicker 時(shí)間選擇器,DatePicker 日期選擇器,DateTimePicker 日期時(shí)間選擇器 Upload 上傳,Rate 評分,ColorPicker 顏色選擇器,Transfer 穿梭框 Form 表單,Data,Table 表格,Tag 標(biāo)簽,Progress 進(jìn)度條 Tree 樹形控件,Pagination 分頁 Badge 標(biāo)記,Notice,Alert 警告 Loading 加載,Message 消息提示 MessageBox 彈框,Notification 通知 Navigation,NavMenu 導(dǎo)航菜單 Tabs 標(biāo)簽頁,Breadcrumb 面包屑 Dropdown 下拉菜單,Steps 步驟條,Dialog 對話框 Tooltip 文字提示,Popover 彈出框 Card 卡片,Carousel 走馬燈,Collapse 折疊面板，使用Element-UI組件庫進(jìn)行項(xiàng)目的開發(fā)；

5.Vue項(xiàng)目：使用技術(shù)：vue+vue-cli+vuerouter+vuex+localStorage+swiper+axios 課程涉及知識點(diǎn)： vue:vue基礎(chǔ)、vue組件及組件間傳值、vue屬性方法指令、vue過 濾器、計(jì)算屬性、列表渲染、修飾符、axios等 vuex:統(tǒng)一狀態(tài)管理 store 、state、actions、mutations、getters router:vue路由的定義、子路由的定義、路由鏈接的使用、路由傳 參、路由懶加載、路由守衛(wèi) 本地緩存:localstorage、sessionstorage swiper:輪播插件的引入，輪播的配置 Vant，使用Vue.js進(jìn)行實(shí)際項(xiàng)目的開發(fā)；

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

第七章 react.js篇(12天)

1. react基礎(chǔ)：JSX 組件系統(tǒng) 虛擬 DOM 生命周期 無狀態(tài)組件 有狀態(tài)組件 ref class 組件通信 create-react-app 路由 插值 state，掌握React基本語法，能夠使用class組件實(shí)現(xiàn)常見的業(yè)務(wù)功能；

2. Hooks：useState useEffect useRef useContext useEffect高級用法 放大鏡案例 購物車案例，運(yùn)用hooks核心知識實(shí)現(xiàn)購物車和放大鏡經(jīng)典案例效 果。

3. Redux：狀態(tài)管理流程 action dispatch store reducer redux-thunk 中間件 combineReducers react-redux 開發(fā)調(diào)試工具 點(diǎn)餐案例，結(jié)合React技術(shù)棧，運(yùn)用redux實(shí)現(xiàn)點(diǎn)餐系統(tǒng)的狀態(tài)管理 ；

4. React項(xiàng)目：

   1.基于react hooks實(shí)現(xiàn)中大型后臺管理系統(tǒng)的解決方案

   2.基于ant-design組件庫解決方案

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

   4.基于redux的狀態(tài)管理解決方案

   5.基于react-quill的富文本編輯器解決方案

   6.基于create-react-app的構(gòu)建react項(xiàng)目解決方法

    7.基于axios封裝請求工具類解決方案

   8.基于token的前端登錄解決方案