記得上 Github 拉專案來自己玩玩看: https://github.com/MOSapeizer/vue-ecommerce也可以發 pull reque...
我們將購物車分兩個主要頁面來寫：商品頁面與購物車頁面，這天我們先寫商品頁面。 前置作業：Vuex安裝、引入專案與新增Vuex需要的檔案 Vuex安裝 記得路...
前一篇我們提到Vuex是將所有元件的**「狀態」全部集中儲存管理，那麼這個「狀態」**指的到底是什麼呢？ 這個「狀態」會區分成對元件的**「元件局部狀態」(Co...
總結 連續三十天，一起床想到的就是發文，一到辦公室坐下露天廢物們就會"關心"逼問彼此發文了沒，一度差點忘了發文險些斷賽。 自己寫過才知道，...
前言 加入購物車的按鈕要怎麼寫測試？要用到 vuex 嗎？如果用的話，actions, state, mutations 要怎麼測？每次開發總是想得太遠，做得太...
前面分別介紹完Vue的directives、options跟components後，從這天開始，我們開始要將我們備好的材料開始煮出一道道好菜了。 前面我們有提到...
上一篇的slot可以應用來把整個頁面分好三個section：navbar、main、footer，那如果我們要在main畫面上做tab來切換畫面呢？類似下圖的感...
我的測試原則 基本上就是幫自己訂目標首先我會列幾個適中的目標直接實作然後想想這個目標有沒有漏洞的可能後再補上幾個修補漏洞的測試 正文 OK來開始吧，身為一個產品...
Vue的元件化系統，讓開發者在開發上可以很好維護，主要是因為元件都有各自的用途與模板，而上一篇也介紹過元件之間要如何去做組合溝通，那如果一個網站要放入很多的元件...
雖然每個元件是獨立運作，但Vue設計元件的目的是為了讓每個元件都有各自的用途，然後再互相配合使用，如此一來，系統開發上也比較結構化。 比較常見的組合元件為父子元...
前面這幾天已經把Vue.js的基本功能大概都介紹完了，但別忘了Vue.js最強大的功能之一：元件(component)，讓我們恢復一下記憶，當vue const...
在做事件處理的時候，當事件被觸發，資料異動了，通常這時候我們會需要監聽器去聽到觸發事件的啟動並去呼叫對應的處理器，並讓它做事情。 今天我們將介紹Vue在做事件處...
圖片來源 延續之前的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...
常常我們想要對資料做處理的時候，會寫一些function去跑，然後顯示出想要的結果，而為了讓模板(View)可以專注在顯示資料，Vue有設計兩個選項物件屬性，f...
HAPPY NEW YEAR!!!為自己2018年許個新年新希望吧～ 這篇將介紹幾個還沒介紹的指令，都有各自的用途，使用時機因人而異。 其他指令 以下介紹這三個...
圖片來源 延續之前的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...
上一篇了解Vue的循環指令後，這篇我們將介紹也是寫程式時常用的：條件判斷，Vue一樣提供一些指令可以來做條件渲染(Conditional Rendering)，...
圖片來源 延續昨天的主題 Vuetify 中用到的技術大方向有： vue-router vuex vue-server-renderer webpack e...
圖片來源 Vuetify 簡介 Vuetify 是一個語意化元件的前端框架，提供簡潔、直觀、易於重複使用的元件，使 Vue 的開發者可以輕鬆解決前端的問題。...
我們看到的網頁，了解使用者對UI元件的操作，不會只有是在表單元素內輸入或選擇內容，還有點擊按鈕或送出表單等等DOM事件，而事件的觸發會造成資料的異動，為了得知資...
Watch 使用 watch 是用來監控指定的資料變化時，觸發相對應的行為，要監控一般的參數很簡單，但是要監控物件裡面的屬性呢？以下是解決的方式： expor...
module 由於購物車與商品各自有許多不同的函數，為了未來維護上方便，我們將其拆成獨立的檔案，這樣在 store 中就不會一次出現很長一串的程式碼，這裡我們以...
在 Vue 的 Component 中還有個好用的東西叫做 slot，當開發複雜或巢狀的 component 時，slot 不僅好用更增加了使用上的彈性。 基...
前一篇介紹的指令可以將資料與vue instance之間做綁定，那假設我們想讓HTML元素中的屬性和vue instance做綁定，Vue有提供一個指令v-bi...
Vue.extend(options) 使用 Vue 的建構子，創建一個子類別，參數是一個包含 Component 選項的物件。 其中選項 data 在 Vu...
推薦好用的工具：Vue.js devtools 這篇介紹開始之前，最近發現一個開發vue時還不錯用的chrome插件，想推薦大家使用，這個插件是Vue.js d...
在大致了解以webpack樣板建置的專案架構後，我們接下來來了解整個app運作流程。 當我們下npm run dev這個指令後，啟動http server，這個...
prop簡介 Component有一個獨立的作用域(isolated scope)，使用Component主要是希望程式碼不會互相影響，而當需要讓父層級(par...
這篇的內容可能跟 Vue 沒甚麼主要關係，只是會透過 Lodash.js 來解決深拷貝的問題。 會寫這篇是因為，最近在公司做的專案需要用到深拷貝，且需要深拷貝...
專案整體架構 當我們使用webpack樣板初始化一個完整的vue專案，該專案資料夾內基本架構如下圖： static資料夾內存放的是“真正的”靜態資源，他們不...
Mos
Syuanhahaha
HunterLiu
Nomi Su
Eric
iThome鐵人賽
看影片追技術