【Day05】實戰開始 - 區塊分割

在進入今天的內容前，推薦大家一個可以下載icon的網站，https://www.flaticon.com/
這網站大部分icon是免費的，有些需要付費。

讓我們繼續昨天的進度。

我們昨天已經建立了左邊菜單的模板，再來必須要建立更多小組件，先在Components資料夾裡建立Home、WorkExperience、ProjectExperience、PortfolioPhoto的vue模板，並在下方透過changeView這個function引入對應模板。
但要如何透過JavaScript來切換頁面呢?

我們可以在vue裡的屬性Method裡撰寫function，methods內的函式和普通的函式沒有區別，在methods內的函式執行的時候，才能Trigger，我們透過changeView這個函式，讓前端在點擊不同tab時，呼叫對應的模板。
並讓currentTab預設為Home.vue這個模板。
而透過元件（Component），我們引入昨天所建立的模板。順帶一提，元件（Component）是 Vue.js 最强大的功能之一。组件可以擴展 HTML 元素，封装可reuse的程式碼。元件系统可以用獨立可複用的小组件来構建大型的應用程式，這也是為甚麼要把頁面切分為不同的元件了，都是因為方便做重複使用。
引入模板後，在data裡進行綁定。

export default {
      data(){
        return{
           currentTab:Home,
           Home:Home,
           WorkExperience:WorkExperience,
           ProjectExperience:ProjectExperience,
           Photo:Photo,
           Portfolio:Portfolio
         }
      },

       methods:{
        changeView: function(viewName) {
          this.currentTab = viewName
        }
      },
      components: {
        Home:{ template: Home},
        WorkExperience:{ template: WorkExperience},
        ProjectExperience:{template: ProjectExperience},
        Photo:{template:Photo},
        Portfolio:{template: Portfolio}
      },
};

讓我們來看看效果吧~

這樣就完成了頁面的切換了，有沒有發現當我的滑鼠在點擊時，tab的顏色變了呢?
那是因為我對menu裡的li標籤設定了hover這個屬性。

.menu ul li:hover {
    background-color: #666666;
    color:#FFFFFF;
}

以上便是簡單的切版練習，但你也許會有疑惑，同樣的頁面，如果用手機開的話，仍會有同樣的版面嗎?
答案是，當然會跑版囉，但要怎麼做，我們明天繼續囉。