一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的，而我学vue的时候大多是看vue官网的API，是基于ES5的，所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战。因此，我打算先做一个基于ES5的vue小demo，再把这个demo写成基于ES6的，算是一个过渡吧！这个demo有一些代码借用于keepfool大神的《Vue.js——vue-router 60分钟快速入门》在此先解释一下，尊重原创！建议vue-rouer的相关知识可以跟着链接学习。
一、项目效果图
二、代码编写过程
1.功能一
<!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>
这段代码这么写有没有问题？废话
这么问十有八九是有问题的。我们来运行一下，然后看看控制台说些什么。
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>
3.功能进阶
<!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>
三、结语
一个基于ES5的vue小demo的更多相关文章
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- 聊聊UDP、TCP和实现一个简单的JAVA UDP小Demo
最近真的比较忙,很久就想写了,可是一直苦于写点什么,今天脑袋灵光一闪,觉得自己再UDP方面还有些不了解的地方,所以要给自己扫盲. 好了,咱们进入今天的主题,先列一下提纲: 1. UDP是什么,UDP适 ...
- 基于BaseAdapter的Listview小Demo
ListView是android开发中比较常用的控件, 其中适配器模式可以选择: ArrayAdapter:简单易用,通常用于将数组或者List集合的读个包值封装成多个列表项 SimpleAdapte ...
- 一个基于netty的websocket聊天demo
这里,仅仅是一个demo,模拟客户基于浏览器咨询卖家问题的场景,但是,这里的demo中,卖家不是人,是基于netty的程序(我就叫你uglyRobot吧),自动回复了客户问的问题. 项目特点如下: 1 ...
- JavaScript ES6和ES5闭包的小demo
版权声明:署名,允许他人基于本文进行创作,且必须基于与原先许可协议相同的许可协议分发本文 (Creative Commons) 可能有些小伙伴不知道ES6的写法,这儿先填写一个小例子 let conn ...
- C# 开源一个基于 yarp 的 API 网关 Demo，支持绑定 Kubernetes Service
关于 Neting 刚开始的时候是打算使用微软官方的 Yarp 库,实现一个 API 网关,后面发现坑比较多,弄起来比较麻烦,就放弃了.目前写完了查看 Kubernetes Service 信息.创建 ...
- 【MVVMLight小记】一.快速搭建一个基于MVVMLight的silverlight小程序
写了篇MVVM小记http://www.cnblogs.com/whosedream/p/mvvmnote1.html,说好要写点MVVMLight的东西,所以接着写,以便和大家共勉. 我假设你已经有 ...
- javaagent笔记及一个基于javassit的应用监控程序demo
javaagent基本用法 定义入口premain public static void premain(String agentArgs, Instrumentation inst) { Syste ...
随机推荐
- Netty ByteBuf源码分析
Netty的ByteBuf是JDK中ByteBuffer的升级版,提供了NIO buffer和byte数组的抽象视图. ByteBuf的主要类集成关系: (图片来自Netty权威指南,图中有一个画错的 ...
- 野村证券伦敦分部面试 - Java岗位
第一轮 1. 笔试 30 mins 一共六道大题,前两题有4-5个小题. 第一道大题主要是考察Java Collections: a. LinkedList和ArrayList的区别 b. Set和L ...
- 基于.NET CORE微服务框架 -surging的介绍和简单示例 （开源）
一.前言 至今为止编程开发已经11个年头,从 VB6.0,ASP时代到ASP.NET再到MVC, 从中见证了.NET技术发展,从无畏无知的懵懂少年,到现在的中年大叔,从中的酸甜苦辣也只有本人自知.随着 ...
- Python-WXPY实现微信监控报警
概述: 本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序.博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的将工作和学习联系在一起. 博文中主要使用到的 ...
- jmeter之BeanShell对两个变量断言对比
在jmeter的中,断言没法对两个变量的进行对比后判断,只能使用Bean Shell断言来进行. 假设需求: 获取某类型用户uid个数与数据库查询结果是否相等 获取uid个数用http接口获取统计数据 ...
- Github 的系统内部都在用什么开源软件？
有时候处理规模问题最好的办法就是让事情变得简单并尽你可能去避免出现这种情况.这是 GitHub 所采用的方法,林纳斯·托瓦兹(Linus Torvalds)在十年前开发了Git源代码控制工具,GitH ...
- 【SignalR学习系列】6. SignalR Hubs Api 详解（C# Server 端）
如何注册 SignalR 中间件 为了让客户端能够连接到 Hub ,当程序启动的时候你需要调用 MapSignalR 方法. 下面代码显示了如何在 OWIN startup 类里面定义 SignalR ...
- Spring源码情操陶冶-AbstractApplicationContext#prepareBeanFactory
阅读源码有助于陶冶情操,本文承接Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory 瞧瞧官方注释 /** * Configur ...
- 【http】post和get请求的区别
两种常用的HTTP请求方式:post和get get:从指定的资源进行请求.数据长度有限制(2048个字符)可被缓存.可被保留在浏览器历史记录中,安全性较差.发送敏感信息如密码时不适用. po ...
- Java中使用POI读取大的Excel文件或者输入流时发生out of memory异常参考解决方案
注意:此参考解决方案只是针对xlsx格式的excel文件! 背景 前一段时间遇到一种情况,服务器经常宕机,而且没有规律性,查看GC日志发生了out of memory,是堆溢出导致的,分析了一下堆的d ...