由于现在很多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而且把它当做一个项目打包起来。

一个基于ES5的vue小demo的更多相关文章

  1. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  2. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  3. 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo

    最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...

  4. 基于BaseAdapter的Listview小Demo

    ListView是android开发中比较常用的控件, 其中适配器模式可以选择: ArrayAdapter:简单易用,通常用于将数组或者List集合的读个包值封装成多个列表项 SimpleAdapte ...

  5. 一个基于netty的websocket聊天demo

    这里,仅仅是一个demo,模拟客户基于浏览器咨询卖家问题的场景,但是,这里的demo中,卖家不是人,是基于netty的程序(我就叫你uglyRobot吧),自动回复了客户问的问题. 项目特点如下: 1 ...

  6. JavaScript ES6和ES5闭包的小demo

    版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子 let conn ...

  7. C# 开源一个基于 yarp 的 API 网关 Demo，支持绑定 Kubernetes Service

    关于 Neting 刚开始的时候是打算使用微软官方的 Yarp 库,实现一个 API 网关,后面发现坑比较多,弄起来比较麻烦,就放弃了.目前写完了查看 Kubernetes Service 信息.创建 ...

  8. 【MVVMLight小记】一.快速搭建一个基于MVVMLight的silverlight小程序

    写了篇MVVM小记http://www.cnblogs.com/whosedream/p/mvvmnote1.html,说好要写点MVVMLight的东西,所以接着写,以便和大家共勉. 我假设你已经有 ...

  9. javaagent笔记及一个基于javassit的应用监控程序demo

    javaagent基本用法 定义入口premain public static void premain(String agentArgs, Instrumentation inst) { Syste ...

随机推荐

  1. 谈谈tableView的重要属性内边距

    全屏穿透效果需要做到两点 tableView的可视范围占据整个父控件(或者屏幕)--设置contentsize滚动范围. 所有的cell都可以被看到,也就是说tableView中的cell不会被导航栏 ...

  2. 谷歌是如何做代码审查的 | 外刊IT评论 - Google Chrome

    谷歌是如何做代码审查的           本文的作者 Mark CC 在上一篇文章中提到过,我已经不在Google工作了.我还没有想清楚应该去哪里-有两三个非常好的工作机会摆在我面前.因为在这段做决 ...

  3. ReactiveSwift源码解析(七) Signal的CombineLatest的代码实现

    本篇博客我们就来聊一下combineLatest()的使用以及具体的实现方式.在之前的<iOS开发之ReactiveCocoa下的MVVM>的博客中我们已经聊过combineLatest( ...

  4. CSS 回流(reflow)

    摘录: 1. 回流 回流是指浏览器为了重新渲染部分或者全部的文档而重新计算文档中元素的位置和几何构造的过程.    因为回流可能导致整个dom树的重新构造,所以会影响性能. 2. display:no ...

  5. Java 9 揭秘（14. HTTP/2 Client API）

    Tips 做一个终身学习的人. 在此章中,主要介绍以下内容: 什么是HTTP/2 Client API 如何创建HTTP客户端 如何使HTTP请求 如何接收HTTP响应 如何创建WebSocket的e ...

  6. HTML5之placeholder属性以及如何更改placeholder属性中文字颜色

    今天在群里看到群友问了一个这样的问题,就是如何更改placeholder属性中文字的颜色,以前用过这属性,却是没更改过颜色,于是便试了试,中途遇到些问题,查找资料后特来总结一下. 熟悉HTML5的人应 ...

  7. SetConsoleScreenBufferSize 函数--设置控制台屏幕缓冲区大小

    SetConsoleScreenBufferSize函数 来源:https://msdn.microsoft.com/en-us/library/windows/desktop/ms686044(v= ...

  8. (转)IntelliJ IDEA 破解方法

    1.下载破解包http://pan.baidu.com/s/1gf9fXx5 2.解压并打开选中的文件 3.如图 4.IDEA选择License Server输入 http://127.0.0.1:1 ...

  9. （转）MyBatis在插入的数据有空值时，可能为空的字段都要设置jdbcType

    1 引言 前面的所有语句中你所见到的都是简单参数的例子,实际上参数是 MyBatis 非常强大的元素,对于简单的做法, 90% 的情况参数都很少,比如: <select id="sel ...

  10. 连接池报错 Proxool Provider unable to load JAXP configurator file: proxool.xml

    上篇博文讲到简易配置 proxool 连接池:http://www.cnblogs.com/linnuo/p/7232380.html 由于把说明注释留在了 proxool.xml 配置文件里导致配置 ...