Vue.js 2.0從入門到放棄-入門實例（二）
前面一篇《Vue.js2.0從入門到放棄---入門實例（一）》介紹了從零開始準備Vue.js所需的一些環境和工具。這片博客就來跟大家探討一下Vue.js 2.0中的一些特性，以及一個小實例，通過實例來跟大家分享，想必更容易理解。
先來看一下，看完這篇博客，你會做出什麼樣的效果吧。
就是這樣的一個小的demo，其中主要用到了vue-router 2.0 和vue的單文件組件，這裡再細分一下如下：
vue-router 2.0 定義路由配置
router-view 和 router-link 來控制路由
transition 控制頁面之間的跳轉動畫
.vue後綴名的單文件組件
簡單的ES6語法
修改項目目錄結構
先來看一下項目的機構，我在原項目目錄結構上稍作調整，讓目錄結構更清晰一些。如下圖
在 src 目錄下，刪除 App.vue ，增加 pages 文件夾，該文件夾用來用來放置我們創建的「頁面」（比如，Home.vue）。其實，這裡說的「頁面」也是組件，只是它變現為一個「頁面」而已，跟components 目錄下的組件沒有本質的區別，我們分開目錄放置主要是更語義化，結構更清晰易懂。
可能有的剛接觸的同學還不太了解組件（.vue後綴結尾的文件），不要著急，接著往下看。
.vue後綴名的單文件組件
這裡先說一下我對組件的理解。組件，顧名思義就是一組元素組成的一個原件（理解的比較淺顯、直白），在Vue.js中，表現為一個自定義元素。
開篇展示的圖中，首頁的的列表中的每一項就可以看成一個組件（事實上，在demo中，我也是這麼做的），這個組件由一張圖片，一個顯示價格的元素，一個顯示名稱的元素組成，我就可以先把它定義為一個list組件。
首先，我們先來分析一下兩個頁面中組件，如下圖
主頁可以看做由兩個組件組成，homeHeader和list組件，而詳情頁則可以看成是有detailHeader跟下邊的圖文內容組成（這裡的圖文內容也可以寫成組件，但是博主這裡想偷懶一下，有興趣的，可以自己試著寫成組件）。
分析完兩個頁面的組件構成之後，我們修改項目目錄如下
這樣的目錄結構，就一目了然了吧。兩個頁面，Home和detail和其中用到的三個組件。ps：assets目錄下新建的img目錄，裡邊放的一張圖片是測試用的。
做了這麼一大堆鋪墊，現在來簡單說一說單文件組件.vue文件。拿List.vue為例，說說單文件組件的結構，如下圖
單文件組件，由三大部分組成，template、style、script，想必看到這三個標籤元素，大家也都對其作用大概了解了吧。
template
template是放置組件的組成部分——html元素的地方，是整個組件的模板構成。不過有一點需要特別注意，template下只能存在一個根html元素作為wrapper，不能存在兩個並列的跟元素，否則會報錯。
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的元素。那vue是怎麼做到的呢？這裡先賣個關子，後邊再探究竟。
script
script里自然是放的js代碼。這裡會用到一些ES6的語法，大家可以去這裡(http://es6.ruanyifeng.com/)學習ES6的一些新的語法特性。在List.vue的script中，大致意思就是導出一個對象（這個組件），其中設置可以通過屬性price和title傳遞數據。看下邊的示意圖
具體的怎樣利用props傳遞數據，請看這裡(https://vuefe.cn/guide/components.html#使用Props傳遞數據)。
.vue單文件組件的三大組成部分大概就是這些，具體的內容，主要是script，整個組件的功能代碼全在這裡邊，大家還要多去學習和了解，由於在下才疏學淺，也只能介紹這些了。
vue-router 2.0
由於用vue主要開發單頁面應用，沒有頁面之間的跳轉，在vue中，一個所謂的「頁面」實則是一個看起來很像「頁面」的一個組件（這個組件大部分情況下包含其他子組件）而已。既然沒有頁面，那怎樣實現頁面之間的切換呢？那就是我們現在要介紹的主角——vue-router 2.0。
vue-router是在vue中控制路由的。ps：如果你不太理解路由這個概念，可以簡單的理解為url重的hash部分，只不過vue做了一些封裝和完善。要控制路由，還需要藉助兩個vue-router自帶的兩個組件router-view和router-link。
安裝vue-router 2.0
打開命令行，cd到當前項目的目錄，運行cnpm install vue-router --save，f等待安裝完成即可。
router-view
router-view是現實路由內容的地方，即如果有多個「頁面」需要切換，顯示當前「頁面「的地方。需要注意的是，使用vue-router控制路由則必須router-view作為容器。
router-view還可以嵌套，即嵌套路由，詳情去這裡學習喲~
router-link
router-link有一個to屬性，其屬性值是目標路由，在運行項目的時候，router-link表現為a標籤，to屬性則表現為a標籤的href屬性。至於，為什麼不直接用a標籤，我也不知道呢。如果你知道的話，可以留言告訴我，不勝感激的呢~
這是List組件中用到的router-link組件。
基本的概念和準備工作都做好了，剩下的就是貼代碼了，瞬間感覺輕鬆好多。
修改根目錄下的index.html如下：
其中 transition組件是用來控制頁面切換的動畫用的，transitionName綁定到的是main.js中的data中的transitionName欄位。
修改src目錄下的main.js如下：
// main.js
// 導入Vue，這個是必需的，
在使用Vue之前，必須先導入
import Vue from "vue"
// 導入 vue-router，並使用
import VueRouter from "vue-router" Vue.use(VueRouter)
// 導入 pages 下的 Home.vue
import Home from "./pages/Home" import Detail from "./pages/Detail"
// 定義路由配置 const routes = [
{
path: "/",
component: Home
},
{
path: "/detail",
component: Detail
} ]
// 創建路由實例 const router = new VueRouter({
routes })
// 創建 Vue 實例 new Vue({
el: "#app",
data(){
return {
transitionName: "slide"
}
},
router, // 在vue實例配置中，用router
watch: {
// 監視路由，
參數為要目標路由和當前頁面的路由
"$route" (to, from){
// 官方給出的例子為
由於現在只有兩個路由路徑"/"和"/detail"
// 按照官方給的例子，
這兩個路由路徑深度都為 2 ，所以，
這裡稍作調整，不知道有什麼不妥
// 但目前在這個demo中能正常運行，如果知道更好的方法，
歡迎留言賜教
this.transitionName = toDepth
// 根據路由深度，
來判斷是該從右側進入還是該從左側進入
}
} })
HomeHeader.vue代碼
主頁
List.vue代碼
{{ title }}
￥{{ price }}元
DetailHeader.vue代碼
id="header_btn_nav"
class="header_btn header_btn_back"
v-on:click="goBack"
>返回
詳情
Home.vue代碼
v-for="item in items"
:price="item.price"
:title="item.title">
Detail.vue代碼
崇賢館始置唐代太宗朝。1999年，
李克先生及志同道合者復興其宗旨。
以積累、傳播中華優秀傳統文化，
提供全新國學體驗館為宏願。
其間，在季羨林、馮其庸等國學大師及著名
文史學家傅璇琮、毛佩琦先生指導下，
耕注先賢原典，
以宣紙線裝精品形式呈奉世人。
作為一家國學傳播機構，崇賢館始終致力
於中華傳統文化的傳承和推廣，
以古籍線裝宣紙書的形式，
對浩繁的史海巨著進行經典復刻。
不僅如此，崇賢館還延請了傅璇琮、
毛佩奇等諸位在國學界內享
有盛譽的專家和學者擔綱學術顧問，
以精益求精的治學態度面對每一部崇賢館的作品，
使之成為學術史中無尚的精品。
最後，差點忘了，style的scoped屬性的問題。現在，我們把List.vue中的style加上scoped屬性，然後在命令行cd到項目目錄，運行 npm run dev ，在瀏覽器訪問localhost:8080，然後審查列表標籤，會發現在列表標籤中多了一個自定義屬性，如下：
相應的css選擇器也成了複合選擇器，在原有選擇器基礎上複合了一個屬性選擇器，so~~這就是style scoped的奧秘之處。
這下應該沒有什麼遺漏了吧，好累，心好累~~~
哦，對了，如果用sublime開發，建議安裝vue的插件，支持語法高亮喲~
應有些朋友的需求，把項目源碼託管到github上，項目網址 https://github.com/Angewell/firstVue。
Frontender -
持續關注互聯網、web前端開發、IT編程資料分享。
其它功能正在完善，不定期更新....
點贊和分享是對我們最大的支持
TAG:郭旗美工 |