本書共10個模塊,模塊1-3簡單介紹與Vue開發(fā)緊密相關(guān)的前端基礎(chǔ)知識,包括開發(fā)環(huán)境、CSS基礎(chǔ)和JavaScript基礎(chǔ),方便讀者快速了解前序知識。模塊4-8詳細(xì)介紹Vue開發(fā)技術(shù),包括Vue選項、指令、組件、路由和腳手架,深入學(xué)習(xí)Vue知識。模塊9-10介紹uni-app及基于uView的開發(fā),拓展Vue的應(yīng)用。
本教材邏輯結(jié)構(gòu)清晰,舉例詳實,可以作為移動應(yīng)用開發(fā)技術(shù)、軟件技術(shù)、物聯(lián)網(wǎng)應(yīng)用技術(shù)、大數(shù)據(jù)技術(shù)等專業(yè)的跨平臺前端開發(fā)課程的教材;案例結(jié)合真實企業(yè)項目,與企業(yè)開發(fā)接軌,同樣適合作為企業(yè)的培訓(xùn)教材。
1.技術(shù)新:同類教材幾乎沒有。
2.編寫質(zhì)量好:知識介紹強調(diào)邏輯性,層層遞進(jìn)分析介紹,符合認(rèn)知規(guī)律,學(xué)生學(xué)習(xí)容易;工作任務(wù)設(shè)計基于真實應(yīng)用場景,但又不囿于企業(yè)場景,根據(jù)教學(xué)規(guī)律對場景精心進(jìn)行了設(shè)計,按照教學(xué)節(jié)奏設(shè)計任務(wù)及任務(wù)涉及知識點的規(guī)模,適合教學(xué),老師上課容易;所有任務(wù)圍繞一個企業(yè)真實項目設(shè)計,設(shè)計和編碼符合企業(yè)技術(shù)規(guī)范,滿足項目化和成果導(dǎo)向人才培養(yǎng)要求。
3.服務(wù)完善:教學(xué)資源全面,提供教學(xué)答疑服務(wù)。
劉培林,教授,軟件技術(shù)專業(yè)專任教師,有12年軟件項目開發(fā)經(jīng)驗,16年軟件技術(shù)專業(yè)課程教學(xué)經(jīng)驗,主持了《軟件技術(shù)》江蘇省骨干專業(yè)、無錫市職業(yè)教育重點專業(yè)和機械行業(yè)特色專業(yè)建設(shè)。主編教材3本,2本為江蘇省重點建設(shè)教材,1本為工信部規(guī)劃教材。
目 錄
模塊 1 網(wǎng)站開發(fā)概述
任務(wù) 1.1 了解網(wǎng)站開發(fā)的概念
1.1.1 Web 標(biāo)準(zhǔn)
1.1.2 HTML 文檔
1.1.3 網(wǎng)站開發(fā)環(huán)境任務(wù) 1.2 顯示圖文信息
1.2.1 簡單HTML 標(biāo)簽
1.2.2 圖像標(biāo)簽
1.2.3 超鏈接標(biāo)簽?zāi)K小結(jié)
習(xí)題實訓(xùn)
模塊 2 CSS 基礎(chǔ)
任務(wù) 2.1 設(shè)計收貨地址表單樣式
2.1.1 CSS 語法規(guī)則
2.1.2 簡單CSS 屬性
2.1.3 簡單選擇器
任務(wù) 2.2 設(shè)計移動網(wǎng)頁布局
2.2.1 Flex 彈性布局概述
2.2..2 容器屬性
2.2.3 項目屬性模塊小結(jié)
習(xí)題實訓(xùn)
模塊 3 JavaScript 基礎(chǔ)
任務(wù) 3.1 學(xué)習(xí)JavaScript 數(shù)據(jù)類型
3.1.1 JavaScript 基本語法
3.1.2 變量、常量與運算符
3.1.3 JavaScript 數(shù)組
3.1.4 對象
任務(wù) 3.2 學(xué)習(xí)JavaScript 程序結(jié)構(gòu)
3.2.1 程序結(jié)構(gòu)
3.2.2 函數(shù)
3.2.3 ES6 語法模塊小結(jié)
習(xí)題實訓(xùn)
模塊 4 Vue 實例
任務(wù) 4.1 了解 Vue 基礎(chǔ)知識
4.1.1 前端開發(fā)概述
4.1.2 什么是 Vue
4.1.3 Vue 的優(yōu)勢
任務(wù) 4.2 開發(fā)簡單 Vue 項目
4.2.1 創(chuàng)建 Vue 實例
4.2.2 根元素選項(el)
4.2.3 數(shù)據(jù)選項(data) 任務(wù) 4.3 設(shè)計數(shù)據(jù)編碼器
4.3.1 過濾選項(filters)
4.3.2 方法選項(methods) 任務(wù) 4.4 編寫模擬購物車
4.4.1 計算選項(computed)
4.4.2 狀態(tài)監(jiān)聽選項(watch) 任務(wù) 4.5 學(xué)習(xí) Vue 生命周期
4.5.1 生命周期概述
4.5.2 生命周期事件
4.5.3 Vue 實例方法與屬性模塊小結(jié)
習(xí)題實訓(xùn)
模塊 5 Vue 指令
任務(wù) 5.1 開發(fā)用戶注冊程序
5.1.1 v-text 指令
5.1.2 v-html 指令
5.1.3 v-model 指令
5.1.4 v-if/v-else 和v-show 指令任務(wù) 5.2 開發(fā)用戶登錄程序
5.2.1 v-bind 指令
5.2.2 v-bind 與filters 選項
5.2.3 Class 與Style 綁定任務(wù) 5.3 設(shè)計電子商務(wù)購物車
5.3.1 v-for 指令
5.3.2 v-on 指令
5.3.3 v-on 指令修飾符模塊小結(jié)
習(xí)題實訓(xùn)
模塊 6 Vue 自定義組件
任務(wù) 6.1 設(shè)計計分器組件
6.1.1 組件概述
6.1.2 組件注冊
6.1.3 組件模板
任務(wù) 6.2 編寫搜索框組件
6.2.1 props 選項
6.2.2 插槽元素() 任務(wù) 6.3 開發(fā)管理用戶組件
6.3.1 監(jiān)聽子組件事件
6.3.2 動態(tài)組件
6.3.3 組件過渡模塊小結(jié)
習(xí)題實訓(xùn)
模塊 7 Vue 路由
任務(wù) 7.1 設(shè)計簡單頁面導(dǎo)航
7.1.1 單頁面應(yīng)用
7.1.2 路由視圖()
7.1.3 路由管理器
7.1.4 路由鏈接() 任務(wù) 7.2 傳遞參數(shù)給頁面
7.2.1 路由對象
7.2.2 query 方式參數(shù)傳遞
7.2.3 params 方式參數(shù)傳遞
任務(wù) 7.3 設(shè)計實用頁面導(dǎo)航
7.3.1 嵌套路由父級設(shè)計
7.3.2 嵌套路由子級設(shè)計模塊小結(jié)
習(xí)題實訓(xùn)
模塊 8 Vue CLI
任務(wù) 8.1 了解CLI 基礎(chǔ)知識
8.1.1 Vue CLI 的特點
8.1.2 CLI 安裝
8.1.3 Git-Bash 命令行工具任務(wù) 8.2 創(chuàng)建CLI 項目
8.2.1 命令行創(chuàng)建與項目運行
8.2.2 HBuilderX 環(huán)境創(chuàng)建與項目運行任務(wù) 8.3 實戰(zhàn)CLI 項目
8.3.1 單文件組件
8.3.2 簡單vue 項目index 文件分析
8.3.3 導(dǎo)入與導(dǎo)出語句
8.3.4 CLI 項目結(jié)構(gòu)分析
任務(wù) 8.4 開發(fā)用戶管理CLI 項目
8.4.1 CLI 插件
8.4.2 安裝插件
8.4.3 使用BootStrap
模塊小結(jié)習(xí)題
實訓(xùn)
模塊 9 uni-app 開發(fā)
任務(wù) 9.1 設(shè)計底部導(dǎo)航
9.1.1 uni-app 開發(fā)概述
9.1.2 pages.json 文件
9.1.1 view 視圖
任務(wù) 9.2 設(shè)計網(wǎng)頁內(nèi)容
9.2.1 scroll-view 可滾動視圖
9.2.2 image 圖片
9.2.3 navigator 路由任務(wù) 9.3 設(shè)計輪播圖
9.3.1 swiper 滑塊視圖容器
9.3.2 swiper-item 滑塊選項任務(wù) 9.4 設(shè)計可拖動選項卡
9.4.1 movable-view 可移動視圖
9.4.2 web-view 瀏覽器
9.4.3 tabBar 標(biāo)簽?zāi)K小結(jié)
習(xí)題實訓(xùn)
模塊 10 uView 插件
任務(wù) 10.1 使用uView
10.1.1 uView 概述
10.1.2 安裝與配置uView
10.1.3 使用 Toast 組件任務(wù) 10.2 填寫收貨地址信息
10.2.1 Form 表單
10.2.2 Form-item 表單域
10.2.3 Input 輸入框
10.2.4 Picker 選擇器
10.2.5 Select 列選擇器
10.2.6 Switch 開關(guān)選擇器
10.2.7 表單驗證任務(wù) 10.3 查看訂單
10.3.1 Tabs-Swiper 全屏選項卡
10.3.2 LoadMore 加載更多
10.3.3 Icon 圖標(biāo)
任務(wù) 10.4 編寫天氣服務(wù)
10.4.1 Http 請求
10.4.2 Search 搜索框模塊小結(jié)
習(xí)題實訓(xùn)