JavaScript+Zepto+Vue.js移動前端開發從入門到實踐

目錄

掃一掃

源碼下載

第1章Web前端開發概述

1.1Web前端開發工具

1.1.1Visual Studio Code

1.1.2HBuilder X

1.2Web前端開發工程化工具

1.2.1跨平臺的JavaScript運行環境Node.js

1.2.2漸進式框架Vue.js

1.2.3Vue腳手架Vue CLI

1.2.4下一代構建工具Vite 

1.3JavaScript編程與運行

1.3.1JavaScript編程

1.3.2JavaScript運行方式

1.4TypeScript編程與運行

1.4.1TypeScript編程

1.4.2TypeScript運行方式

項目實戰1

小結

練習1

第2章JavaScript基礎

2.1JavaScript概述

2.1.1JavaScript的組成

2.1.2JavaScript的特點

2.1.3JavaScript的放置位置

2.1.4JavaScript的輸出

2.2JavaScript語句

2.2.1JavaScript語句構成

2.2.2JavaScript 程序

2.2.3分號

2.2.4空格字符

2.2.5JavaScript行長度和折行

2.2.6JavaScript代碼塊

2.2.7JavaScript關鍵詞

2.3JavaScript語法

2.3.1JavaScript標識符

2.3.2JavaScript變量

2.3.3ECMAScript 6變量定義let和const

2.3.4JavaScript值與字面量

2.3.5JavaScript註釋

2.4數據類型和消息對話框

2.4.1數據類型

2.4.2消息對話框

2.5運算符和表達式

2.5.1算術運算符和表達式

2.5.2關系運算符和表達式

2.5.3邏輯運算符和表達式

2.5.4賦值運算符和表達式

2.5.5位運算符和表達式

2.5.6條件運算符和表達式

2.5.7其他運算符和表達式

2.6JavaScript程序控制結構

2.6.1順序結構

2.6.2選擇結構

2.6.3循環結構

2.7JavaScript函數

2.7.1自定義函數

2.7.2常用系統函數

2.7.3return語句

2.7.4函數變量的作用域

項目實戰2

小結

練習2

第3章JavaScript事件處理

3.1JavaScript事件

3.1.1事件類型

3.1.2事件句柄

3.1.3事件處理

3.1.4事件處理程序的返回值

3.2HTML事件

3.2.1onChange與onSelect事件屬性

3.2.2onSubmit與onReset事件屬性

3.2.3onFocus與onBlur事件屬性

3.3鼠標事件

3.3.1onClick與onDblClick事件屬性

3.3.2onMouseOver、onMouseOut、onMouseDown、onMouseUp事件屬性

3.4鍵盤事件

3.5窗口事件

3.5.1onResize與onScroll事件屬性

3.5.2onDOMContentLoaded、onLoad與onBeforeUnload事件屬性

項目實戰3

小結

練習3

第4章DOM和BOM

4.1JavaScript對象

4.1.1Array對象

4.1.2Math對象

4.1.3Date對象

4.1.4Number對象

4.1.5String對象

4.1.6Boolean對象

4.1.7RegExp對象

4.1.8JSON對象

4.2JavaScript HTML DOM

4.2.1HTML DOM簡介

4.2.2HTML DOM節點樹

4.2.3HTML DOM節點

4.2.4HTML DOM節點訪問

4.2.5DOM節點操作

4.2.6DOM操作元素

4.2.7DOM操作CSS樣式

4.2.8DOM操作Event事件

4.3JavaScript BOM

4.3.1Window對象

4.3.2Navigator對象

4.3.3Screen對象

4.3.4History對象

4.3.5Location對象

項目實戰4

小結

練習4

第5章Zepto移動框架

5.1Zepto簡介

5.1.1Zepto概述

5.1.2Zepto的下載與引入

5.1.3Zepto支持的瀏覽器

5.1.4Zepto模塊

5.1.5自定義zepto.js文件模塊

5.1.6Zepto核心方法

5.1.7Zepto與jQuery的異同

5.2Zepto選擇器

5.2.1通用選擇器和元素選擇器

5.2.2id選擇器

5.2.3class選擇器

5.2.4屬性選擇器

5.2.5層級選擇器

5.2.6不支持的選擇器

5.3Zepto操作DOM

5.3.1創建 DOM元素

5.3.2設置或獲取元素內容與屬性

5.3.3添加元素

5.3.4刪除元素

5.3.5獲取並設置CSS類

5.3.6Zepto窗口尺寸

項目實戰5

小結

練習5

第6章Zepto高級應用

6.1Zepto效果

6.1.1顯示/隱藏效果

6.1.2淡入/淡出效果

6.1.3動畫

6.2Zepto遍歷

6.2.1遍歷

6.2.2祖先元素

6.2.3後代元素

6.2.4同胞元素

6.2.5過濾

6.3Zepto事件

6.3.1Zepto事件概念

6.3.2Zepto監聽事件

6.3.3Zepto移除事件

6.3.4Zepto事件委托

6.3.5Zepto只執行一次

6.3.6Zepto事件觸發

6.3.7Zepto touch事件

6.4Zepto AJAX

6.4.1Zepto AJAX模塊引入

6.4.2Zepto AJAX load()方法

6.4.3Zepto AJAX 請求方法

6.5Zepto典型應用

6.5.1輪播圖實戰

6.5.2旋轉表格——點餐實戰

項目實戰6

小結

練習6

第7章Vue 3.x基礎應用

7.1Vue簡介及快速上手

7.1.1什麼是Vue

7.1.2漸進式框架

7.1.3單文件組件

7.1.4API風格

7.2創建一個Vue應用

7.2.1應用實例

7.2.2根組件

7.2.3掛載應用

7.2.4應用配置

7.2.5多個應用實例

7.3模板語法

7.3.1文本插值

7.3.2原始HTML

7.3.3Attribute綁定

7.3.4使用JavaScript表達式

7.3.5指令Directives

7.4響應式基礎

7.4.1選項式API： 聲明響應式狀態

7.4.2選項式API： 聲明方法

7.4.3組合式API:聲明響應式狀態

7.5計算屬性

7.5.1基礎應用

7.5.2計算屬性緩存與方法

7.5.3可寫計算屬性

7.6類與樣式綁定

7.6.1綁定HTML class

7.6.2綁定內聯樣式

7.7條件渲染

7.7.1vif

7.7.2velse

7.7.3velseif

7.7.4template上的vif

7.7.5vshow

7.7.6vif與vshow

7.7.7vif和vfor

7.8列表渲染

7.8.1vfor

7.8.2vfor與對象

7.8.3vfor應用場景

7.8.4數組變化偵測

7.9事件處理

7.9.1監聽事件

7.9.2事件修飾符

7.9.3按鍵修飾符

7.9.4鼠標按鍵修飾符

7.10表單輸入綁定

7.10.1vmodel指令

7.10.2表單元素輸入綁定

7.10.3值綁定

7.10.4修飾符

7.11生命周期

7.11.1註冊周期鉤子

7.11.2生命周期圖示

7.12偵聽器

7.12.1watch()基本示例

7.12.2深層偵聽器

7.12.3即時回調的偵聽器

7.12.4watchEffect()

7.12.5回調的觸發時機

7.12.6停止偵聽器

7.13模板引用

7.13.1訪問模板引用

7.13.2vfor中的模板引用

7.13.3函數模板引用

7.13.4組件上的 ref

項目實戰7

小結

練習7

第8章Vue 3.x高級應用

8.1單文件組件命名規範

8.1.1單文件組件

8.1.2組件命名規範  

8.2組件註冊

8.2.1組件全局註冊

8.2.2組件局部註冊

8.3props

8.3.1傳遞props

8.3.2動態組件

8.3.3props聲明

8.3.4單向數據流

8.3.5props校驗

8.4組件事件

8.4.1觸發與監聽事件

8.4.2事件參數

8.4.3聲明觸發的事件

8.4.4事件校驗

8.5組件vmodel

8.5.1vmodel的參數

8.5.2多個vmodel綁定

8.5.3處理vmodel修飾符

8.6插槽Slots

8.6.1插槽內容與出口

8.6.2渲染作用域

8.6.3默認內容

8.6.4具名插槽

8.6.5動態插槽名

8.6.6作用域插槽

8.6.7具名作用域插槽

8.7依賴註入

8.7.1prop逐級透傳問題

8.7.2Provide

8.7.3應用層 Provide

8.7.4Inject

項目實戰8

小結

練習8

第9章Vue 3.x前端工程構建工具

9.1Node.js簡介

9.1.1Node.js概述

9.1.2Node.js部署

9.1.3下載Vue DevTools

9.1.4Node.js環境配置

9.2npm使用介紹

9.2.1npm簡介

9.2.2npm常用命令

9.3Vue CLI構建項目

9.3.1什麼是Vue CLI

9.3.2Vue CLI安裝

9.3.3Vue CLI創建Vue項目

9.4Vite構建項目

9.4.1Vite簡介

9.4.2創建一個Vite項目

9.4.3創建一個Vue應用項目

項目實戰9

小結

練習9

第10章Vue Router路由

10.1Vue Router概述

10.1.1Vue Router的安裝與使用

10.1.2Vue Router入門應用

10.2Vue Router基礎

10.2.1動態路由匹配

10.2.2路由的匹配語法

10.2.3嵌套路由

10.2.4編程式導航

10.2.5命名路由

10.2.6命名視圖

10.2.7重定向和別名

10.2.8不同的歷史模式

10.3Vue Router進階

10.3.1路由元信息

10.3.2導航守衛

10.3.3動態路由

項目實戰10

小結

練習10

第11章PiniaVue存儲庫

11.1Pinia簡介

11.1.1為什麼要使用Pinia

11.1.2基礎案例

11.1.3與Vuex的比較

11.1.4與Vuex 3.x/4.x的比較

11.1.5安裝

11.1.6Store的概念及使用場景

11.2定義一個Store

11.2.1在項目中定義Store

11.2.2在頁面(組件)中使用Store

11.2.3在main.js中引入Pinia

11.3核心概念——state

11.3.1定義state狀態

11.3.2訪問state

11.3.3重置狀態

11.3.4改變狀態

11.3.5替換state

11.3.6訂閱狀態

11.4核心概念——getter

11.4.1定義getter

11.4.2訪問getter

11.4.3訪問其他getter

11.4.4向getter傳遞參數

11.4.5訪問其他Store的getter

11.4.6使用setup()時的用法

11.4.7選項式API的用法

11.5核心概念——action

11.5.1添加action

11.5.2使用action

11.5.3訪問其他Store 的 action

11.5.4異步action

11.5.5選項式API的用法

11.5.6訂閱action

11.6Pinia插件與持久化

11.6.1Pinia插件

11.6.2Pinia持久化

項目實戰11

小結

練習11

第12章uniapp跨平臺移動端開發工具

12.1uniapp概述

12.1.1uniapp簡介

12.1.2uniapp運行環境

12.1.3uniapp項目目錄及文件

12.2uniapp項目開發

12.2.1通過HBuilder X可視化界面

12.2.2通過HBuilder X運行到手機或模擬器

12.2.3通過vuecli命令行

12.3uniapp常用組件

12.3.1視圖容器組件

12.3.2基礎內容組件

12.3.3表單組件

12.3.4頁面路由跳轉——navigator組件

12.3.5tabBar組件

12.4頁面

12.4.1頁面管理

12.4.2頁面內容構成

12.4.3頁面生命周期

12.5uniapp實戰案例

12.5.1創建項目

12.5.2項目組件開發

12.5.3入口組件及主頁面組件

12.5.4main.js文件

12.5.5頁面管理配置文件pages.json文件

12.5.6項目運行

項目實戰12

小結

練習12

參考文獻