為什麼要特別寫 Form 表單攻略呢？因為這是使用者可以輸入資料的常見途徑，一種可以「寫入」資料的方式。 為了使用者可以將資料好好的寫入，單一資料流安排了一系列...
Nnọọ，我是Charlie！在Day23當中我們完成了訂單資料的後端API，而今天我們將完成訂單顯示的前端。 ========================...
透過 Props 可以讓子元件接收來自父元件的「資料」，相對地，父元件則可以接收來自子元件的「事件」，雙方互相傳遞內容，最終可讓子元件變成單純處理畫面樣式的 p...
免責聲明:最近跟著中了"魷魚遊戲"的毒，哈哈哈這個遊戲，相信大多數的人都有玩過~不過，我們的遊戲沒有大筆獎金，也不需要打打殺殺 XD 所以...
What's Cypress Cypress 是 Vue.js 官方推薦的一個 E2E Testing Library，也是這次 E2E Testing 主題所...
問題回答 全域註冊的方法，意思是每個 Vue 元件都能使用的方法。在 Vue 2 會有以下方法： Vue.prototype plugin mixin...
今天來將畫面做好，我們面對的資料長這樣。 需求: 通常一個使用者的 form 表單是用在新增/編輯資料上面。 我們用一個小小的例子，一步一步的完整帶你看看，除了...
今天這篇文章主要想介紹兩個重點： 測試使用 Vuex 的元件 測試 Vuex 本身 Testing Component with Vuex 下面是一個使用了...
之前在 Day15 曾示範單獨在 All.vue 發送 API 取得資料後渲染至畫面上，而上篇我們接續完成其他導覽項目所需要的畫面資料時，應該會發現頁面內容的排...
下面來介紹一下，Vue 3 的一些小小魔法(個人覺得很 Magic ~ 哈哈)，有些是補充說明，有些可能會很少使用到，就連官方都有提醒 " 請謹慎使用...
歐歐歐，在今天的文章開始前插播一則消息，今天是我生日耶✧*｡٩(ˊᗜˋ*)و✧*｡生日也要記的來發鐵人，剩下沒幾天了加加油(๑•̀ω•́)ノ歐給!開始吧! 昨天...
問題回答 懶加載路由或元件的意思是當訪問該路由，或需要顯示該元件時，才載入該路由或元件。這做法會提升網頁效能，在打包時，如果某路由或元件設定了懶加載，就會獨立被...
這需要一個完整的例子。 我先依照先前講的把程式碼先準備好 先看畫面 準備了兩個頁面: User, Users為了示範上面用一個 nav 來切換。 切換到 Us...
Helló，我是Charlie！在Day21當中我們完成了後端的paypal sdk，在今天我們將完成前端結帳的部分。 ====================...
v-on 在Vue.js 中我們可以使用v-on去監聽 DOM 事件，當事件被觸發時會呼叫我們設定的函數或是 JavaScript陳述式做對應的改變。 縮寫:...
說了那麼多，感覺還是有點模糊~ 沒關係，我可能也差不多 ( 哈哈 所以還是透過實作練習，讓自己更了解，看見那更明朗的天空吧 目標 : 透過串接 API 接收取到...
Props 與 Computed 是開發元件最常使用的屬性，下面的範例是一個運用 Props 與 Computed 的簡單例子。 import { ref, c...
問題回答 嵌套路由是指在一個 router-view 裏包 router-view，像是在一個畫框裏，再加上一個畫框。例如 /products/tshirt 與...
之前有預告過，發送 API 的時機點需視不同情境及 UX 體驗規劃而定，因此除了選擇在元件內的生命週期 created 發送，另外在 Vue Router 還有...
前一篇說到 該怎麼寫 data 的資料，找回雙向綁定機制 !!!這邊先小小的補充一下 XD 在 Options API 我們 data 裡定義到的東西都可以被...
唉呀，今天再一篇v-for，不知道v-for分兩篇會不會覺得太灌水，但我還是分兩篇了✧*｡٩(ˊᗜˋ*)و✧*｡ Key 維護狀態 當Vue正在更新使用v-fo...
在 About 刷新一次頁面 還有一些用在我也不太常用的 lifecycle 這次就一起 Demo 一下順序 兩個 component 切換 從 About...
問題回答 Vue 預設是使用 hash 模式，但可選擇使用 history 模式。hash 模式時的 URL 會帶 # 符號，例如 https://exampl...
前兩篇介紹完 Vuex 的核心概念，最後當中大型專案需要組織較為複雜的資料結構時，總不可能一個 index.js 就塞滿所有資料量，這會造成取用和管理上的不便，...
在 Composition API 當中我們可以將響應式資料和相關業務邏輯結合到一起，是因為 Vue3 的 setup 方法 setup setup 是 V...
我們想要找一個適合的地方送出 $store.dispatch('fetchUser', 1); 今天就來聊聊放在哪最適合 一開始，官網教 axios 的地方 U...
昨天講了條件渲染，今天來講列表渲染(List Rendering)吧!! v-for 當我們在頁面上綁定資料時，遇到一些重複、複雜的data時(像是array、...
問題回答 導航守衛（Navigation Guard）可以在 3 個地方使用，包括全域、元件和路由。所謂導航守衛就是在訪問頁面之前，會像一個守衛攔截並執行你所設...
在 Vue3 中我們可以使用 Options API 或是 Composition API 選擇一種方式來撰寫，下面來看看甚麼是 Options API ? 甚...
承上篇從 Actions 進展到 Mutations，接下來讓 Mutations 將結果直接賦值給 State，繼續接棒完成 Vuex 狀態存取流程！ Sta...
Chris
charlieda
Teen
gior__ann
Mia Yang
Alysa Chan
ㄆㄩ
iThome鐵人賽
看影片追技術