由於現在很多vue項目都是基於ES6開發的,而我學vue的時候大多是看vue官網的API,是基於ES5的,所以對於剛接觸項目的我來說要轉變為項目的模塊化寫法確實有些挑戰。因此,我打算先做一個基於ES5的vue小demo,再把這個demo寫成基於ES6的,算是一個過渡吧!這個demo有一些代碼借用於keepfool大神的《Vue.js——vue-router 60分鍾快速入門》在此先解釋一下,尊重原創!建議vue-rouer的相關知識可以跟着鏈接學習。
一、項目效果圖

二、代碼編寫過程
1.功能一
首先我們要實現的功能一是點擊play按鈕,然后出現下面的Home和About,然后點擊Home和About按鈕分別會出現對應的信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div id="app"> <div class="container"> <div class="jumbotron"> <h1>A Demo!</h1> <p>Let's play a demo</p> <p><a class="btn btn-primary btn-lg" href="#" role="button" v-on:click="show">play</a></p> </div> </div> <div class="container" v-show="isShow"><!--isShow為true則顯示,其實就是控制display的值--> <div class="row"> <div class="col-md-2 col-md-offset-2"> <div class="list-group"> <a class="list-group-item" v-link="{path:'/home'}">Home</a><!--在a元素上使用v-link指令跳轉到指定路徑--> <a class="list-group-item" v-link="{path:'/about'}">About</a> </div> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-body"> <router-view></router-view><!--渲染出匹配的組件--> </div> </div> </div> </div> </div> </div> <template id="home"> <div> <h1>Home</h1> <p>{{msg1}}</p> </div> </template> <template id="about"> <div> <h1>About</h1> <p>{{msg2}}</p> </div> </template> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="vue.min.js"></script><!--版本2.4.0--> <script src="vue-router.js"></script><!--版本2.7.0--> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ isShow: false }, methods:{ show:function(){ this.isShow=true; } } }) var Home=Vue.extend({ //創建組件 template:'#home', data:function(){ return{ msg1:'This is Home page!' } } }) var About=Vue.extend({ template:'#about', data:function(){ return{ msg2:'This is About page!' } } }) var router=new VueRouter(); //創建router router.map({ //映射路由 '/home':{ component:Home }, '/about':{ component:About } }) var App=Vue.extend({}) //啟動路由 router.start(App,'#app') </script> </html>


大概意思就是說matched是未定義的文本,讀取不了,而router.map不是一個函數。為什么會出現這種情況?很簡單,這是因為vue.js和vue-router.js的版本問題。vue router 2.0 沒有map這個方法了,那我們改vue-router.js為0.7.13版本不就好了嗎?為什么還扯到vue.js的版本上了?我們改一下vue-router.js的版本再運行一下看看行不行。

好吧!現在至少有一些效果出來了,但是還是有錯誤,我們來一一解決。現在是component未定義,VueRouter未定義了,這個問題修改一下vue.js的版本就好了,這里我們采用1.0.25的版本,再運行一下試試看。

這次一開始出現的界面是沒有Home和About兩個按鈕的,需要點擊完play按鈕才會出現,這個達到我們的目的,現在的問題是Home和About按鈕還是點擊不了。我們看看控制台怎么說的。
<router-view>標簽和v-link只能在router可用的應用中使用。就是說你當前應用的路由管理尚未生效。使用了 vue-router 就不需要實例化根組件了,route.start 會幫你實例化根組件。new Vue 是不需要的,否則其中的路由標簽不能被識別。我們會源代碼一看,誒!還真的一開始就var vm=new Vue()了。那我們暫且把它刪掉吧!等一下再弄。看看效果怎么樣。我們刪掉v-on,v-show和var vm=new Vue()部分。

ok,可以顯示了,但是play也就沒用了。其實一開始我就陷入了一個誤區,我一直想用v-on和v-show來實現Home和About顯示的這個功能,卻忘了可以用路由實現,不過雖然一波三折,但是在解決問題的過程中,還是讓我這個初學者學到不不少東西。我們現在全部用路由來實現。
2.全路由實現功能一
我們修改一下代碼,如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div id="app"> <div class="container"> <div class="jumbotron"> <h1>A Demo!</h1> <p>Let's play a demo</p> <p><a class="btn btn-primary btn-lg" href="#" role="button" v-link="{path:'/play'}">play</a></p> </div> </div> <router-view></router-view> </div> <template id="play"> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-2"> <div class="list-group"> <a class="list-group-item" v-link="{path:'/play/home'}">Home</a> <a class="list-group-item" v-link="{path:'/play/about'}">About</a> </div> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-body"> <router-view></router-view> </div> </div> </div> </div> </div> </template> <template id="home"> <div> <h1>Home</h1> <p>{{msg1}}</p> </div> </template> <template id="about"> <div> <h1>About</h1> <p>{{msg2}}</p> </div> </template> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="vue.min.js"></script> <script src="vue-router.js"></script> <script type="text/javascript"> var Play=Vue.extend({ template:'#play' }) var Home=Vue.extend({ template:'#home', data:function(){ return{ msg1:'This is Home page!' } } }) var About=Vue.extend({ template:'#about', data:function(){ return{ msg2:'This is About page!' } } }) var router=new VueRouter(); router.map({ '/play':{ component:Play, subRoutes: {//定義子路由 '/home':{ component:Home }, '/about':{ component:About } } } }) var App=Vue.extend({}) router.start(App,'#app') </script> </html>
效果正是我們想要的,點擊play出現Home和About,點擊Home和About出現相應的信息。

我們可以嵌套多個路由,多加一些功能,這樣用ES6來開發這個Demo才更有挑戰性一點。
3.功能進階
我們在Home組件里面增加一個獲取當前日期的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" href="bootstrap.min.css"> </head> <body> <div id="app"> <div class="container"> <div class="jumbotron"> <h1>A Demo!</h1> <p>Let's play a demo</p> <p><a class="btn btn-primary btn-lg" href="#" role="button" v-link="{path:'/play'}">play</a></p> </div> </div> <router-view></router-view> </div> <template id="play"> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-2"> <div class="list-group"> <a class="list-group-item" v-link="{path:'/play/home'}">Home</a> <a class="list-group-item" v-link="{path:'/play/about'}">About</a> </div> </div> <div class="col-md-6"> <div class="panel"> <div class="panel-body"> <router-view></router-view> </div> </div> </div> </div> </div> </template> <template id="home"> <div> <h1>Home</h1> <p>{{msg1}}<a class="btn" v-link="{path:'/play/home/time'}">獲取當前日期</a></p> </div> <router-view></router-view> </template> <template id="time"> <table class="table table-striped"> <tr> <td>年份</td> <td>月份</td> <td>日</td> </tr> <tr v-for="t in dates"> <td>{{t.year}}</td> <td>{{t.month}}</td> <td>{{t.day}}</td> </tr> </table> </template> <template id="about"> <div> <h1>About</h1> <p>{{msg2}}</p> </div> </template> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="vue.min.js"></script> <script src="vue-router.js"></script> <script type="text/javascript"> var Play=Vue.extend({ template:'#play' }) var Home=Vue.extend({ template:'#home', data:function(){ return{ msg1:'This is Home page!' } } }) var Time=Vue.extend({ template:'#time', data:function(){ var D = new Date(); return{ dates:[{ year:D.getFullYear(), month:D.getMonth()+1, day:D.getDate() }] } } }) var About=Vue.extend({ template:'#about', data:function(){ return{ msg2:'This is About page!' } } }) var router=new VueRouter(); router.map({ '/play':{ component:Play, subRoutes: { '/home':{ component:Home, subRoutes:{ '/time':{ component:Time } } }, '/about':{ component:About } } } }) var App=Vue.extend({}) router.start(App,'#app') </script> </html>
效果如下

點擊“獲取當前日期”可以出現下面的表格。
之前我的做法是想在var Time=Vue.extend里面定義methods獲取時間,然后在“獲取當前日期”的<a>標簽里面添加v-on調用函數,但是很遺憾,不是父子組件無法直接溝通!各為高手如果有什么高招歡迎指教。
三、結語
這個基於ES5的vue小demo就先寫到這里,下一篇
《一個基於ES6+webpack的vue小demo》,我們將看看如何用ES6實現這個demo而且把它當做一個項目打包起來。