問題 clas 做了 設置 new scope 文件的 log target

請先完成了項目初始化，具體請看我另一篇博文。vue項目初始化

看一下完成的效果圖，很典型的單頁應用。

.vue後綴名的單文件組件

這裏先說一下我對組件的理解。組件，顧名思義就是一組元素組成的一個原件（理解的比較淺顯、直白），在Vue.js中，表現為一個自定義元素。開篇展示的圖中，首頁的的列表中的每一項就可以看成一個組件（事實上，在demo中，我也是這麽做的），這個組件由一張圖片，一個顯示價格的元素，一個顯示名稱的元素組成，我就可以先把它定義為一個list組件。 首先，我們先來分析一下兩個頁面中組件，如下圖 主頁可以看做由兩個組件組成，homeHeader和list組件，而詳情頁則可以看成是有detailHeader跟下邊的圖文內容組成。 讓我們分析一下.vue文件的組成

template

template是放置組件的組成部分——html元素的地方，是整個組件的模板構成，會在另一個引用這個文件的組件中顯示出來。

style

style下放置組件的樣式，可以用css預處理器less或者sass等，前提是需要安裝這些依賴包，和設置lang屬性，博主比較懶，直接用css了。這個style裏的樣式表在項目運行的時候會生成一個style標簽，插入到index.html的head標簽裏，如果組件裏的style標簽為空，則會在index.html的head裏插入一個空的style標簽，所以，建議大家，這個組件沒有用到css，就不要寫一個空的style，直接省略就好。 既然每個組件的樣式都會生成一個style插入到index.html中，我們做的又是單頁面應用，所有的代碼都基於index.html的，那如果我們的項目比較大或者是多人協作開發的，難免會在寫組件的時候會命名相同的class，這樣的話，具有相同class的不同組件的樣式就會收到影響，產生不可預估的樣式問題，那豈不是很頭疼。其實，vue早就替我想到了這個問題，可以給style設置一個scoped的屬性，意思是該style裏的樣式只對這個組件起作用，不會影響其他組件中含有相同class的元素。

script

script裏自然是放的js代碼。這裏會用到一些ES6的語法，大家可以去 這裏 學習ES6的一些新的語法特性。在List.vue的script中，大致意思就是導出一個對象（這個組件），其中設置可以通過屬性price和title傳遞數據。看下邊的示意圖

vue-router 2.0

由於用vue主要開發單頁面應用，沒有頁面之間的跳轉，在vue中，一個所謂的“頁面”實則是一個看起來很像“頁面”的一個組件（這個組件大部分情況下包含其他子組件）而已。既然沒有頁面，那怎樣實現頁面之間的切換呢？那就是我們現在要介紹的主角——vue-router 2.0。 vue-router是在vue中控制路由的。ps：如果你不太理解路由這個概念，可以簡單的理解為url重的hash部分，只不過vue做了一些封裝和完善。要控制路由，還需要借助兩個vue-router自帶的兩個組件router-view和router-link。

router-view

router-view是現實路由內容的地方，即如果有多個“頁面”需要切換，顯示當前“頁面“的地方。需要註意的是，使用vue-router控制路由則必須router-view作為容器。

router-link

router-link有一個to屬性，其屬性值是目標路由，在運行項目的時候，router-link表現為a標簽，to屬性則表現為a標簽的href屬性。

這一篇是對vue-router的簡單介紹，從下篇開始將實際編碼。

附上完整項目代碼github傳送門

vue-router單頁應用簡單示例（一）