storybook 版本升級 如果有看上一篇的話，會發現上一篇的範例用的是 storybook 3.4.10。因為重新用 webpack4 建立了 Nuxt 2...
Storybook 簡介 官方 Demo Storybook 方便我們開發 UI 元件，使用 storybook 可以看到 UI 元件在不同狀態下的樣貌。 另外...
這篇稍微介紹一下 nuxt.js 的設定檔： nuxt.config.js。 可以將以下專案 clone 下來，了解一下基本目錄結構。 github repos...
上一篇，在不知道 Nuxt 是什麼的情況下，使用create-nuxt-app建立了一個 Nuxt 應用。 今年 9/21 在倫敦舉辦的 Vue Confere...
上次做了簡易的購物清單這次來挑戰這個購物網站，還有很多還沒做好，但是想維持記錄學習 這次模仿的網站網址Andenhud HTML的架構 <div id=&...
嗨！讓我抓住禮拜天的尾巴，繼續研究Vue.js吧XD，之後就要分心處理React了，那廢話不多說，分隔線下進入正文！ 對父級做事件處理 首先提一下關於組件的事...
Hello！大家好！前幾天突然看到鐵人賽在十月開始，實在來的太快，讓小弟我感到非常錯愕XD，去年因為害怕所以沒有參加，但那時候也立志了今年要參加的決心！所以之後...
Hello！大家好！Part1篇在這裡，今天讓我們繼續事件修飾符的Part2篇(簡單迅速切入正文，因為時間有點晚了XD)！ 首先登板的是.once！ 1. ....
HI！其實第一篇已經簡單介紹過事件綁定了，但是我看他官方文件上面好像還有很多可以講，就在這裡把他獨立出來了XD 再講新的之前先複習一下之前學過的綁定方式：HT...
嗨！大家好！最近都維持著兩三天就一篇文章的頻率，說實在有點累人XD，不過年底就要到了很多事情都還沒有一個著落，突然覺得有點著急，才想說加緊個腳步 昨天我們說了c...
嗨啊！今天台南終於放晴了，那麼好的天氣，就輕鬆打個文章吧XD，內容來說說如何使用Vue.js來操作class屬性。 class 不就用v-bind綁定clas...
HI！大家好啊！緊接著computed之後，今天再來學習新的Vue.js的屬性watch吧！ watch 這是什麼？ 如果我們要在一個表單上的值發生改變的時候...
Front-end Engineer (Junior/Senior) [50000 ~ 100000 ~ /per month] 依經驗決定薪資 ::熱愛前端工...
嗨啊！大家好！經過昨天耍了一天廢後，今天繼續闖蕩Vue世界吧！ 孔子說「溫故而知新」所以在進入正文之前我們先簡單複習一下資料綁定，看能不能因此獲得新的知識XDH...
HI！記得我們在第一篇的時候有提過如何將Vue.js的資料綁定到View上面嗎？如果忘記的話可以看一下以下最簡單的範例：HTML <input id=&q...
終於輪到迴圈了(其實也才剛開始三篇而已XD)！說到迴圈大家一定不陌生，除了最初的起點Hello!world!以外，應該就是九九乘法表了，那當迴圈融入前端框架時，...
前陣子和朋友在書局逛街的時候，他問了一句話：「欸！你都是怎麼重頭學習一個新技術的啊？」在記憶裡，我是這樣回答的：「很簡單啊，做就對了！」 沒錯！ 就是這樣子...
其實這次標題有點騙人，因為對小弟來說也不算第一次接觸了，但也只是前幾天讀過官方文件的等級而已，所以如果有些地方解釋的不對，還請各位大大留言告訴我了，在此小弟感激...
使用filter過濾器 const app = new Vue({ el: "#app", data: { friends:...
Vue.js devtools Vue.js devtools 是一個在開發時很實用的 Chrome 套件，我們可以在裡面檢查組件的資料，也可以查看 Vuex...
前言 使用 Vuex 時我們一定會想到説可以應用在帳號登入，紀錄一些使用者的資訊，這邊我們來試著做一個帳號登入的功能。 Login Page 首先建立一個登入...
Watch 使用 watch 是用來監控指定的資料變化時，觸發相對應的行為，要監控一般的參數很簡單，但是要監控物件裡面的屬性呢？以下是解決的方式： expor...
module 由於購物車與商品各自有許多不同的函數，為了未來維護上方便，我們將其拆成獨立的檔案，這樣在 store 中就不會一次出現很長一串的程式碼，這裡我們以...
前言 前面我們已經把 Vuex 的特性都解說完畢，應該對 Vuex 有初步的了解，但是如果沒有實作我們還是沒有辦法很熟悉，官方這邊提供了一個購物車的範例，我們就...
表單處理 當在嚴格模式中使用 Vuex 時，state 使用在 v-model 時會遇到問題： <input v-model="obj.mes...
嚴格模式 Strict Mode 開啟嚴格模式只需要在建立 store 時傳入 strict: true 。 const store = new Vuex.S...
插件（Plugin） Vuex 的 store 接受 plugins 選項，這個選項露出每個 mutation 的鉤子 (hook)， Vuex 插件就是一個函...
Actions Actions 類似於 mutations，但仍然有些不同： Action 提交（commit）的是 mutations ，而不是直接變更 s...
Mutations 提交 mutations 是改變 Vuex 中 store 的唯一方式。 mutations 非常類似於組件中的事件（event），每個 m...
合併使用 我們在實際開發時， computed 內容並不會像前兩章的範例那樣簡單，有時我們需要將本地組件的 computed 或是 mapState 與 map...
HunterLiu
Nomi Su
iThome鐵人賽
看影片追技術