一个基于ES5的vue小demo

最新推荐文章于 2024-04-26 11:23:00 发布
最新推荐文章于 2024-04-26 11:23:00 发布
阅读量665 收藏
点赞数 1
分类专栏： Vue 文章标签： vue JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34551390/article/details/77004142
版权

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


曩昔方
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
乐橙 vue项目 demo
03-04
【乐橙 vue项目 demo】是一个基于Vue.js前端框架的示例项目，旨在为开发者提供一个基础的开发环境和模板，方便快速上手Vue.js的开发。这个项目包含了多个配置文件和源代码目录，有助于理解Vue项目的结构和配置，以及...
vue项目demo
05-29
Vue项目“vue项目demo”提供了一个实际的开发示例，帮助学习者理解Vue.js的核心概念和实践操作。在这个项目中，我们能够看到Vue与Vue Router（路由管理）和Webpack（模块打包工具）的结合使用，这些都是现代Vue开发...
js随笔
weixin_42274697的博客
03-24 179
var data = (function (i) { return function () { alert((i *= 2)); }; })(2); data(5); //弹出’4’ var a = 0, b = 0; function A(a) { A = function (b) { alert(a + b++); }; alert(a++); } A(1); // ‘1’ A(2); // ‘4’ 实现一个中.
【vue系列-01】vue初级入门以及demo实现详解
zhenghuishengq的博客
12-16 8331
vue的初级入门以及代码实现
一个VUE3的页面demo
最新发布
weixin_47194802的博客
04-26 738
样子是这样的目录是这样的。
Vue创建Demo项目
weixin_41924879的博客
02-01 1398
Vue创建Demo项目
前端---【js阶段:ES5的使用】
m0_61307468的博客
04-03 673
ES5 除了正常运行模式（又称为混杂模式），还添加了第二种运行模式："严格模式"（strict mode）。严格模式顾名思义，就是使 JavaScript 在更严格的语法条件下运行。1.1作用消除代码运行的一些不安全之处，保证代码运行的安全为未来新版本的 JavaScript 做好铺垫1.2严格模式声明1.2.1全局开启"user strict"; 1.2.2函数内部function fn() {"user strict"} 只会在函数的内部开启严格模式(1) 不允许使用未声明的变量(2)函数内部的
Javascript的es5和es6
2202_75802608的博客
06-09 1693
es5和es6的关键字使用，包括继承方式不同的优点和缺点
vue-demo.zip
06-08
Vue Demo.zip 文件包含了一个使用Vue.js构建的示例项目，它为初学者提供了一个很好的起点，帮助他们理解和实践Vue的核心概念。在这个压缩包中，"vue-demo" 应该是一个完整的项目目录，包含了所有必要的文件和配置，...
ES5中实现路由vue-router，并用vue-resource请求数据
04-24
结合以上内容，你可以创建一个基于 ES5 的 Vue 项目，使用 `vue-router` 管理路由，使用 `vue-resource` 获取数据。在 `vuedemo` 压缩包文件中，可能包含了一个已经配置好的示例项目，你可以直接运行查看效果。记住...
vue仿word表单录入demo
03-28
【Vue.js仿Word表单录入Demo详解】 Vue.js是一款轻量级、高...通过以上这些技术和Vue.js的特性，这个Demo实现了在浏览器环境中创建一个类似于Word的表单录入系统，既方便了数据的录入，又无需依赖于特定的桌面软件。
vue 2.0写的一个小demo
12-19
项demo中基本用到所有Vue的基本功能,比如,双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法见 readme
vue一些demo整理
weixin_41086056的博客
04-18 1689
vue基础案例汇总001 tab切换002 todolist简陋版 001 tab切换 <template> <div> <ul> <li :class="currentIndex == index ? 'active' : ''" v-for="(item, index) in lis...
通过一系列vue-demo入门vue2
xiuxialala的博客
04-18 499
【代码】通过一系列vue-demo入门vue2。
JavaScript快速学习及ES5标准通览
world_universe的博客
09-22 265
以es5标准规范为基础快速过一遍Javascript，以便能看懂boardgame.io教程的源代码。
JavaScript中ES5和ES6的区别
weixin_73426945的博客
07-16 526
💫总之，相对于ES5，ES6提供了更多方便的语法和功能特性，使得开发者能够更加高效和舒适地进行开发工作。⭐️变量声明方式：在ES5中，使用var关键字进行变量声明，而ES6引入了let和const关键字来声明变量。而在ES6中，增加了块级作用域，这意味着对于在if、for、switch等代码块中声明的变量，在外部是不可见的。⭐️箭头函数：ES6中新增了箭头函数，可以更简洁地定义函数，同时箭头函数没有自己的this，它的this绑定在父级作用域的this上。
es5 原型、原型链、继承
weixin_41154070的博客
03-02 767
1. 理解对象 2. 创建对象 2.1 工厂模式 function createPerson(name, age, job){ let o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ console.log(this.name); } return o; } let person1 = createPerson(“Nicholas”, 29, “software Engineer”); le
闲谈一下，ES3、ES4、ES5、ES6 分别是什么
m0_37695902的博客
07-27 1860
闲谈一下，ES3、ES4、ES5、ES6 分别是什么 上图按照时间顺序说明了JavaScript、JScript和ECMAScript的发展。 显示在网景工作的Brendan Eich临危受命，用十天时间设计出LiveScript的第一个版本。临时发布前为了讨好Sun公司和Java程序员，LiveScript改名为JavaScript。 微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在IE3.0版本附带推出JScript。为什么叫JScript？因...
基于vue2.0搭建一个前端框架
03-29
1. 创建项目文件夹，使用npm init初始化项目，生成package.json文件。 2. 安装Vue.js和Vue CLI（命令行界面）。 npm install vue npm install -g vue-cli 3. 使用Vue CLI创建项目。 vue init webpack my-project 4. 进入项目文件夹，安装依赖。 cd my-project npm install 5. 启动项目，查看是否成功。 npm run dev 6. 添加路由管理器vue-router。 npm install vue-router 7. 在src文件夹中创建views文件夹，存放所有页面组件。 8. 在src文件夹中创建components文件夹，存放所有公共组件。 9. 在src文件夹中创建assets文件夹，存放所有图片、样式和字体文件。 10. 在src文件夹中创建utils文件夹，存放所有工具函数。 11. 在src文件夹中创建config文件夹，存放所有配置文件。 12. 在src文件夹中创建store文件夹，存放所有状态管理文件。 13. 在src文件夹中创建App.vue文件，作为根组件，包含所有其他组件。 14. 在src文件夹中创建main.js文件，作为项目入口文件，配置路由、状态管理、插件等。 15. 在src文件夹中创建router文件夹，存放所有路由配置文件。 16. 在src文件夹中创建store文件夹，存放所有状态管理文件。 17. 在src文件夹中创建plugins文件夹，存放所有插件文件。 18. 在src文件夹中创建filters文件夹，存放所有过滤器文件。 19. 在src文件夹中创建mixins文件夹，存放所有混入文件。 20. 在src文件夹中创建directives文件夹，存放所有指令文件。 21. 在src文件夹中创建services文件夹，存放所有服务文件。 22. 在src文件夹中创建mock文件夹，存放所有mock数据文件。 23. 在根目录下创建vue.config.js文件，配置webpack，例如添加别名、打包选项等。 24. 在根目录下创建.babelrc文件，配置babel转码规则，例如添加ES6转ES5的插件。 25. 在根目录下创建.postcssrc.js文件，配置postcss转码规则，例如添加autoprefixer插件。 26. 在根目录下创建.editorconfig文件，配置编辑器格式化规则。 27. 在根目录下创建.eslint.js文件，配置eslint规则。 28. 在根目录下创建.prettierrc文件，配置prettier规则。 29. 在根目录下创建README.md文件，编写项目介绍、使用方法等文档。 30. 在根目录下创建LICENSE文件，添加开源协议。 这样，一个基于vue2.0的前端框架就搭建好了。在实际开发过程中，可以根据项目需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值