本篇大綱

1. 簡介
2. 使用 HTML <a> download Attribute
3. 通過 blob 下載圖片
4. 通過 blob 下載 txt 檔案

簡介

稍微記錄如何在網頁上設置下載按鈕。第一個方式為使用 HTML <a> tag 原先提供的 download 屬性，但它有其限制性。另一個方法則為通過 blob 物件讓使用者能夠直接儲存檔案。

Codepen Live Demo: Download file buttons

本篇大綱：

1. 環境設置
2. 準備多語言檔案
3. 檔案設定
4. 在 component 中使用
5. 其他資料格式

簡介

這是一篇 Vue3 搭配 Vue CLI 使用 i18n 來切換網站語言的栗子。

本篇大綱：

1. 簡介
2. 前置作業
3. Vuex 設定
4. CRUD 功能

簡介

這是一個 Nuxt 搭配 Vuex 的 CRUD 栗子。

Source code
Live Demo

本篇大綱：

1. this 在 4 種情境下指向什麼
2. 快速判斷 this 的小方法
3. 箭頭函式的 this

this 用法

解析器（瀏覽器）在呼叫函式的時候都會傳隱形的參數，就是 this . this 指向一個物件，這個物件是上下文物件。根據函式呼叫的方法不同， this 會指向不同的東西。

本篇大綱：

• 原型是什麼
• 原型鏈是什麼
• 檢查屬性以及實例的方法

JavaScript 的物件通過原型 (Prototype) 機制來達到相互繼承功能。當使用 Constructor Function 創造 object 時，所創造出來的物件不共享 constructor 的屬性和方法。說創造出來的物件稱為實例 ( instance ).

將在 Leetcode 上解過的題目寫在這裡做記錄用，語言是使用 python.

Live Demo
Github

簡介

最後是用戶登入的 auth 以及網頁的路徑。在用戶尚未登入前不能瀏覽 browser 頁面。

經過前面幾個 part，component 以及基本的功能都處理完畢。最後就可以收尾啦。

Live Demo
Github

簡介

Browser 頁處理的東西比較多：用戶 Profile 選擇、首頁大圖、每列分類以及卡片、卡片詳細資訊、播放器、搜尋功能、sign out 功能。series 以及 films 的資料都存在 firestore 裡，之後有餘力會再多增加幾筆資料做換頁效果。

Live Demo
Github

簡介

用戶登入包括了 sign in 和 sign up 兩個頁面。都使用了 firebase 的 auth 功能處理。Firebase 會幫忙驗證 email 和 password 的合法性。最後也會處理只有登入的用戶才能瀏覽 browser 頁的功能。真的是 hen 方便。

Live Demo
Github

簡介

首頁由 5 個部分組成：Header 首頁大圖、Jumbotron 資訊塊、Accordion 常見問題、Otp form 訂閱表單、Footer 頁尾。每一塊都為單獨的component，組合起來後才渲染到瀏覽器。每一個 component 的創建邏輯相似：創建需要的元件 > 創建組裝元件的 container，把需要的元件排進去 > 添加樣式。

分開創建 component 除了便於維護外，最大的功能在於可以重複使用，就如 part 4 的 Opt form 在 part 5 的 header 中可以直接套用。