《Vue3.x+TypeScript實踐指南》已出版

   轉眼回長沙快2年了,圖書本在去年就已經完稿,因為疫情,一直耽擱了,直到這個月才出版!疫情之下,眾生皆苦!感覺每天都是吃飯、睡覺、上班、做核酸!

  圖書介紹

  為了緊跟技術潮流,該書聚焦於當下火的Vue3和TypeScript及其相關技術,這些知識是面試Vue方向前端崗位時必須掌握的內容。該書站在初學者的視角,將理論和實踐相結合,通過循序漸進、由淺入深的方式來一一講解Vue3的技術體系,讓讀者在學習的過程中不斷提升前端開發水平。閱讀該書僅需要有CSS、HTML、JS基礎,即使你是一個Vue初學者,閱讀該書也不會有任何困難。書中提供了豐富的示例來幫助讀者將理論知識運用於實踐,讓讀者學習起來不會感到枯燥乏味。相信該書能讓讀者在短時間內快速掌握TypeScript和Vue3的相關知識,並能夠將所學知識運用到實際應用當中去。
  如果你是Vue初學者,建議你按照章節順序從頭到尾閱讀,如果你已經有了一定的基礎,可以挑選自己感興趣的章節進行閱讀。
  《Vue3.x TypeScript實踐指南》適合vue3初學者及所有Web開發從業人員,也適合作為高等院校和培訓學校電腦專業課程的教學參考書。

  本書分為10章,第1~2章是講解TypeScript基礎和常用語法,第3章是對Vue3的基礎知識點進行介紹,第4章是對Vue3中新增的Composition API進行詳細的介紹,第5章是介紹Vue3中新增的組件和API,第6章是介紹vue-router和vuex的相關知識,第7章是介紹Vue3的常用UI框架,第8章是對Webpack5進行介紹,第9章是通過一個大屏展示的實戰項目來將書中的內容應用到實踐中,第10章是講解Vue前端崗位的面試求職,而我們學習技術的最終目的就是為了就業。

  其它圖書

  本書提供PPT課件!

  購買地址

    京東

    噹噹

    天貓

           有需要的讀者可以加我微信(jiekzou)購買,打5折,數量有限,先到先得,比在線商城更加優惠哦!

  圖書目錄

簡介

前言

目錄

 1

TypeScript基礎 

1.1 初識 TypeScript

1.1.1 TypeScript的介紹

1.1.2 TypeScript的特點

1.2 安裝 TypeScript

1.2.1 安裝node.js

1.2.2 npm

1.2.3 npm install –save –save-dev -D-S-g 的區別

1.2.4 yarn

1.2.5 全局安裝 TypeScript

1.3 第一個 TypeScript 程式

1.3.1 tsjs的區別

1.3.2 編寫TS程式

1.3.3 手動編譯程式碼

1.3.4 VS Code自動編譯

1.3.5 類型註解

1.3.6 介面

1.3.7

1.4 使用Webpack打包TypeScript

1.5 VS Code

1.5.1 忽略node_module目錄

1.5.2 安裝VS Code插件

1.5.3 打開並運行webpack項目

1.5.4 VS Code配置

1.5.5 搜索

 2

TypeScript常用語法 

2.1 基礎類型

2.1.1 布爾值

2.1.2 數字

2.1.3 字元串

2.1.4 undefined  null

2.1.5 數組

2.1.6 元組 Tuple

2.1.7 枚舉

2.1.8 any

2.1.9 void

2.1.10 Never

2.1.11 Object

2.1.12 聯合類型

2.1.13 類型斷言

2.1.14 類型推斷

2.2 介面

2.2.1 介面初探

2.2.2 可選屬性 ?

2.2.3 只讀屬性readonly

2.2.4 函數類型

2.2.5 類類型

2.3 

2.3.1 基本示例

2.3.2 繼承

2.3.3 公共,私有與受保護的修飾符

2.3.4 readonly 修飾符

2.3.5 存取器

2.3.6 靜態屬性

2.3.7 抽象類

2.4 函數

2.4.1 基本示例

2.4.2 函數類型

2.4.3 可選參數和默認參數

2.4.4 剩餘參數

2.4.5 函數重載

2.5 泛型

2.5.1 泛型引入

2.5.2 使用函數泛型

2.5.3 多個泛型參數的函數

2.5.4 泛型介面

2.5.5 泛型類

2.5.6 泛型約束

2.6 聲明文件和內置對象

2.6.1 聲明文件

2.6.2 內置對象

 3

Vue3快速上手 

3.1 Vue介紹

3.2 認識Vue3

3.3 vue-devtools

3.3.1 官網編譯安裝

3.3.2 極簡插件在線安裝

3.4 創建vue3項目

3.4.1 使用 vue-cli 創建

3.4.2 vue3目錄結構分析

3.4.3 使用 vite 創建

3.5 Vue常用指令介紹

3.5.1 v-text

3.5.2 v-html指令

3.5.3 v-modelv-bind

3.5.4 v-once

3.5.5 v-pre

3.5.6 v-cloak

3.5.7 v-forkey屬性

3.5.8 v-on

3.5.9 多事件處理

3.5.10 事件修飾符

3.5.11 鍵盤修飾符

3.5 Vue中使用樣式

3.5.1 使用class樣式

3.5.2 使用內聯樣式

3.6 條件判斷

3.6.1 v-if

3.6.2 v-if v-else

3.6.3 v-else-if

3.6.4  <template> 元素上使用 v-if 條件渲染分組

3.6.5 v-show

3.6.6 v-if vs v-show

3.7 模板中使用Javascript表達式

3.8 計算屬性

3.9 watch

3.9.1 常規用法

3.9.2 立即執行(immediatehandler)

3.9.3 深度監聽

3.9.4 computedwatch的區別

3.10 自定義組件使用v-model實現雙向數據綁定

3.11 自定義組件slots

3.12 PropAttribute繼承(Vue3

3.12.1 Attribute 繼承

3.12.2 禁用Attribute繼承

3.13 $ref 操作DOM

3.14 表單數據雙向綁定

3.15 組件傳值

3.15.1 父組件向子組件傳值

3.15.2 子組件向父組件傳值

3.16 $root$prarent的使用

3.17 this.$nextTick

3.18 axios介紹

3.19 跨域請求

3.20 extendmixinextends

 4

 Composition API 

4.1 Vue3集成TypeScript

4.2 setup

4.2.1 setup細節

4.2.2 propsattrs的區別

4.3 ref

4.4 reactive

4.5 reactiveref 的區別

4.6 Vue2Vue3響應式比較

4.6.1 vue2的響應式

4.6.2 vue3的響應式

4.7計算屬性與監視

4.8 組件生命周期

4.9 自定義hook函數

4.10 toRefs

4.11 ref獲取元素

4.12 shallowReactive  shallowRef

4.13 readonly  shallowReadonly

4.14 toRaw  markRaw

4.15 toRef

4.16 unRef

4.17 customRef

4.18 provide  inject

4.19 響應式數據的判斷

4.20 Option API VS Composition API

4.20.1 Option API的問題

4.20.2 使用Compisition API

 5

 Vue3新組件和新API 

5.1 Fragment(片斷)

5.2 Teleport(瞬移)

5.3 Suspense(不確定的)

5.4 全新的全局API

5.4.1 createApp()

5.4.2 Vue3使用Proxy 優先defineProperty()

5.4.3 defineComponentdefineAsyncComponent

5.4.4 nextTick()

5.5 將原來的全局API轉移到應用對象

5.6 模板語法變化

5.6.1 v-model

5.7 v-if  v-for 的優先順序對比

5.8 示例項目:todoList

5.8.1 示例介紹

5.8.2 組件拆分

5.8.3 程式碼實現

5.8.4 Home.vue主組件

5.8.5 Header.vue程式碼

5.8.6 Footer.vue程式碼

5.8.7 List.vue列表程式碼

5.8.8 Item.vue子組件程式碼

 6

 vue-routervuex

6.1 什麼是路由

6.2 安裝vue-router的兩種方式

6.3 Vue Router的基本使用

6.3.1 router-link

6.3.2 設置選中路由高亮

6.3.3 router-view

6.3.4 router/ index.ts

6.4 路由HTML5 History模式和hash模式

6.4.1 hash模式

6.4.2 HTML5 History模式

6.4.3 伺服器配置示例

6.5 帶參數的動態路由匹配

6.6 響應路由參數的變化

6.7 捕獲所有路由和設置404 介面

6.8 vue-router中編程式導航

6.9 路由傳參query¶ms

6.9.1 query

6.9.2 params

6.10 命名路由

6.11 嵌套路由

6.12 為路由切換使用過渡動效

6.12.1 單個路由的過渡

6.12.2 基於路由的動態過渡

6.13 路由懶載入

6.14 使用命名視圖

6.15 keep-alive

6.15.1 router配置快取

6.15.2組件配置快取

6.16 vuex 是什麼?

6.17 安裝vuex

6.18 配置vuex的步驟

6.19 獲取vuex中的state

6.19.1 方法一:按需引入store.state

6.19.2 方式二:全局配置this.$store

6.19.3 方式三:mapState助手

6.20 獲取vuex中的Getter

6.20.1 定義Getter

6.20.2 Getter訪問方式一:store.getter.

6.20.3 Getter訪問方式二:this.$store.getters

6.20.4 Getter訪問方式三:mapGetters輔助函數

6.21 調用Mutations Actions

6.22 Composition API方式使用vuex

6.22.1 訪問State and Getters

6.22.2 訪問Mutations and Actions

6.23 Modules模組

6.24 Namespacing命名空間

6.24.1.開啟模組的命名空間

6.24.2.在組件中使用

 7

 Vue3的常用UI框架

7.1 Vue的常用UI框架介紹

7.2 ant-design-vue介紹

7.2.1 使用 npm  yarn 安裝

7.2.2 在瀏覽器中使用

7.2.3 使用示例

7.2.4 按需載入

7.2.5 創建項目

7.2.6 使用ant-design-vue

7.2.7 ant-design-vue引入進行統一封裝

7.2.8 主題訂製

7.2.9 國際化

7.2.10 Layout 布局

7.2.11 使用iconfont圖標

7.3 Element Plus介紹

7.3.1 npm CDN安裝

7.3.2 引入 Element Plus

7.3.3 全局配置

7.3.4 自定義主題

7.3.5 組件

 8

 Webpack5介紹

8.1 webpack概念的引入

8.2 初識webpack5

8.2.1 webpack5的新特性:

8.2.2 webpack核心概念

8.2.3 webpack構建流程(原理)

8.3 webpack安裝和體驗

8.4 webpack最基本的配置文件的使用

8.5 多入口和多出口配置

8.6 webpack-dev-server

8.7 配置devServer

8.8 打包和壓縮HTML資源

8.9 打包多個HTML文件

8.10 打包css資源

8.11 打包lesssass

8.11.1 打包less

8.11.2 打包sass

8.12 提取css為單獨的文件

8.13 處理css瀏覽器兼容性

8.14 壓縮css內容

8.14.1 optimize-css-assets-webpack-plugincssnano

8.14.2 css-minimizer-webpack-plugin

8.15 打包圖片資源和字體資源

8.15.1 打包圖片資源

8.15.2 打包字體資源

8.16 HMR熱模組替換

8.17 去除項目里無用的jscss程式碼

 9

 大屏展示實戰項目

9.1 項目說明

9.2 技術選型

9.3 編碼規範

9.4 項目創建和初始化

9.5 項目基礎框架搭建

9.6 大屏首頁分析

9.6.1 大屏組件化分析

9.6.2 大屏技術實現分析

9.7 大屏技術準備

9.7.1 關於dart-sassnode-sass

9.7.2 安裝normalize.css

9.7.3 安裝moment

9.7.4 安裝echarts

9.7.5 安裝axios並進行全局封裝

9.7.5 安裝axios

9.7.6 安裝mockjs

9.7.7 安裝qs

9.8 大屏布局

9.8.1 布局方案分析

9.8.2 Grid布局簡介

9.8.3 程式碼實現

9.9 公共組件開發

9.9.1 時間類型切換組件

9.9.2 首頁導航組件

9.9.3 子模組標題組件

9.9.4 echarts公共組件

9.9.5 排名組件

9.10 大屏業務組件開發

9.10.1 抽取公共hooks

9.10.2 線網

9.10.3 車輛

9.10.4 違規原因分析

9.10.5 卡類型使用情況

9.10.6 線路運客數排名

9.10.7 電子支付趨勢

9.10.8 地圖區域客流

9.11 大屏自適應

9.11.1 postcss-pxtorem

9.12 常見錯誤及解決方案

 10

 Vue筆試面試

10.1 製作簡歷

10.1.1 簡歷模板

10.1.2 個人資訊

10.1.3 專業技能

10.1.4 工作經歷

10.1.5 項目經歷

10.2 選擇公司和崗位

10.3 面試準備和自我介紹

10.3.1 面試準備

10.3.2 自我介紹

10.4 面試總結

10.5 常見筆試面試題

10.5.1 單頁應用和多頁應用的區別

10.5.3 什麼是MVVM

10.5.3 Vue響應式原理

10.5.4 data為什麼是函數

10.5.5 v-model原理

10.5.6 v-ifv-show的區別

10.5.7 computedwatchmethod的區別

10.5.8 Vue的生命周期及順序

10.5.9 介面請求一般放在哪個生命周期中?

10.5.10 Vue組件的通訊方式

10.5.11 slot插槽

10.5.12 虛擬DOM

10.5.13 Vuekey的作用

10.5.14 nextTick原理

10.5.15 說說 vuex

10.5.16 keep-alive

10.5.17 router  route 的區別?

10.5.18 vue-router有哪幾種導航鉤子?

10.5.19 vue-loader是什麼?使用它的用途有哪些?

10.5.20 Vue性能優化

參考文獻

 

Tags: