關(guān)于我們
書單推薦
新書推薦
|
Vue.js 3+TypeScript完全指南 讀者對象:本書既適合有一定基礎(chǔ)的前端開發(fā)工程師、Web 開發(fā)者閱讀,也適合作為初學(xué)者學(xué)習(xí) Vue.js 3 和TypeScript的入門教材。
本書是一本全面、深入介紹Vue.js 3和TypeScript前端開發(fā)技術(shù)的圖書。本書詳細介紹了Vue.js 3的新特性與優(yōu)勢,包括模板語法、內(nèi)置指令、Options API、組件化、過渡動畫、Composition API、Vue Router、Vuex 等核心知識點;TypeScript 的基礎(chǔ)和進階知識,包括數(shù)據(jù)類型、類型別名、聯(lián)合類型、類型斷言、函數(shù)類型、類、接口、泛型、類型聲明等內(nèi)容。此外,本書還深入探討了前端工程化、第三方庫的集成與使用、企業(yè)級管理后臺的實現(xiàn)和自動化部署等內(nèi)容,以及如何從零開始實現(xiàn)一個Mini-Vue.js 3框架,以便讀者深入理解Vue.js 3的核心原理。本書既適合有一定基礎(chǔ)的前端開發(fā)工程師、Web 開發(fā)者閱讀,也適合作為初學(xué)者學(xué)習(xí) Vue.js 3 和TypeScript的入門教材。本書旨在幫助讀者全面理解Vue.js 3和TypeScript的使用方法和原理,掌握實用的知識和技能,提高前端開發(fā)水平。
王紅元(網(wǎng)名coderwhy),擔任廣州市弘源科教軟件有限公司CEO、澳大利亞The WAIN公司CTO,作為騰訊AI高校訓(xùn)練營的特聘講師,曾為多所雙一流高校授課。在國內(nèi)外大型項目和軟件系統(tǒng)中,負責(zé)架構(gòu)設(shè)計和研發(fā)工作,曾兼任多家公司的技術(shù)顧問,協(xié)助解決開發(fā)過程中的關(guān)鍵問題。精通多種編程語言,包括C/C++、Python、Java、Objective-C、Swift、JavaScript和TypeScript等,對即時聊天和流媒體技術(shù)有深入研究。目前致力于不斷提高自身技能,為企業(yè)、開源社區(qū)及學(xué)員做出更多貢獻。劉軍,曾在深圳市華云中盛科技股份有限公司擔任前端負責(zé)人,廣州市弘源科教軟件有限公司聯(lián)合創(chuàng)始人之一,擁有8年前端開發(fā)經(jīng)驗。精通Vue.js、React、TypeScript、webpack、Vite、Node、Docker、CI/CD,以及Java、Android等技術(shù)棧,擅長微前端、中后臺、組件庫、腳手架、公眾號、小程序、大屏可視化等領(lǐng)域的工作。
1 邂逅和初體驗Vue.js 1
1.1 認識Vue.js 1 1.2 Vue.js與其他框架的對比 2 1.2.1 Vue.js、React和Angular三大框架對比 2 1.2.2 三大框架使用數(shù)據(jù)對比 2 1.3 Vue.js 2的缺點 4 1.4 Vue.js 3帶來的新變化 4 1.5 搭建開發(fā)環(huán)境 6 1.5.1 VS Code的下載和安裝 7 1.5.2 VS Code的基本配置 7 1.5.3 VS Code安裝插件 9 1.6 Vue.js 3的安裝和使用 10 1.6.1 使用CDN引入Vue.js 3 11 1.6.2 下載Vue.js 3源碼并在本地引入 14 1.7 計數(shù)器案例 16 1.7.1 原生JavaScript實現(xiàn)計數(shù)器 16 1.7.2 用Vue.js 3實現(xiàn)計數(shù)器 17 1.7.3 MVVM架構(gòu)模式 19 1.8 createApp的對象參數(shù) 20 1.8.1 template屬性 20 1.8.2 data屬性 22 1.8.3 methods屬性 22 1.8.4 其他屬性 24 1.9 VS Code生成代碼片段 24 1.10 本章小結(jié) 27 2 模板語法和內(nèi)置指令 28 2.1 插值語法 28 2.2 基本指令 30 2.2.1 v-once 30 2.2.2 v-text 31 2.2.3 v-html 32 2.2.4 v-pre 32 2.2.5 v-cloak 33 2.3 v-bind 34 2.3.1 綁定基本屬性 34 2.3.2 綁定class屬性 35 2.3.3 綁定style屬性 38 2.3.4 動態(tài)綁定屬性 40 2.3.5 綁定一個對象 41 2.4 v-on 42 2.4.1 綁定事件 42 2.4.2 事件對象和傳遞參數(shù) 44 2.4.3 修飾符 45 2.5 條件渲染 46 2.5.1 v-if和v-else 46 2.5.2 v-if和template結(jié)合使用 48 2.5.3 v-show 49 2.5.4 v-show和v-if的區(qū)別 50 2.6 列表渲染 51 2.6.1 v-for的基本使用 51 2.6.2 v-for支持的類型 52 2.6.3 v-for和template結(jié)合使用 54 2.6.4 數(shù)組的更新檢測 55 2.7 key和diff算法 57 2.7.1 認識VNode和VDOM 57 2.7.2 key的作用和diff算法 59 2.7.3 沒有key時的diff算法操作 60 2.7.4 有key時的diff算法操作 61 2.8 本章小結(jié) 64 3 Vue.js 3的Options API 65 3.1 計算屬性 65 3.1.1 認識計算屬性 65 3.1.2 計算屬性的基本使用 66 3.1.3 計算屬性和methods的區(qū)別 69 3.1.4 計算屬性的setter和getter 71 3.2 監(jiān)聽器watch 73 3.2.1 watch的基本使用 73 3.2.2 watch配置選項 75 3.2.3 watch字符串、數(shù)組和API語法 78 3.2.4 watch深度監(jiān)聽 79 3.3 案例:書籍購物車 80 3.3.1 基本功能介紹 80 3.3.2 搭建基本功能 81 3.3.3 搭建書籍列表 83 3.3.4 搭建“加購物車”功能 84 3.3.5 優(yōu)化價格和購買數(shù)量 86 3.3.6 完整代碼展示 86 3.4 本章小結(jié) 88 4 v-model和表單輸入 89 4.1 v-model的基本使用 89 4.2 v-model的實現(xiàn)原理 90 4.3 v-model綁定其他表單 91 4.4 v-model值的綁定 94 4.5 v-model的修飾符 94 4.5.1 .lazy修飾符 94 4.5.2 .number修飾符 94 4.5.3 .trim修飾符 96 4.6 v-model在組件上的使用 96 4.7 本章小結(jié) 96 5 Vue.js 3組件化開發(fā) 97 5.1 認識組件化 97 5.2 Vue.js 3的組件化 98 5.3 Vue.js 3注冊組件 99 5.3.1 注冊全局組件 99 5.3.2 組件的命名規(guī)范 102 5.3.3 注冊局部組件 103 5.4 Vue.js 3開發(fā)模式 105 5.5 Vue.js 3支持SFC 106 5.6 本章小結(jié) 106 6 前端工程化 107 6.1 前端快速發(fā)展史 107 6.2 認識webpack 108 6.3 Vue CLI腳手架 109 6.3.1 認識Vue CLI 109 6.3.2 安裝Node.js 109 6.3.3 安裝Vue CLI 110 6.3.4 Vue CLI新建項目 111 6.3.5 Vue.js 3項目的目錄結(jié)構(gòu) 114 6.3.6 項目的運行和打包 115 6.3.7 vue.config.js文件解析 117 6.4 認識Vite 120 6.5 create-vue 腳手架 121 6.5.1 認識create-vue 121 6.5.2 create-vue新建項目 121 6.5.3 Vue.js 3項目目錄結(jié)構(gòu) 122 6.5.4 項目的運行和打包 123 6.5.5 vite.config.js文件解析 124 6.6 webpack和Vite的區(qū)別 126 6.7 本章小結(jié) 127 7 Vue.js 3組件化基礎(chǔ)詳解 128 7.1 組件的嵌套 130 7.1.1 搭建基本頁面 130 7.1.2 組件的拆分和嵌套 131 7.1.3 組件CSS的作用域 134 7.1.4 組件之間的通信 135 7.2 組件樣式的特性 135 7.2.1 Scoped CSS 135 7.2.2 CSS Modules 138 7.2.3 在CSS中使用v-bind 139 7.3 父子組件的相互通信 140 7.3.1 父組件傳遞數(shù)據(jù)給子組件 140 7.3.2 子組件傳遞數(shù)據(jù)給父組件 146 7.3.3 案例:選項卡TabControl實戰(zhàn) 150 7.4 非父子組件的相互通信 153 7.4.1 Provide/Inject依賴注入 153 7.4.2 全局事件總線 159 7.5 組件中的插槽 162 7.5.1 認識插槽 162 7.5.2 插槽的使用 163 7.6 組件的作用域插槽 169 7.6.1 認識渲染作用域 169 7.6.2 作用域插槽 169 7.6.3 獨占默認插槽 171 7.7 本章小結(jié) 172 8 Vue.js 3組件化進階詳解 173 8.1 動態(tài)組件 173 8.1.1 v-if指令的實現(xiàn) 174 8.1.2 動態(tài)組件的實現(xiàn) 175 8.1.3 動態(tài)組件的傳參 176 8.1.4 keep-alive的使用 177 8.2 異步組件 180 8.2.1 webpack對代碼分包 180 8.2.2 在Vue.js 3中實現(xiàn)異步組件 182 8.2.3 異步組件和Suspense 185 8.3 獲取元素或組件的實例 187 8.3.1 $refs 187 8.3.2 $parent 189 8.4 組件生命周期函數(shù) 190 8.4.1 認識組件的生命周期 190 8.4.2 生命周期函數(shù)的演練 191 8.5 在組件中使用v-model指令 193 8.5.1 v-model的基本使用方法 194 8.5.2 v-model綁定computed 195 8.5.3 組件上應(yīng)用多個v-model 197 8.5.4 v-model綁定對象類型 198 8.6 本章小結(jié) 200 9 Vue.js 3實現(xiàn)過渡動畫 201 9.1 基本過渡動畫 201 9.1.1 認識過渡動畫 201 9.1.2 過渡動畫特有的類 203 9.1.3 CSS的Animation動畫 204 9.1.4 Transition組件的常見屬性 205 9.2 第三方庫動畫庫 210 9.2.1 Animate.css動畫庫 210 9.2.2 GSAP動畫庫 212 9.3 列表中的過渡動畫 216 9.3.1 TransitionGroup的基本使用 217 9.3.2 列表元素的過渡動畫 219 9.3.3 案例:列表元素的交替過渡 220 9.4 本章小結(jié) 222 10 Vue.js 3 Composition API詳解 224 10.1 Options API代碼的復(fù)用 224 10.1.1 Mixin混入 224 10.1.2 extends繼承 228 10.2 認識Composition API 229 10.3 setup函數(shù)的基本使用 230 10.3.1 setup函數(shù)的參數(shù) 231 10.3.2 setup函數(shù)的返回值 233 10.3.3 setup函數(shù)的this 234 10.4 數(shù)據(jù)響應(yīng)式API 235 10.4.1 reactive 235 10.4.2 ref 236 10.5 響應(yīng)式工具reactive 239 10.5.1 readonly 239 10.5.2 isProxy 241 10.5.3 isReactive 241 10.5.4 isReadonly 241 10.5.5 toRaw 242 10.5.6 shallowReactive 242 10.5.7 shallowReadonly 242 10.6 響應(yīng)式工具ref 242 10.6.1 toRefs 242 10.6.2 toRef 244 10.6.3 isRef 245 10.6.4 unref 245 10.6.5 customRef 245 10.6.6 shallowRef 247 10.6.7 triggerRef 247 10.7 computed計算屬性 247 10.7.1 computed函數(shù)的基本使用 247 10.7.2 computed函數(shù)的get和set方法 248 10.8 watchEffect監(jiān)聽 249 10.8.1 watchEffect的基本使用 249 10.8.2 停止watchEffect監(jiān)聽 251 10.8.3 watchEffect清除副作用 251 10.8.4 watchEffect的執(zhí)行時機 252 10.9 watch監(jiān)聽 254 10.9.1 監(jiān)聽單個數(shù)據(jù)源 254 10.9.2 監(jiān)聽多個數(shù)據(jù)源 257 10.9.3 監(jiān)聽響應(yīng)式對象 258 10.10 組件生命周期函數(shù) 259 10.11 Provide/Inject依賴注入 260 10.11.1 提供數(shù)據(jù) 261 10.11.2 注入數(shù)據(jù) 262 10.11.3 提供和注入響應(yīng)式數(shù)據(jù) 263 10.12 案例:Composition API的實戰(zhàn) 264 10.12.1 計數(shù)器的兩種實現(xiàn)方式 264 10.12.2 代碼邏輯的封裝和復(fù)用 266 10.12.3 修改網(wǎng)頁的標題 267 10.12.4 監(jiān)聽頁面滾動位置 268 10.13 <script setup>語法 270 10.13.1 <script setup>的基本使用 270 10.13.2 defineProps和defineEmits 272 10.13.3 defineExpose 273 10.13.4 useSlots和useAttrs 274 10.14 本章小結(jié) 275 11 Vue.js 3組件化高級詳解 276 11.1 render函數(shù) 276 11.1.1 認識h函數(shù) 276 11.1.2 h函數(shù)的基本使用 277 11.1.3 render函數(shù)實現(xiàn)計數(shù)器 278 11.1.4 setup函數(shù)實現(xiàn)計數(shù)器 279 11.1.5 在render函數(shù)中實現(xiàn)插槽 279 11.1.6 組件的JSX語法 281 11.2 自定義指令 283 11.2.1 自定義指令的基本使用 283 11.2.2 自定義指令的生命周期函數(shù) 285 11.2.3 自定義指令的參數(shù)和修飾符 287 11.2.4 案例:自定義時間格式化指令 288 11.3 teleport內(nèi)置組件 290 11.3.1 認識teleport組件 290 11.3.2 teleport的基本使用 290 11.3.3 teleport中嵌套組件 291 11.3.4 多個teleport組件的使用 291 11.4 Vue.js 3的插件開發(fā) 292 11.4.1 認識Vue.js 3插件 292 11.4.2 對象類型的插件 292 11.4.3 函數(shù)類型的插件 293 11.5 nextTick函數(shù)的原理 294 11.6 本章小結(jié) 297 12 Vue Router路由 299 12.1 認識Vue Router 299 12.1.1 什么是前端路由 299 12.1.2 前端路由的原理 300 12.1.3 認識Vue Router 303 12.2 Vue Router的基本使用 303 12.2.1 路由的基本使用 303 12.2.2 路由配置的細節(jié) 306 12.3 Vue Router進階知識 310 12.3.1 動態(tài)路由的匹配 310 12.3.2 嵌套路由的使用 314 12.3.3 編程式導(dǎo)航的使用 317 12.3.4 路由內(nèi)置組件的插槽 320 12.3.5 動態(tài)添加路由 322 12.3.6 路由守衛(wèi) 324 12.4 本章小結(jié) 326 13 Vuex狀態(tài)管理 327 13.1 認識Vuex狀態(tài)管理 327 13.1.1 認識狀態(tài)管理 327 13.1.2 Vuex的基本使用 329 13.1.3 Vue.js devtools插件安裝 331 13.2 Vuex的核心概念 333 13.2.1 state 333 13.2.2 getters 339 13.2.3 mutations 343 13.2.4 actions 347 13.2.5 modules 352 13.3 本章小結(jié) 361 14 TypeScript的基礎(chǔ)詳解 362 14.1 認識JavaScript 362 14.1.1 優(yōu)秀的JavaScript 362 14.1.2 類型引發(fā)的問題 363 14.1.3 缺少類型約束 364 14.2 認識TypeScript 364 14.2.1 什么是TypeScript 364 14.2.2 TypeScript的特點 365 14.3 搭建TypeScript的運行環(huán)境 365 14.3.1 TypeScript的編譯環(huán)境 365 14.3.2 TypeScript的運行環(huán)境 366 14.4 聲明變量的方式 367 14.4.1 聲明變量的格式 367 14.4.2 聲明變量的關(guān)鍵字 368 14.4.3 變量的類型推導(dǎo) 368 14.5 JavaScript的數(shù)據(jù)類型 368 14.5.1 number類型 368 14.5.2 boolean類型 369 14.5.3 string類型 369 14.5.4 array類型 370 14.5.5 object類型 370 14.5.6 null和undefined類型 370 14.5.7 symbol類型 371 14.6 TypeScript的數(shù)據(jù)類型 371 14.6.1 any類型 371 14.6.2 unknown類型 372 14.6.3 void類型 372 14.6.4 never類型 372 14.6.5 tuple類型 373 14.7 TypeScript類型的補充 374 14.7.1 函數(shù)的參數(shù)和返回值 374 14.7.2 對象類型 375 14.7.3 聯(lián)合類型 376 14.7.4 類型別名 376 14.7.5 類型斷言 377 14.7.6 字面量類型 380 14.7.7 類型縮小 381 14.8 TypeScript函數(shù)類型詳解 383 14.8.1 函數(shù)的類型 383 14.8.2 函數(shù)參數(shù)的類型 384 14.8.3 this的類型 385 14.8.4 函數(shù)重載 386 14.9 本章小結(jié) 387 15 TypeScript的進階詳解 388 15.1 TypeScript類的使用 388 15.1.1 類的定義 388 15.1.2 類的繼承 389 15.1.3 類的多態(tài) 390 15.1.4 成員修飾符 391 15.1.5 只讀屬性 392 15.1.6 getter/setter 393 15.1.7 靜態(tài)成員 393 15.1.8 抽象類 393 15.1.9 類作為數(shù)據(jù)類型使用 394 15.2 TypeScript接口的使用 395 15.2.1 接口的聲明 395 15.2.2 索引類型 396 15.2.3 函數(shù)類型 397 15.2.4 接口的繼承 397 15.2.5 交叉類型 398 15.2.6 接口的實現(xiàn) 398 15.2.7 interface和type的區(qū)別 399 15.2.8 字面量賦值 400 15.3 TypeScript枚舉類型 401 15.3.1 認識枚舉 401 15.3.2 枚舉的值 401 15.4 TypeScript泛型的使用 402 15.4.1 認識泛型 402 15.4.2 泛型接口 403 15.4.3 泛型類 403 15.4.4 泛型約束 404 15.5 模塊和命名空間 405 15.5.1 模塊化開發(fā) 405 15.5.2 命名空間 405 15.6 類型的聲明 406 15.6.1 類型的查找 406 15.6.2 創(chuàng)建Vue.js 3 + TypeScript項目 407 15.6.3 declare聲明變量 408 15.6.4 declare聲明函數(shù) 409 15.6.5 declare聲明類 409 15.6.6 declare聲明文件 410 15.6.7 declare聲明模塊 410 15.6.8 declare聲明命名空間 411 15.7 tsconfig.json文件解析 411 15.8 本章小結(jié) 413 16 第三方庫的集成與使用 414 16.1 Vue CLI新建項目 414 16.2 Vue Router的集成 414 16.3 Vuex的集成 415 16.4 Element Plus的集成 417 16.4.1 Element Plus的介紹和安裝 417 16.4.2 Element Plus的全局引入 418 16.4.3 Element Plus的按需引入 419 16.4.4 Element Plus的手動引入 420 16.5 axios的集成和使用 421 16.5.1 axios的介紹和安裝 421 16.5.2 axios的GET請求 422 16.5.3 axios的POST請求 424 16.5.4 axios的配置選項 425 16.5.5 axios的并發(fā)請求 425 16.5.6 axios的攔截器 426 16.5.7 axios的實例 427 16.5.8 axios + TypeScript的封裝 427 16.6 ECharts的集成和使用 432 16.6.1 認識前端可視化 432 16.6.2 ECharts介紹 432 16.6.3 ECharts的基本使用 433 16.6.4 ECharts的渲染引擎 435 16.6.5 ECharts的配置選項 436 16.6.6 BaseEchart組件的封裝 437 16.6.7 ECharts繪制餅圖 440 16.6.8 ECharts繪制折線圖 441 16.7 本章小結(jié) 442 17 后臺管理系統(tǒng) 443 17.1 Vue.js 3 + TypeScript項目介紹 443 17.2 Vue CLI新建項目 444 17.3 項目開發(fā)規(guī)范 447 17.3.1 統(tǒng)一IDE編碼格式 447 17.3.2 Prettier格式化代碼 447 17.3.3 ESLint 檢測代碼 449 17.3.4 項目編碼規(guī)范 449 17.4 快速集成第三方庫 449 17.4.1 vue.config.js的配置 449 17.4.2 Vue-Router的集成 451 17.4.3 Vuex的集成 452 17.4.4 Element Plus的按需導(dǎo)入 453 17.4.5 axios的集成與封裝 454 17.4.6 區(qū)分開發(fā)和生成環(huán)境 457 17.5 tsconfig.json文件的解析 458 17.6 vue文件的類型聲明 459 17.7 defineComponent函數(shù)的作用 460 17.8 登錄模塊 460 17.8.1 搭建登錄頁面 460 17.8.2 登錄表單的實現(xiàn) 464 17.8.3 表單規(guī)則的校驗 466 17.8.4 登錄邏輯的實現(xiàn) 468 17.8.5 網(wǎng)絡(luò)請求的反向代理 473 17.8.6 登錄后獲取用戶信息 474 17.9 首頁模塊 476 17.9.1 搭建首頁的布局 476 17.9.2 封裝菜單組件 478 17.9.3 封裝頭部欄組件 483 17.9.4 新建頁面和配置路由 486 17.9.5 動態(tài)注冊路由 488 17.9.6 封裝面包屑組件 491 17.10 用戶模塊 493 17.10.1 高級檢索功能 493 17.10.2 用戶列表功能 500 17.11 路由守衛(wèi)和國際化 511 17.11.1 添加路由守衛(wèi) 511 17.11.2 Element Plus的國際化 511 17.12 本章小結(jié) 512 18 自動化部署 513 18.1 DevOps開發(fā)模式 513 18.1.1 傳統(tǒng)開發(fā)模式 513 18.1.2 DevOps開發(fā)模式 513 18.1.3 持續(xù)集成和持續(xù)交付 514 18.1.4 自動化部署流程 515 18.2 購買云服務(wù)器 516 18.2.1 注冊阿里云賬號 516 18.2.2 購買云服務(wù)器 516 18.3 連接遠程云服務(wù)器 518 18.4 Nginx安裝和配置 519 18.5 Nginx手動部署Vue.js 3項目 520 18.6 Jenkins安裝和配置 522 18.6.1 安裝Jenkins 522 18.6.2 Jenkins設(shè)置向?qū)?523 18.6.3 Jenkins插件安裝 524 18.7 項目自動化部署 526 18.7.1 新建任務(wù) 526 18.7.2 源碼管理 526 18.7.3 構(gòu)建觸發(fā)器 527 18.7.4 構(gòu)建環(huán)境 528 18.7.5 構(gòu)建腳本 528 18.7.6 立即構(gòu)建 530 18.7.7 構(gòu)建結(jié)果 530 18.8 本章小結(jié) 531 19 手寫Mini-Vue.js 3框架 532 19.1 Vue.js 3源碼概述 532 19.1.1 認識虛擬DOM 532 19.1.2 Vue.js 3源碼的三大核心模塊 534 19.2 Mini-Vue.js 3框架的實現(xiàn) 535 19.2.1 渲染系統(tǒng)的實現(xiàn) 535 19.2.2 響應(yīng)式系統(tǒng)的實現(xiàn) 542 19.2.3 應(yīng)用程序入口模塊 548 19.3 本章小結(jié) 554
你還可能感興趣
我要評論
|