一个基于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 ...
随机推荐
- IE浏览器兼容
IE6下面元素的宽高小于16PX时 会默认以16PX显示(最小宽高) 解决办法:设置元素overflow:hidden; 当文字全是字母或数字时会超容器对溢出隐藏的样式失效, 解决办法:设置下父级 ...
- javascript编程代码笔记
1. 快速排序算法 方法一 function quicksort(n,left,right){ var p; if(left<right){ p = position(n,left,right) ...
- MySQL-FAQ
1.ERROR 1130: Host 'xxx' is not allowed to connect to this MySQL server远程连接mysql服务器报上述错误.解决方法:1.改表法. ...
- Mybatis mapper文件中的转义方法
在mybatis中的sql文件中对于大于等于或小于等于是不能直接写?=或者<=的,需要进行转义,目前有两种方式: 1.通过符号转义: 转义字符 < < 小于号 ...
- HttpClient以json形式的参数调用http接口并对返回的json数据进行处理（可以带文件）
1.参数的url就是被调用的地址,map是你要传的参数.参数转成json我使用的是gson方式转换的. 主要使用的jar包有httpclient-4.5.3.jar.httpcore-4.4.6.ja ...
- java封装性、继承性及关键字
方法的参数传递(重点.难点)1.形参:方法声明时,方法小括号内的参数 实参:调用方法时,实际传入的参数的值 2.规则:java中的参数传递机制:值传递机制 1)形参是基本数据类型的:将实参的值传递 ...
- java第一课，java基础
Java: 是1991年SUN公司的James Gosling等人开发名称为Oak的语言,希望用于控制嵌入在有线电视交换盒,PDA等的微处理器.java.是面向互联网的语 ...
- 51nod_1100:斜率最大
题目链接 斜率最大点对横坐标必相邻 #include <bits/stdc++.h> using namespace std; ; struct point { int x, y, pos ...
- Java设计模式之模板方法设计模式(银行计息案例)
不知道为什么,这几天对Java中的设计模式非常感兴趣,恰巧呢这几天公司的开发任务还不算太多,趁着有时间昨天又把模板方法模式深入学习了一下,做了一个客户在不同银行计息的小案例,感触颇深,今天给各位分享一 ...
- Java 9 揭秘（17. Reactive Streams）
Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: 什么是流(stream) 响应式流(Reactive Streams)的倡议是什么,以及规范和Java API 响应式流在JDK 中的AP ...