I (元件拆解,合併,靜態資料引用) | Vue 切版
我們從設計師那邊拿到一份完整HTML的切版(怎麼可能!)完整HTML的切版(bootstrapexamplejumbotron)[1]今天目標:將此頁面移植到vue裡面。CSS,image載入(要放哪?)新增routerpath將此頁面,拆解成3個以上的component並重新組合。component拆解引用component元件化在vue官網網站上可以看到這張很清楚的圖這說明:每一塊component都是獨立的,根據需求,來載入相對應的元件,進而組合成一個container也可以稱為page。每一頁page都會需要不同的component可是一個網站有需多page,因此這時候就會有重複的component出現,如果我們在開發網站的...
我們從設計師那邊拿到一份完整 HTML 的切版 (怎麼可能!)
完整 HTML 的切版 (bootstrap example jumbotron)[1]
今天目標: 將此頁面移植到 vue 裡面。 CSS, image 載入 (要放哪?) 新增 router path 將此頁面,拆解成 3 個以上的 component 並重新組合。 component 拆解 引用 component 元件化在 vue 官網網站上可以看到這張很清楚的圖
這說明:每一塊 component 都是獨立的,根據需求,來載入相對應的元件,進而組合成一個 container 也可以稱為 page。
每一頁 page 都會需要不同的 component 可是一個網站有需多 page,因此這時候就會有重複的 component 出現,如果我們在開發網站的時候可以任意地把這些 component 隨意組裝就像在玩 樂高積木一樣,而不是複製貼上重複的 code,如此我們在維護的時候只要改掉最初 component 本身,而所有引用的 page 都會連動修改,這樣是不是很棒呢。
container 或 page 只是定義,實際上 vue 本身沒有這種單位,全部都是 component 只是它引用了其他的 component 並組合成一個完整頁面。
component使用 vue-cli(vue-loader) 練習的我們,其實已經在寫 component 了!
之前寫的小範例:
在定義上這些是 page 它們已經是獨立可以呈現的頁面。
如果今天有一個需求,要我們要在 CtoF 的頁面上,顯示 Hello Page 上面的一小塊功能,這塊功能就可以包裝出去,變成一個小小的 component 只負責這個功能,需要的 page 請引用它。
最簡單的 CSS 引用初始學習 vue 提供一個簡單的載入 CSS 辦法,在 src 同層,新增一個 folder 命名為 static(必須)在這邊放入靜態檔案: CSS 等...