vue单页面程序
gitHub地址:https://github.com/manlili/vue_spa
举个栗子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
<router-view></router-view>
</div>
<template id="home">
<h1>
我是home
</h1>
</template>
<template id="about">
<h1>
我是about
</h1>
</template>
<script type="text/javascript">
//声明使用路由
Vue.use(VueRouter); var home = Vue.extend({
template: "#home"
})
var about = Vue.extend({
template: "#about"
}) //创建路由
var router = new VueRouter(); //映射路径
router.map({
'/home':{component:home},
'/about':{component:about}
}) //启动路由
var app = Vue.extend({});
router.start(app,"#app");
</script>
</body>
</html>
vue单页面程序的更多相关文章
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- 处理 Vue 单页面 SEO 的另一种思路
vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender- ...
- [后端人员耍前端系列]KnockoutJs篇:使用WebApi+Bootstrap+KnockoutJs打造单页面程序
一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- [one day one question] Vue单页面应用如何保证F5强刷不清空数据
问题描述: Vue单页面用按F5强刷,数据就恢复初始了,这怎么破? 解决方案: store.subscribe((mutation, state) => { sessionStorage.set ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- vue单页面处理SEO问题
设置vue 单页面meta info信息 vue-meta-info,(https://github.com/muwoo/vue-meta-info)如果需要单页面SEO,可以和 prerender- ...
- 基于AngularJs的单页面程序
基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...
随机推荐
- PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性
//php自带函数 getimagesize()$img_info = getimagesize('tomener.jpg'); echo '<pre>'; print_r($img_in ...
- C#语法糖(Csharp Syntactic sugar)大汇总
首先需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕 ...
- HTML语义化:HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- 网页颜色分辨测试小游戏的js化辨别及优化
相信大家都玩过一种网页游戏,通俗的可以叫颜色分辨测试游戏(这个名字对不对我也不知道,不要在意这些细节),也就是下面截图这个玩意,一看就明白:细细把玩过一段时间,作为一个一百米开外男女不分的弱视青年,每 ...
- 30天C#基础巩固------集合,File(文件操作 ),Encoding处理字符集
一:泛型 关于泛型我自己也不是很好的理解,但是具体的运用还是可以的,可以这样的理解,我们定义一个数组,但是不知道将来它是保存什么类型的值,很是矛盾,这个时候泛型就出现了,它可以解决这个场景,li ...
- IOS 字典快速转换为Model 模型
一般情况下IOS得局部页面加载的过程是,创建一个Model然后,将Nib文件与Model进行关联,然后能够快速的获取到Nib文件上的控件实例.操作生成页面. 但是原生的内容是没有直接通过Json获取M ...
- 对于 ThreadLocal 的理解和应用
首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中的对象是该线程自己使用的对象,其他线程是不需要访问的,也访问不到的.各 ...
- 基于cookie实现zTree树刷新后,展开状态不变
1.除了引用jQuery和zTree的JS外,引用cookie的JS: <script type="text/javascript" src="~/Scripts/ ...
- Entity Framework 实体框架的形成之旅--界面操作的几个典型的处理(8)
在上篇随笔<Entity Framework 实体框架的形成之旅--数据传输模型DTO和实体模型Entity的分离与联合>里面,介绍了在Entity Framework 实体框架里面引入了 ...
- 用js解析经json序列化后的C#的DateTime类型数据
格式化日期(网上到处是),把下面的代码添加到jQuery.js文件中 //格式化日期 Date.prototype.format = function(format) { /* * eg:format ...