一个基于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 ...
随机推荐
- 遍历数组按学号找人,若找到则输出信息,否则输出"查无此人"
//建立一个类类型的数组,并向这个数组内添加学生信息,包括姓名和年龄等 **********************学生类************************** package prac ...
- PHP超全局变量$_SERVER
$_SERVER 是一个包含了诸如头信息(header).路径(path).以及脚本位置(script locations)等等信息的数组.这个数组中的项目由 Web 服务器创建.不能保证每个服务器都 ...
- Reverse bits - 按位反转一个int型数字
Reverse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represented in ...
- [luogu P1967][NOIp2013] 货车运输
题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情况下,最多 ...
- SQL Prompt 破解之道
1. 下载SQL Prompt 5.3.4.1,是个压缩包,里面有三个文件 免登录免积分下载地址:http://download.csdn.net/detail/caizz520/4557385 1) ...
- 关于MUI集成微信分享遇到的坑
今天聊一下MUI这个框架吧! 首先,用这个框架也有很长一段时间了,项目不同,涉及到的功能也有不同,之前没有涉及到微信分享相关的内容!今天,遇到了,也解决了,分享出来. 下面是手顺: 1.分享的代码是参 ...
- (转)Java线程：新特征-线程池
Java线程:新特征-线程池 Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线程相关的内容,为多线程的编程带来了极大便利 ...
- ML（2）--感知机
案例银行办信用卡--获得感知机 我们到银行办信用卡时,银行并不是直接就给你办卡的,而是会根据你的一些个人信息.消费信息.个人信誉等指标综合考虑后,才会决定是否给你办卡(不像现在银行办信用卡有点随意). ...
- Android APP 内部捐赠实现(支付宝&微信)
Android APP 内部捐赠实现(支付宝&微信) 目前支持 支付宝和 微信. 项目地址:https://github.com/didikee/AndroidDonate https://p ...
- Android 内存检查
Android 内存检查 本文简单介绍了如何使用 DDMS 和 MAT 工具来对 android 进行内存检查,了解 android 内存的具体占用情况. 步骤1. 使用 DDMS 观察内存的使用情况 ...