《Vue.js 2.x實踐指南》 已出版

来源:https://www.cnblogs.com/jiekzou/archive/2020/05/11/12870676.html
-Advertisement-
Play Games

《Vue.js 2.x實踐指南》其實早在一年前就已經完稿,只是由於疫情的緣故耽擱了許久才下廠印刷。 本書旨在讓初學者能夠快速上手vue技術棧,並能夠利用所學知識獨立動手進行項目開發。我的寫作風格一向都是喜歡採用理論和實踐相結合的方式,這樣學習起來不會那麼枯燥,而且極具成效。時間是很寶貴的東西,所以盡 ...


  《Vue.js 2.x實踐指南》其實早在一年前就已經完稿,只是由於疫情的緣故耽擱了許久才下廠印刷。

  本書旨在讓初學者能夠快速上手vue技術棧,並能夠利用所學知識獨立動手進行項目開發。我的寫作風格一向都是喜歡採用理論和實踐相結合的方式,這樣學習起來不會那麼枯燥,而且極具成效。時間是很寶貴的東西,所以儘量用最少的時間去掌握對自己有幫助知識是非常重要的。

  閱讀本書需要具備HTML、CSS和JS基礎,本書針對的用戶群體主要是:想要快速學習vue技術,並能夠用vue進行實際項目開發的讀者以及高校電腦專業學生。書中通過一個H5移動應用和一個PC Web應用來講述了vue的實踐應用。

  另外:本書提供PPT課件。

  書中示例項目截圖:

 

  書目錄大綱:

17
◄ VUE開發前奏 ►    7
1.1  網站交互方式    8
1.1.1  多頁WEB應用(MPA)    8
1.1.2  單頁WEB應用(SPA)    9
1.2  前後端分離的開發模式    11
1.3  前端三大開發框架    12
1.4  為什麼要學習流行框架(MVVM框架)    13
1.5  框架和庫的區別    14
1.6  模塊化和組件化    14
1.7  後端中的MVC與前端中的MVVM 之間的區別    15
1.8  NODE.JS安裝    16
1.9  PROMISES介紹    17
1.9.1  在PROMISES出現之前的文件讀取方式    17
1.9.2  PROMISES基本概念介紹    19
1.10  ES7語法糖ASYNC/AWAIT    22
1.11  開發工具    23
1.11.1  VISUAL STUDIO CODE    24
1.11.2  VUEDEVTOOLS    25
1.11.3  CHROME    25226
◄ VUE基礎入門 ►    26
2.1  VUE發展歷史    26
2.2  什麼是VUE.JS    27
2.3  VUE基本代碼    27
2.4  VUE常用指令介紹    30
2.4.1  V-CLOAK指令    30
2.4.2  V-HTML指令    32
2.4.3  V-BIND&V-ON指令    33
2.4.4  示例:跑馬燈特效    34
2.5  事件修飾符    35
2.6  V-MODEL雙向數據綁定    40
2.7  V-FOR和KEY屬性    42
2.8  V-IF和V-SHOW    46
2.9  在VUE中使用樣式    47
2.9.1  使用CLASS樣式    47
2.9.2  使用內聯樣式    48
2.10  過濾器    49
2.10.1  全局過濾器    49
2.10.2  私有過濾器    50
2.11  鍵盤修飾符以及自定義鍵盤修飾符    51
2.12  自定義指令    52
2.13  增刪改查示例    53358
◄ VUE進階 ►    58
3.1  VUE生命周期    58
3.2  AXIOS介紹    61
3.2.1  跨域請求    64
3.2.2  NODE手寫JSONP伺服器剖析JSONP原理    65
3.3  VUE過渡動畫    67
3.3.1  單元素/組件的過渡    67
3.3.2  列表過渡    73475
◄ VUE組件開發 ►    75
4.1  組件介紹    75
4.1.1  全局組件定義的三種方式    75
4.1.2  使用COMPONENTS定義私有組件    77
4.1.3  組件中展示數據和響應事件    77
4.1.4  組件切換    78
4.2  組件傳值    80
4.2.1  父組件向子組件傳值    80
4.2.2  子組件向父組件傳值    81
4.2.3  事件匯流排(EVENTBUS)    83
4.3  組件案例:留言板    85
4.4  使用REF獲取DOM元素和組件引用    88
4.5  VUEX    90
4.5.1  安裝VUEX    91
4.5.2  配置VUEX的步驟    91
4.6  RENDER函數    94597
◄ 路由VUE-ROUTER ►    97
5.1  什麼是路由    97
5.1.1 前端路由的原生代碼實現    97
5.2  安裝VUE-ROUTER的兩種方式    98
5.3  VUE-ROUTER的基本使用    99
5.3.1 404    101
5.4  設置選中路由高亮    102
5.5  為路由切換啟動動畫    103
5.6  路由傳參QUERY&PARAMS    103
5.6.1  QUERY    104
5.6.2  PARAMS    105
5.7  使用CHILDREN屬性實現路由嵌套    105
5.8  使用命名視圖    107
5.9  WATCH監聽    110
5.10  COMPUTED:計算屬性的使用    111
5.11  WATCH、COMPUTED、METHODS的對比    113
5.12  NRM的安裝及使用    114
5.1.3  VUE-ROUTER中編程式導航    1156117
◄ WEBPACK介紹 ►    117
6.1  WEBPACK概念的引入    117
6.2  WEBPACK:最基本的使用方式    118
6.3  WEBPACK最基本的配置文件的使用    121
6.4  WEBPACK-DEV-SERVER的基本使用    122
6.5  使用HTML-WEBPACK-PLUGIN插件 配置啟動頁面    124
6.6  WEBPACK-DEV-SERVER的常用命令參數    125
6.7  WEBPACK-DEV-SERVER配置命令的另一種方式    127
6.8  LOADER:配置處理CSS樣式表的第三方LOADER    127
6.9  LOADER:分析WEBPACK調用第三方LOADER的過程    129
6.10  NPM INSTALL --SAVE 、--SAVE-DEV 、 -D、-S、-G 的區別    130
6.11  LOADER:配置處理LESS文件的LOADER    131
6.12  LOADER-配置處理SCSS文件的LOADER    131
6.13  WEBPACK中URL-LOADER的使用    132
6.14  WEBPACK中使用URL-LOADER處理字體文件    136
6.15  WEBPACK中BABEL的配置    1377140
◄ WEBPACK和VUE的結合 ►    140
7.1  WEBPACK中導入VUE和普通網頁 使用VUE的區別    140
7.1.1  在WEBPACK中使用VUE    140
7.1.2  在WEBPACK中配置.VUE組件頁面總結    146
7.2  EXPORT DEFAULT 和 EXPORT 的使用方式    147
7.3  結合WEBPACK使用VUE-ROUTER    149
7.4  結合WEBPACK實現CHILDREN子路由    152
7.5  組件中STYLE標簽LANG屬性和SCOPED 屬性的介紹    153
7.5.1  重寫子組件中的樣式    154
7.6  抽離路由模塊    1568158
◄ WEBPACK中UI組件的使用 ►    158
8.1  使用餓了麽的MINT UI 組件    158
8.1.1  BUTTON組件    159
8.1.2  TOAST組件    160
8.2  MINT UI按需導入    162
8.3  MUI介紹    164
8.4  MUI的使用    164
8.5  VANT UI    165
8.6  ELEMENT UI    166
8.6.1  引入ELEMENT    166
8.6.2  ELEMENT常見應用場景及解決方案    1669176
◄ 移動圖書商城 ►    176
9.1  MOCKJS介紹    176
9.2  APP首頁設計    177
9.3  使用阿裡巴巴矢量庫    178
9.3.1  UNICODE、FONT CLASS和SYMBOL的區別    179
9.3  APP.VUE 組件的基本設置    181
9.3.1  設置路由激活時高亮的兩種方式:    181
9.3.2  實現 TABBAR 頁簽不同組件頁面的切換    182
9.3.3  路由切換添加過渡效果    183
9.4  首頁輪播圖    184
9.4.1  什麼是 BASE64 編碼?    187
9.5  首頁九宮格    188
9.6  圖書分類組件    191
9.7  製作頂部滑動導航    194
9.8  製作圖片列表    198
9.9  在ANDROID手機瀏覽器中調試APP    201
9.10  真機調試    202
9.11  封裝輪播組件    204
9.12  商品詳情頁    205
9.12.1  自定義V-TAP指令    208
9.13  購物車小球動畫    209
9.13.1  GETBOUNDINGCLIENTRECT    211
9.14  封裝購買數量組件    211
9.15  設計購物車數據存儲    213
9.16  我的購物車    215
9.17  增加頁面返回    220
9.18  總結    22110222
◄ 天下會管理平臺 ►    222
10.1  VUE前端開發規範    222
10.1.1  統一開發環境    222
10.1.2  技術框架選型    222
10.1.3  命名規範    223
10.1.4  註意事項    224
10.1.5  ESLINT配置JS語法檢查並自動格式化    225
10.2  通過VUE-CLI來搭建項目    227
10.3  完善項目結構    230
10.3.1  設置瀏覽器圖標    230
10.3.2  完善SRC源碼目錄結構    230
10.3.3  引入ELEMENT UI    231
10.3.4  封裝AXIOS請求    231
10.3.5  AJAX跨域支持    236
10.3.6  封裝全局的CSS變數文件    238
10.3.7  VUE-WECHAT-TITLE動態修改TITLE    239
10.3.8  封裝全局的配置文件BASE-CONFIG.JS    239
10.4  項目介紹及其界面設計    240
10.5  項目設計和分析    242
10.5.1  幫主首頁    242
10.5.2  其他管理界面    244
10.5.3  設計路由    248
10.5.4  設計業務邏輯層    251
10.5.5  VUEX設計    252
10.5.6  許可權設計    254
10.5.7  菜單組件    254
10.6  表單驗證    260
10.7  登錄    266
10.7.1  帳號密碼登錄    267
10.7.2  線上生成二維碼    270
10.7.3  製作網站ICO圖標    270
10.7.4  存儲登錄信息    271
10.7.5  回車自動登錄    272
10.7.6  防止登錄按鈕頻繁點擊    272
10.8  增刪改查列表    273

   創作不易,且珍惜~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 文本的一些屬性 android:id="@+id/editText" 給文本的id重命名 android:layout_width="wrap_content" 必要的長寬 android:layout_height="wrap_content" android:ems="10" 本文本框一行的最大 ...
  • 本項目目的是在移動端的 Native App 中以庫的形式集成已經寫好的 Unity 工程,利用 Unity 游戲引擎便捷的開發手段進行跨平臺開發。 ...
  • 更多的文章請看-2020iOS面試大全 持續更新! 分類 擴展 代理(Delegate) 通知(NSNotification) KVO (Key-value observing) KVC (Key-value coding) 屬性關鍵字 一、分類 1.分類的作用? 聲明私有方法,分解體積大的類文件, ...
  • 新聞 1. "喪心病狂or形勢所迫?談談Android奇葩的“鏈式啟動”" 1. "傳聞稱Android TV將更名為Google TV" 1. "谷歌官宣Android 11 Beta發佈會:6月3日見" 教程 1. "協程 Flow 最佳實踐 | 基於 Android 開發者峰會應用" 1. " ...
  • 學習 babel 時,遇到的問題,使用舊版本 babel 命名規則安裝後運行報錯,初步查找到原因是因為 babel 各個preset和plugin新舊不同版本之間存在相容問題,提示使用 npx babel-upgrade 可以自動升級,但是我升級失敗了,提示解析錯誤,後來看到了這篇文章,問題得以解決 ...
  • 一、逗號表達式 1.程式中使用逗號表達式,通產是要分別求出逗號表示式內各表達式的值,並不一定要求整個表達式的值。 2.並不是所有出現逗號的地方都組成逗號表達式,例如在變數說明中,函數參數表中逗號,只是用作各個變數之間的間隔符。 var a,b; b = (a=3,--a,a*5); console. ...
  • 介紹 集合是由一組無序且唯一(即不能重覆)的項組成的。比如由一個大於等於0的整數組成的集合:N={0,1,2,3,4,5,6,...}。 還有一個概念叫空集。用'{}'表示。 創建集合 我們使用對象來表示集合。 1 function Set() { 2 let items = {}; 3 } 常見方 ...
  • html post請求之a標簽的兩種用法舉例 1、使用ajax來發起POST請求HTML代碼如下: <a href="https://www.cnblogs.com/" class="a_post">發起POST請求</a> JQuery代碼如下: $(".a_post").on("click",f ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...