Vue.js 3前端漸進式建構框架實戰應用｜完美搭配Bootstrap 5與PHP (1版)

類似書籍推薦給您

【簡介】 Bootstrap及Vue.js熱門前端技術一手掌握 ‧MySQL資料庫功能實作與PHP Web應用程式一次到位 ‧沒有Node.js套件管理及Vue-CLI模組一樣搞定SPA 現今前端工程師必備的能力，絕不能止步於HTML、CSS與JavaScript而已，除了要能設計適合不同尺寸載具的RWD頁面外，更需要學會運用不同框架的整合，才能在專案中得心應手同時展現前端工程師的價值。 目前廣泛運用Bootstrap的CSS框架來呈現版面並達成RWD，而Vue.js則是近年備受矚目的三大JavaScript框架之一。本書以Vue.js框架為核心概念，搭配Bootstrap做為UI的呈現，詳細介紹Vue 3之後新增的composition API撰寫方式、建立資料採用ref()和reactive()、options API程式碼架構，並說明與Vue 2的差異，為讀者打造駕馭前端框架的實戰力，成為卓越的前端工程師。 【目錄】 Chapter 1　Vus.js 起步走 　1-1 Vue.js 範本檔的實作 　1-2 {{ }}, mustache 語法的「單向流出之資料綁定」 　1-3 Bootstrap 5 與 Font awesome 的使用 　1-4 v-bind「單向流出資料綁定」 　1-5 事件繫結的 v-on 指令 　1-6 雙向資料綁定的 v-model 指令 　1-7 非單一 Vue 實例 　1-8 輸出HTML 　1-9 Vue 實例的生命週期 　1-10 Vue 的全域變數 　1-11 本章回顧 Chapter 2　站在巨人肩膀上前進 　2-1 結構分析 　2-2 遺珠之憾 Chapter 3　資料的呈現 　3-1 選項物件的 template 屬性 　3-2 使用物件的選項物件 data 屬性 　3-3 使用陣列的選項物件 data 屬性 　3-4 computed 屬性 　3-5 Filters 屬性 　3-6 Watch 屬性 Chapter 4　CSS 樣式的動態綁定 　　4-1 行內樣式 　　4-2 Class 樣式 Chapter 5　選擇性資料的呈現 　5-1 v-show 指令 　5-2 v-if 指令 　5-3 條件式呈現的應用 Chapter 6　表單及其元件 　6-1 文字顯示元件 　6-2 文字框元件─單列 　6-3 文字框元件─多列 　6-4 多選的核對框 Checkbox 　6-5 單選的選項按鈕 Radio Button 　6-6 下拉選單 Select 元件 　6-7 下拉選單 Dropdowns 元件 　6-8 下拉選單 List group 元件 　6-9 範圍 Range 元件 Chapter 7　再談事件繫結 　7-1 事件修飾符號（Event Modifiers） 　7-2 按鍵修飾符號（Key Modifiers） 　7-3 滑鼠按鍵修飾符號（Mouse Button Modifiers） Chapter 8　來自後端的資料 　8-1 來自 PHP 函式的資料 　8-2 PHP 資料檔 　8-3 MySQL 資料庫 　8-4 主頁 xindex.php 　8-5 action4accounts.php 解說 　8-6 二個安全上的漏洞 　8-7 小結 　8-8 〈補充〉MySQL 資料庫的連線開啟與關閉 Appendix A　快速掌握 ES 6【PDF 電子書, 請線上下載】 　A-1 let 區域化變數的存範圍 　A-2 const 常數宣告 　A-3 Data Type 資料型別 　A-4 for...of 巡覽迴圈 　A-5 Template 字串模板 　A-6 Arrow Function 箭頭函數 　A-7 Rest Parameters 餘下參數 　A-8 Object Literal 物件常數 　A-9 Array 物件常見的方法 　A-10 function chaining 　A-11 promise 　A-12 module 模組

Vue.js 2前端漸進式建構框架實戰應用：完美搭配Bootstrap 4與Firebase

類似書籍推薦給您

商品描述 ‧Bootstrap及Vue.js熱門前端技術一手掌握 ‧Firebase資料庫功能與Web應用程式的Authentication一次到位 ‧沒有Node.js套件管理及Vue-CLI模組一樣搞定SPA 現今前端工程師所必備的能力，已經不是個別學會HTML、CSS與JavaScript而已，除了要對不同尺寸的載具設計出RWD頁面外，更需要學會運用不同框架的整合，才能讓專案得心應手並展現前端工程師的價值。 目前普遍運用Bootstrap的CSS框架來呈現版面並達成RWD，而Vue.js則是近年來三大JavaScript框架中的後起之秀。本書將以Vue.js框架為主體搭配Bootstrap做為UI的呈現，並讓讀者具有駕馭前端框架的實力。 以往資料的儲存需要搭配後端資料庫，在後端即服務(Backend as a Service; BaaS)逐漸普及使用後，前端工程師已可以直接在前述框架中使用Firebase，取代原本後端資料庫建置。本書針對如何使用Firebase資料庫提供詳細的說明，同時說明使用Firebase建置出像是手機簡訊的認證機制。 目錄大綱 第1章 Vus.js 起步走 第2章 資料的呈現 第3章 選擇性資料的呈現 第4章 表單與事件 第5章 Vue 元件 第6章 Vuex 狀態管理 第7章 Vue Router 頁面路由 第8章 Firebase 資料庫的應用 第9章 Firebase 身份認證的應用 第10章 快速掌握 Bootstrap 4 第11章 快速掌握 ES 6

Vue.js 3前端開發不踩雷：Composition API×Vue Router×Pinia，帶你快速升級進階開發者！（iThome鐵人賽系列書）【軟精裝】 (1版)

類似書籍推薦給您

【簡介】 從原生到框架，真正理解 Vue.js 原理 深入淺出 Vue.js，搭配真實案例，帶你避開那些惱人的開發痛點！ 　　★ 掌握 Composition API，開發更彈性、維護更容易 　　★ 學 Vue.js 不能只知道語法，本書帶你避開雷區、加速學習與開發 　　本書內容改編自第 14 屆 iThome 鐵人賽 Modern Web 組的佳作系列文章《真的好想離開 Vue 3 新手村 feat. Composition API》。本書以 Vue.js Composition API 風格為主軸，著重於扎實的基礎學習，協助讀者避開的常見雷點，提升學習與開發的效率。書中涵蓋從原生到框架的範疇，帶領讀者從不同角度認識 Vue.js，以及新手學習和開發中容易遇到的問題，並針對讀者可能會踩到的坑，有目的地去探討背後原理，而非為了剖析原始碼而剖析原始碼。即使是前端新手也一定能看懂、更要看，可以對 Vue.js 有更進階的認識。 　　本書首先從開發環境入門，讓讀者了解環境建置的範疇與重要性，並具備根據專案需求調整的能力。隨後介紹常用的 Vue.js 語法，包含 Vue.js 指令、響應式 API 和樣式處理等等，再來進入元件化開發，認識元件的溝通方式與生命週期。除了 Vue.js 核心之外，本書亦包含 Vue Router 4 和 Pinia，透過 Vue Router 常見的應用情境來認識其語法，學會如何建立單頁式應用程式網站，最後是 Pinia，了解使用狀態管理器的目的，並認識常用情境與語法。書中提供線上範例程式碼，讀者可以在學習後實際操作一遍，加深印象並掌握邏輯要點。期望讀者在學習之後，能具備完成一個 Vue.js 專案的基礎知識與能力。 　　四大重點 　　▶ 新手看得懂 　　說明淺顯易懂，新手也能消化 　　▶ 常見實戰範例 　　以常見案例為範例，加速理解使用情境 　　▶ 避開踩坑 　　取自真實專案經驗，帶你避開踩坑之處 　　▶ 提供最新全家桶 　　涵蓋建立 Vue 專案所需的工具與知識 　　目標讀者 　　● 準備要學習 Vue.js 3 的前端新手。 　　● 已經在學習 Vue.js 3 並掌握基礎語法，卻還是常常踩到雷。 　　● 已經開始使用 Vue.js 3 進行開發，只知道如何操作，但不知道其原理。 專業推薦 　　「如果你想要學習前端 Vue 框架，這本書是你的不二之選。透過 Angela 的經驗分享和教學，你將能夠事半功倍地掌握 Vue.js 的精髓，她絕對是學習前端 Vue 框架的最佳引路人。」－－Howard │ 好想工作室 Host 　　「我特別欣賞本書對於 Vue.js 核心概念的解釋方式，作者 Angela 在書中用淺顯易懂的語言解釋了 Vue.js 的原理，不僅避免了過於深入探討原始碼，而且專注於分析和解決實際開發中遇到的問題。這種方式不僅淺顯易懂，而且緊密結合了自身的開發案例，對於理解並應用這些概念至關重要。」－－Kuro Hsu │ Vue.js Taiwan 社群主辦人 　　「這本書提供了完整的論證過程，讓我在看完的同時也可以記得很久，完全不用花費什麼時間再去研究，可以直接使用這麼嚴謹的研究成果當作自己的學習成果，實在是一件很幸福的事情。希望每個學習者都可以透過這本書，體會一下好的學習方法，將自己變成好的工程師。」－－王聖凱（Chris）│《從自學到成功轉職軟體工程師：自主學習讓我重拾人生的發球權》作者 　　（依首字筆畫排序） 【目錄】 推薦序／Howard 推薦序／Kuro Hsu 推薦序／王聖凱（Chris） 第 1 章 認識 Vue 開發環境 1.1 Quick Start 1.2 建立 Vue 專案 1.3 開發利器：ESLint 1.4 開發利器：Prettier 1.5 Vite 1.6 資料夾結構 1.7 番外篇：為什麼要打包？ 1.8 在 Vue 專案使用 Sass / SCSS + 共用變數 第 2 章 進入 Vue 的世界觀 2.1 了解 Vue SFC 檔？ 2.2 深入了解 script setup 語法糖 2.3 Option API 和 Composition API 比一比 2.4 認識模板語法 2.5 Vue 響應式語法 ref、reactive 2.6 Vue 響應式語法 watch & computed 2.7 認識 nextTick 與 DOM 響應更新時機 2.8 樣式處理 2.9 SFC / .vue 檔會如何被解析？ 第 3 章 認識 Vue 指令（Vue Directive） 3.1 什麼是 Vue 指令（Vue Directive）？ 3.2 v-show 與 v-if 3.3 v-for 3.4 v-on 3.5 v-model 第 4 章 元件化開發 4.1 元件溝通的方式 4.2 props 4.3 emit 4.4 v-model 4.5 v-slot 4.6 元件的生命週期與鉤子 4.7 等等非同步資料！在 setup 裡面 await？ 第 5 章 Vue Router 4 5.1 什麼是 Single-Page Application？ 5.2 Vue Router 的作用與歷史模式 5.3 定義路由 5.4 在 Composition API 元件使用 Vue Router 5.5 裝飾匹配的 Link 樣式 5.6 跨路由傳遞參數的方法 5.7 SPA 網站的 Scroll 行為 5.8 導航守衛（Navigation Guards） 5.9 番外篇（一）：從 Vue Router 的動態載入看 Code Split 5.10 番外篇（二）：router-view 遇上 keep-alive 第 6 章 狀態管理器 ── Pinia 6.1 為什麼需要「狀態」管理器？ 6.2 Into Pinia：安裝 Pinia 6.3 Store 6.4 State 6.5 Getters 6.6 Actions 6.7 監聽 Pinia Store 變動 6.8 在元件以外使用 Store

網頁設計完全攻略HTML、CSS、JavaScript、Bootstrap、jQuery、Vue.js、RWD｜搭配ChatGPT效率加倍 (1版)

類似書籍推薦給您

簡介 這是一本內容非常齊全的網頁設計書籍，網羅最新技術、最新語法、最多範例，包含下列的【7大主題】和【超過700個範例程式】，全彩印刷，圖解詳盡，觀念正確，讓讀者快速學會網頁設計的關鍵技術！ ．HTML ．CSS ．JavaScript ．Bootstrap ．jQuery ．Vue.js ．響應式網頁設計 (RWD) 除了分篇分章進行語法教學，目前最熱門的【ChatGPT】也是重要主題，我們會介紹如何使用ChatGPT學習網頁設計，包括撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。 為了讓讀者體驗如何將各種語法活用到實際的網頁設計，不再陷入只會語法，卻不知如何活用的窘境，我們設計了【三大響應式網頁範例】－【圖庫網站】、【旅遊網站】和【部落格網站】，其中第一個範例是使用HTML和CSS手刻響應式網頁，而第二、三個範例是使用HTML、CSS和Bootstrap開發響應式網頁，這些範例均相當精美，對於設計人員開發網頁、老師設計教學範例、學生製作專題或參加競賽都極具參考價值。 學習重點------------------------------------------------------------ 【第0章－ChatGPT】 在本章中，我們會介紹如何使用ChatGPT學習網頁設計，例如撰寫網頁程式、解讀網頁程式、加註解、除錯、查詢語法、尋求技術支援、出題練習、解題、與其它程式語言做轉換等。 【第1篇－HTML】 HTML可以用來定義網頁的內容，開發各種網頁應用程式。在本篇中，我們會介紹HTML常用的元素，例如文件結構、資料編輯與格式化、嵌入內容、表格、表單等。 【第2篇－CSS】 CSS可以用來定義網頁的外觀，包括編排、顯示、格式化及特殊效果。在本篇中，我們會介紹CSS常用的屬性，例如色彩、字型、文字、清單、Box Model、定位方式、背景、漸層、濾鏡、表格、Flexbox Layout、Grid Layout、變形、轉場、動畫、媒體查詢等。 【第3篇－JavaScript】 JavaScript可以用來定義網頁的行為，在本篇中，我們會介紹JavaScript的基本語法，包括型別、變數、常數、運算子、流程控制、函式、物件等，還會介紹JavaScript在瀏覽器端的應用，也就是如何利用JavaScript讓靜態網頁具有動態效果，包括文件物件模型 (DOM)、瀏覽器物件模型 (BOM)、事件處理等。 【第4篇－網頁前端框架】 除了最核心的HTML、CSS和JavaScript，還有許多應用於JavaScript程式開發的函式庫與框架，在本篇中，我們會介紹下列幾種技術： ．Bootstrap：是很受歡迎的HTML、CSS與JavaScript框架，用來開發響應式 (responsive)、行動優先 (mobile first) 的網頁，使用者無須撰寫CSS或JavaScript程式碼，就可以輕鬆設計出響應式網頁。 ．jQuery：是一個快速、輕巧、功能強大的JavaScript函式庫，透過它所提供的API，可以讓諸如操作HTML文件、選擇HTML元素、處理事件、建立特效、使用Ajax技術等動作變得更簡單。 ．Vue.js：這個JavaScript函式庫，提供API讓Web開發人員進行資料繫結及操作網頁上的元素，解決畫面顯示與資料狀態同步的問題。 此外，我們還會介紹【響應式網頁設計】(RWD，Responsive Web Design)，這是一種網頁設計方式，目的是根據使用者的瀏覽器環境 (例如寬度或方向等)，自動調整網頁的版面配置，以提供最佳的顯示結果，同時設計了【3大響應式網頁範例】－圖庫網站、旅遊網站、部落格網站，讓您不只懂語法，更懂如何運用到實際的網頁設計。 目錄 第00章　網頁設計 x ChatGPT 　　0-1　開始使用 ChatGPT 　　0-2　查詢網頁設計相關的語法 　　0-3　查詢網頁設計相關的技術建議 　　0-4　撰寫網頁程式與除錯 　　0-5　與其它程式語言互相轉換 　　0-6　提供練習測驗與解答 【Part 1　HTML】 第01章　網頁設計基礎 　　1-1　網站建置流程 　　1-2　網頁設計相關的程式語言 　　1-3　HTML 的發展 　　1-4　HTML 文件的編輯工具 　　1-5　HTML 文件的基本結構 　　1-6　撰寫第一份 HTML 文件 第02章　文件結構 　　2-1 HTML 文件的根元素 - html 元素 　　2-2 HTML 文件的標頭 - head 元素 　　2-3 HTML 文件的主體 - body 元素 　　2-4 HTML5 新增的結構元素 第03章　資料編輯與格式化 　　3-1　區塊格式 　　3-2　文字格式 　　3-3　插入或刪除資料 - ins、del 元素 　　3-4　項目符號與編號 - ul、ol、li 元素 　　3-5　定義清單 - dl、dt、dd 元素 　　3-6　超連結 　　3-7　相對 URL 的路徑資訊 base 元素 第04章　嵌入內容 　　4-1　嵌入圖片 - img 元素 　　4-2　嵌入影片 - video 元素 　　4-3　嵌入聲音 - audio 元素 　　4-4　設定媒體資源 - source 元素 　　4-5　嵌入不同的圖片 - picture 元素 　　4-6　嵌入物件 - object 元素 　　4-7　嵌入浮動框架 - iframe 元素 　　4-8　嵌入Script - script、noscript 元素 第05章　表格 　　5-1　 建立表格 - table、tr、th、td 元素 　　5-2　 表格標題 - caption 元素 　　5-3　 表格的表頭、主體與表尾 - thead、tbody、tfoot 元素 　　5-4　 直行式表格 - colgroup、col 元素 第06章　表單 　　6-1　建立表單 - form、input 元素 　　6-2　HTML4.01 提供的輸入類型 　　6-3　HTML5 新增的輸入類型 　　6-4　按鈕 - button 元素 　　6-5　標籤 - label 元素 　　6-6　選項群組 - optgroup 元素 　　6-7　將表單欄位群組起來 - fieldset、legend 元素 【Part 2　CSS】 第07章　CSS 基本語法 　　7-1　CSS 的發展 　　7-2　在 HTML 文件中套用 CSS 　　7-3　CSS 的語法 　　7-4　選擇器的類型 　　7-5　樣式表的串接順序 第08章　色彩、字型、文字與清單 　　8-1　色彩屬性 　　8-2　字型屬性 　　8-3　文字屬性 　　8-4　清單屬性 第09章　Box Model 與定位方式 　　9-1　Box Model 　　9-2　邊界屬性 　　9-3　留白屬性 　　9-4　框線屬性 　　9-5　寬度與高度屬性 　　9-6　定位方式 第10章　背景、漸層、濾鏡與表格 　　10-1 背景屬性 　　10-2 漸層函式 　　10-3 濾鏡屬性 　　10-4 表格屬性 第11章　CSS 版面設計 　　11-1　使用 float 屬性進行版面設計 　　11-2　彈性盒子版面 　　11-3　格線版面 第12章　變形、轉場、動畫與媒體查詢 　　12-1　變形屬性 　　12-2　轉場屬性 　　12-3　動畫屬性 　　12-4　媒體查詢 第13章　響應式網頁設計實例―圖庫網站 　　13-1　開發適用於不同裝置的網頁 　　13-2　響應式網頁設計原則 　　13-3　手刻響應式網頁（圖庫網站） 　　13-4　手刻導覽按鈕（漢堡選單） 　　13-5　重置 CSS 【Part 3　JavaScript】 第14章　JavaScript 基本語法 　　14-1　撰寫第一個 JavaScript 程式 　　14-2　JavaScript 程式碼撰寫慣例 　　14-3　型別 　　14-4　變數 　　14-5　常數 　　14-6　運算子 　　14-7　流程控制 　　14-8　函式 　　14-9　變數的有效範圍 第15章　JavaScript 內建物件 　　12-1　認識物件 　　12-2　使用物件 　　12-3　內建物件 第16章　文件物件模型 (DOM) 　　16-1　認識 DOM 　　16-2　取得元素節點 　　16-3　走訪節點 　　16-4　取得 / 設定元素的屬性值與文字內容 　　16-5　新增 / 取代 / 移除節點 　　16-6　存取表單元素 　　16-7　操作 CSS 樣式表 第17章　瀏覽器物件模型 (BOM) 　　17-1　認識 BOM 　　17-2　Window 物件 　　17-3　Location 物件 　　17-4　Navigator 物件 　　17-5　History 物件 　　17-6　Screen 物件 　　17-7　Document 物件 第18章　事件處理 　　18-1　事件驅動模式 　　18-2　事件的類型 　　18-3　定義事件處理程式 / 事件監聽程式 　　18-4　移除事件處理程式 / 事件監聽程式 　　18-5　Event 物件 　　18-6　事件處理範例 【Part 4　網頁前端框架】 第19章　Bootstrap 網格系統 　　19-1　撰寫 Bootstrap 網頁 　　19-2　使用 Bootstrap 網格系統 第20章　Bootstrap 樣式 　　20-1　內容樣式 　　20-2　公用類別 　　20-3　按鈕 　　20-4　表單 第21章　Bootstrap 元件 　　21-1 關閉按鈕 (Close button) 　　21-2 警報效果 (Alert) 　　21-3 下拉式清單 (Dropdown) 　　21-4 按鈕群組 (Button group) 　　21-5 導覽與標籤頁 (Nav and tab) 　　21-6 導覽列 (Navbar) 　　21-7 卡片 (Card) 　　21-8 工具提示 (Tooltip) 　　21-9 彈出提示 (Popover) 　　21-10 摺疊 (Collapse) 　　21-11 手風琴效果 (Accordion) 　　21-12 輪播 (Carousel) 　　21-13 分頁導覽 (Pagination) 第22章　響應式網頁設計實例 - 旅遊網站 　　22-1 「快樂旅遊」網站 　　22-2 設計網頁樣板 　　22-3 設計導覽列 　　22-4 設計輪播 　　22-5 設計內容區 - 警報效果 　　22-6 設計內容區 - 卡片 　　22-7 設計頁尾 第23章　響應式網頁設計實例 - 部落格網站 　　23-1 「快樂部落格」網站 　　23-2 設計網頁樣板 　　23-3 設計頁首、導覽列與介紹區 　　23-4 設計內容區 　　23-5 設計頁尾 第24章　jQuery 　　24-1　認識 jQuery 　　24-2　取得 jQuery 核心 　　24-3　使用 jQuery 核心 　　24-4　事件處理 　　24-5　特效與動畫 第25章　Vue.js 　　25-1 認識 Vue.js 　　25-2 安裝與使用 Vue.js 　　25-3 樣板語法 　　25-4 methods 與 computed 屬性 　　25-5 事件處理 　　25-6 表單欄位繫結 　　25-7 類別與樣式繫結 　　25-8 條件式渲染 　　25-9 清單渲染