Now many vue projects are developed based on ES6, and most of my learning vue is based on the API of vue official website, which is based on ES5, so it is a challenge for me to change to the modular writing of the project. Therefore, I intend to make a vue demo based on ES5 first, and then write this demo based on ES6, which is a transition bar! This demo has some code borrowed from the keepfool God "Vue.js - 60 Minutes Quick Start for vue-router" Explain this first, respect the originality! It is suggested that the knowledge of vue-rouer can be learned by linking.
I. Project Effect Map
2. Coding process
1. Function I
First, we need to achieve the function of clicking the play button, then the following Home and Abot appear, and then click the Home and Abot buttons will appear corresponding information.
Is there any problem with this code? Crap<!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 by true It shows that, in fact, it is control. display Value--> <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><!--stay a Use of elements v-link Instruction jump to specified path--> <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><!--Render matching components--> </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><!--Version 2.4.0--> <script src="vue-router.js"></script><!--Version 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({ //Create Components 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(); //Establish router router.map({ //Mapping Routing '/home':{ component:Home }, '/about':{ component:About } }) var App=Vue.extend({}) //Start Routing router.start(App,'#app') </script> </html>
Ninety-nine times out of ten are questionable. Let's run it and see what the console says.
That is, matched is undefined text that cannot be read, and router.map is not a function. Why does this happen? Simply because of the version problems of vue.js and vue-router.js. There is no map in vue router 2.0, so why don't we change vue-router.js to 0.7.13? Why are we still talking about the version of vue. js? Let's change the version of vue-router.js and run it again to see if it works.
OK Now at least some effects have come out, but there are still some mistakes. Let's solve them one by one. Now that component is undefined and VueRouter is undefined, it's good to modify the version of vue.js. Here we use version 1.0.25 and run it again.
At the beginning of this time, there are no Home and Abot buttons in the interface. We need to click the play button before it appears. To achieve our goal, the question is whether the Home and Abot buttons can not be clicked. Let's see what the console says.
The < router-view > tag and v-link can only be used in router-usable applications. That is to say, the routing management of your current application has not yet taken effect. With vue-router, you don't need to instantiate the root component, route.start will help you instantiate the root component. New Vue is not needed, otherwise the routing label in it cannot be recognized. We will look at the source code, eh! It really started with var vm=new Vue(). Let's delete it for the time being. Wait a minute. See how it works. We delete the v-on, v-show and var vm=new Vue().
ok, you can show it, but play is useless. In fact, I fell into a misunderstanding at the beginning. I always wanted to use v-on and v-show to realize the function of Home and Abot display, but I forgot to use routing to realize it. However, despite the twists and turns, in the process of solving the problem, I still let this beginner learn a lot. We now all use routing.
2. Full Routing Implementation Function 1
Let's modify the code as follows
<!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: {//Define subrouting '/home':{ component:Home }, '/about':{ component:About } } } }) var App=Vue.extend({}) router.start(App,'#app') </script> </html>
The effect is exactly what we want, click play to appear Home and Abot, click Home and Abot to appear the corresponding information.
We can nest multiple routes and add more functions, so developing this Demo with ES6 is a bit more challenging.
3. Functional Advancement
We added a function to the Home component to get the current date
<!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'}">Get the current date</a></p> </div> <router-view></router-view> </template> <template id="time"> <table class="table table-striped"> <tr> <td>Particular year</td> <td>Month</td> <td>day</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>
The effect is as follows
Click "Get the Current Date" to display the table below.
My previous approach was to define the method fetch time in var Time=Vue.extend, and then add the v-on call function in the < a > tag of "Get the current date", but unfortunately, not the parent-child component can not communicate directly! Every master is welcome to give advice if he has any good tactics.
III. CONCLUSION
This ES5-based vue demo is written here, next article "A vue demo based on ES6+webpack" We'll see how to implement this demo with ES6 and package it as a project.