【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;
}

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

#Web






留言討論