視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化，當專案越來越大時，或是接近上線時期，修改元件的部分，有時會影響到整個專案。人工去檢視一定會有疏...
在昨天的鐵人賽，我們利用rails的scaffold指令，迅速地將看板Kanban的CRUD調整成符合專案適合的樣貌，並完成了使用者登入後頁面，列出了目前筆者在...
tags: Vuejs 前言 ✐ 上一篇中說明了透過 Prop，我們可以將父組件的值傳遞給子組件，這一篇中，我們會來看 Prop 的使用細節。 命名規則 ✐ 在...
Vue：設定基本路由，可以拆解成以下步驟： 定義模板 template 配置模板路線(routes)(每一條路線，都會對應到相應的component；而這邊的...
用 Storybook 搭配測試方法，從元件開發到完成整個專案，可以增加開發者的信心，不會擔心改A錯B的狀況發生，因為從邏輯面及UI面都能被完整的測試到。 單元...
tags: Vuejs 組件間的傳遞數據的方法 ✐ 在 Vue 之中，組件之間的數據並不共用，換句話說，組件之間若是需要傳遞數據，需要透過幾種方式進行： 以下列...
Vue：還記得在Vue CLI建置專案時候，也有遇上Vue Router嗎？無論你是使用history mode或hash mode，設置路由，將可以導入到正確...
Vue Apollo Mutations 當我們要改變後端資料時，就要使用 Mutation使用 this.$apollo.mutate() 發送給 Graph...
Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...
tags: Vuejs 組件的抽象概念 ✐ 註：下方 component 和 組件 一詞意思相同。 component 在 Vue 中是一個重要的概念，照...
Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式，這樣就不需要寫程式重啟，也能發現元件的變化。 要使用 Control...
昨天在理解Vue的生命週期時提到，Vue在前端處理上有一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。所以我們今天試著在Rails App裡...
很久以前做的 form 練習 使用表單元件 <textarea>、<input>、<select> 時，通常需要用戶的...
Vue：我們透過組件，來模塊化我們的功能。我知道你很好奇，到底如何從根模塊，傳值給組件，使組件可以渲染資料於table中，對吧？如果，仔細觀察昨天的程式碼，你會...
Vue：對於昨天全局與局部的基本了解後，今天我們利用一個實例，來解一下組件的好處吧~ 首先，先看一個基本的網頁結構：一般來說，網頁中一定會有共用的部分。以上圖為...
Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...
在第12天鐵人賽前在利用event bus傳情書給某個元件的時候， 可能眼尖的客倌會注意到，疑? 這個created()是不是還沒介紹到呢? created()...
tags: Vuejs v-for ✐ v-for 指令可以使我們方便的渲染 Array 成為列表，在渲染列表相關的 data 時十分方便，並且 v-for 除...
Vue：隨著你使用vue的狀況，你更應該要了解元件模組化的概念。vue不但在資料上面有所規劃，他在元件模組化也有所強大，讓你可以輕鬆地管理好你的元件。在進行案例...
目標： 成功獲取後端資料，將資料呈現在 UI 上 在上上一篇章中，我們已經將 Vue Apollo 整合到 Vue 專案中這次會帶著讀者透過 API 接收...
在 JS 中有監聽器 addeventListener ，而 Vue 也有自己一套 DOM 元素監聽器的指令 v-on ， Vue 也配置了幾個修飾符來替代像是...
root ├── src │ ├── assets │ ├── components │ ├── graphql │ ├──...
在這個單元我們使用官網的教學搭配Angular的框架，STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者，可以跳過這個單...
昨天的鐵人賽文章有聊到event bus雖然方便，但是不容易偵錯及維護。隨著專案變大、元件變得越來越多，元件間的架構越來越複雜，有時候會遇到多個元件需要共用同一...
v-on 要對模板中的元素添加 Event Listener，Vue 提供 v-on 指令可以針對 元素 綁定 Event Listener，並在事件發生時調用...
想起當初，第一次約她見面，是那麼輕鬆又好約。那一天，我開著我的車，直接到她公司樓下等。透過VS Code傳遞了訊息，而她的回應非常迅速。縱使之前沒見過我，我也...
接下來就來把Task元件組裝成TaskList吧 TaskList 可以把TaskList規劃成四種狀態 Default - 當 Task 都是 defu...
tags: Vuejs v-if ✐ v-if 指令可以決定是否渲染元素，該元素只有在填入的 expression 為 truthy 時會渲染。 下方為簡單範...
雖然開發者工具中已經提供相當豐富的功能，也一直持續發展中。不過 Google 有開放提供可裝在開發者工具的擴充功能的 API，像是目前大多主流的前端框架的開發者...
Azure Container Registry 服務 Vue 專案 我們使用 Vue官方教學還實作一個前端網站。Vue 可以使用CDN的方式在靜態網頁使用，可...
lala_lee_jobs
貓貓工程師 / PM Ting
RURU Tseng
EdwardXiong
abc61958761
Celeste
Yuri Tsai
pellok
iThome鐵人賽
看影片追技術