由于现在很多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. MySQL 'localhost' (10061)解决方法

    今天启动mysql 出现10061错误,处理:修改hosts文件中localhost指向127.0.0.1. 参看:http://www.cnblogs.com/ljian/archive/2011/ ...

  2. lvs讲解

    作者写的就是好呀,简单明了,安逸的我也不知道早点看看,非得等到找工作了,在这里临时抱佛脚,以后再过来添加我自己的总结 http://www.linuxvirtualserver.org/zh/

  3. XML文件的创建和解析笔记

    解析XML的四种方法 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这 ...

  4. JavaScript中闭包实现的私有属性的getter()和setter()方法

    注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  5. 使用 electron 实现类似新版 QQ 的登录界面效果（阴影、背景动画、窗体3D翻转）

    上文<使用 VS2017 和 js 进行桌面程序开发 - electron 之 Hello Word>介绍了如何使用 VS2017 开发 electron 桌面程序,今天来点有看头的,但是 ...

  6. select默认选中项颜色为灰色，选择后变为黑色（js实现）

    <script> var unSelected = "#999"; var selected = "#333"; $(function () { $ ...

  7. 20170709_python_学习记录

    a='ABC';变量赋值时发生了什么 1.在内存中创建一个字符串'ABC' 2.在内存中创建一个变量a指向字符串'ABC' list [] 相当于数组 指向可以变动 str[1,2,3,4] str. ...

  8. 运行shell脚本时报错"[[ : not found"解决方法

    问题描述 在运行shell脚本时报错,命令为: sh test.sh 报错如图: 脚本代码如下: #!/bin/bash # file:test.sh # author:13 # date:2017- ...

  9. Hadoop的配置过程（虚拟机中的伪分布模式）

    1引言 hadoop如今已经成为大数据处理中不可缺少的关键技术,在如今大数据爆炸的时代,hadoop给我们处理海量数据提供了强有力的技术支撑.因此,了解hadoop的原理与应用方法是必要的技术知识. ...

  10. innodb关键特性之double write

    # 脏页刷盘的风险 两次写的原理机制 1.解决问题 2.使用场景 3.doublewrite的工作流程 4.崩溃恢复 # doublewrite的副作用 1.监控doublewrite负载 2.关闭d ...