這週都在討論props（從外層傳到內層元件）與emit（從內層傳到外層），如果是平行關係的元件（而非父子關係），要如何進行資料傳遞呢? 這時候就會出動一台公車，...
與Vue相遇後，一開始其實有點懷疑vue的應用。但使用後，對她越來越著迷，這使我更想了解她。 每當我們使用vue時，有些步驟都會相對應的重複，例如創建Vue、建...
在這個單元我們使用官網的教學搭配Vue的框架，STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...
經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後，今天來利用$emit的特性，設計一個有3M便利貼風格的to-do list吧! 實作需求： 新增...
tags: Vuejs 樣式渲染 畫面的呈現有時會因應資料的不同，產生不同的視覺樣式，而通常我們會使用 v-bind 指令動態渲染 HTML attribute...
透過Vue CLI的建立，在我們打開專案後，主要會看到三個資料夾及一部分非資料夾區塊。我們可以先從最主要的src資料夾來看：src資料夾為專案中最重要的一部分。...
Naming components 修改一下Story檔案，對應於Component的Title名稱(default export區塊)，就會發現Sidebar...
元件間的資料傳遞可以說是Vue的大重點之一。在第8天和第9天介紹了由外層父元件傳給子元件，而今天要來說說如何把子元件由內到外進行「事件的單向傳遞」傳給父元件的V...
Fixing ... 若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦ ▶︎ 筆者 github：http...
猶如昨日的期待，我很興奮地按照了Vue的指示： 先到node官網下載，下載完成後，立刻安裝2.打開command line並輸入npm install -g...
Decorators Decorator是一種設計模式，把要被裝飾的Story當做參數，傳入裝飾器中，Decorator可以幫Story加上額外的資訊，賦予給S...
昨天提到props屬性可以將外層元件的資料，傳遞到內層元件。舉的例子是傳入特定的author字串給News元件， 但是一般來說的網頁使用情境，不太可能會把資料寫...
tags: Vuejs computed 與 method 的混淆 在模板中要對資料計算或是轉換時，computed 與 method 往往能替我們做到同樣的事...
除了，computed和filter呢？如果資料改變，是否Vue能快速因應？ Vue：哈！當然有的呀！我們來看看這個範例：Vue：我知道你對健身的熱愛！今天如果...
v-for 就是 JavaScript 裡的迴圈，基於一組資料來製作相同元素區塊。先簡單講一下 JavaScript 裡 for...in 、 for...of...
Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料)，Parameter能提供給不同的addon去做設定。...
昨天鐵人賽提到了component元件是個堆積木的概念，讓我們可以更容易重複使用。結尾也提到了一個問題：在Vue裡面，不同的元件們該如何傳遞資料？ 在我們設置...
Computed Property ✐ 在 computed 中設置的 property 稱為 Computed Property 計算屬性，Computed...
又到了與Vue見面的時候，昨日完成了toDoList後，還想知道Vue有什麼特別的~ Vue：相信你已經開始熟悉Vue的操作，聽你上次說，客戶對於數據上，有很長...
經過了三天的Vue簡單起手式，接著我們要回到Rails專案內實作了。（捲起袖子） 今天來了解一下元件的概念！ 元件component：堆樂高積木的概念 在開發...
Template & Args 同一個元件的多個story function，都會重複的指定相同的Template，可以拉出一個共用 template...
tags: Vuejs Vue template ✐ 還記得前一章節 option 裡的 template 嗎？Vue 提供開發者透過 template 聲明式...
在 JS 中我們是利用 if(condition){statement1}else{statement2} 來設定條件並決定執行哪一段陳述式(statement...
Story檔案放置位置 Component對應的Story檔案，通常會放置在Component檔案旁邊。Story只會用於開發時期，在Production的bu...
昨天我們討論了雙向事件處理: v-model 以及 v-on，讓我們可以跟使用者輸入的資料互動。（例如對使用者的輸入的暱稱打招呼～） 如果要把使用者的輸入資料做...
tags: Vuejs Instance Lifecycle 生命週期 ✐ 介紹完如何使用 new Vue({...}) 建構 Vue instance 後，接...
聽完Vue的介紹後，既然這麼好用，趕緊回到家，利用Vue來練習toDoList：因為框架的原因，寫起來十分得心應手。在代辦事項及完成事項來說，只需要透過v-mo...
以下列出，啟動或是建置 Storybook 時，有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...
tags: Vuejs Vue reactivity system ✐ Vue 引入 data-driven view 的概念，一旦改動 data，與之相對應的...
預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook，若需要變更路徑及名稱，要在Storybook的CLI指令做設定。...
貓貓工程師 / PM Ting
EdwardXiong
lala_lee_jobs
RURU Tseng
Celeste
iThome鐵人賽
看影片追技術