在進入今天的內容前,推薦大家一個可以下載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;
}
以上便是簡單的切版練習,但你也許會有疑惑,同樣的頁面,如果用手機開的話,仍會有同樣的版面嗎?
答案是,當然會跑版囉,但要怎麼做,我們明天繼續囉。