v-for把陣列轉換為一組元素將item拿出來當作屬性自訂所需資料在陣列裡，使用動態屬性分別套入不同顏色(css設定)資料匯入的過程新增一組判斷式，當key值為A則顯示紅色，B則顯示藍色，利用動態屬性更改色系這裡與之前案例的內容相同，也是使用:class綁定屬性的顏色(經由css修改)
Vue_ 統整判斷式
v-show
v-if是讓程式判斷是否被render出來
v-show是用css控制是否在畫面中顯示(意即套用display: none)，所以該元素在原始碼中有被render出來，只是不在畫面顯示
可以搭配v-if使用，代表裡面的東西是否render出來;但是不能用v-show，因為本身並非一個元素，只是一個模板，無法被顯示處理
ES6_let、const變數
ES6的變異總體而言，使用 let 與 const 的變數宣告方式，相較於 var 會更為嚴謹，因此建議在開發 ES6 之後的專案，使用let 與 const 作為變數宣吿，除了讓專案更穩定之外，也可以增加程式碼的可讀性。
Webpack_建置工具
介紹建置工具過去：早期前端工程師寫網頁，僅透過前端三大元素「JavaScript、CSS、HTML」開發web應用。
現今：近年前端發展出許多新思維，出現了「模組化」的概念、「新框架」的出現、「新語言」的誕生，讓傳統的作法不再流行，各種可以加強開發效率的新工具出現。
Vue_ 解析Props、 emit
vue 組件，會使用 props 來接受上層傳來的資料。props 是一個陣列，裡面包含多個字串。將原本在底下新增的元件移置到新的vue頁面上，原本的執行方式是在html裡頭加上的元件，就能顯示出新vue上的功能，而要顯示此功能就需要進行串接的動作，在新的vue元件裡，需要先命名一變數，當主頁面或其他頁面要使用此元件時，只需要完成變數間串接便可使用
Vue_ 元件Component
定義Vue 應用程式的使用，主要是以 Vue component 元件 所組成，而最上層是以 Root 為主，下面包含 Header, Content 與 side （不同的 component ）。而每個 Component 當中的 data 都會是互相獨立的，使用前端框架的好處在於，很多時候同樣重複的事情，你只需要做一次，就能重複使用，並且在後面的維護上更為方便。
Vue_ MVVM架構說明
MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View 和View Model 的雙向數據綁定，這使得View Model的狀態改變可以自動傳遞給View，這就是所謂的數據雙向綁定。注意Vue非MVVM框架，但MVVM概念影響Vue.js的運作。