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",然后 ...
随机推荐
- 使用Ambari安装hadoop集群
最近需要做些spark的工作,所以弄了几台dell7500就这么准备开始搭建集群,之前用过几台更破的台式机搭建过一次,折腾了半个月之久,终于成功搭建,这次不想走老路,所以网上查了一下,发现一个神器AM ...
- androud 自定义属性
在values文件夹下新建的attrs.xml文件如下: format是该属性的一种单位:有 color,String,references等. <?xml version="1.0& ...
- 十五个常用的jquery代码段【转】
好的文章顶一个 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法,你无需插件便可创建一个简单地回到顶部动画: 1 // Back to top 2 $('a.t ...
- C# 根据自定义线程定时器 生成随机订单
这个源之于一个朋友问我的一个问题,他说他们的需求是在一天之内随机抽取数据生成订单,还不能让客户看出来. 随机生成的订单还分概率抽取不一定的状态值,那么根据我之前写的定时器线程执行器,我们设计需要一个定 ...
- 20 个高质量响应式的 HTML/CSS 网站模板
BisLite: Free HTML Website Templates Professional Responsive HTML5/CSS3 template Respond Wood workin ...
- Swift的期待
去年底苹果开源 Swift 之后,Google.Facebook和Uber三个互联网巨头就曾在伦敦召开会议讨论Swift在各自开发战略中的地位.近日业界有消息传出,谷歌有意考虑将Swift作为Andr ...
- C#--常量
- 【原创】Kakfa utils源代码分析(一)
Kafka.utils,顾名思义,就是一个工具套件包,里面的类封装了很多常见的功能实现——说到这里,笔者有一个感触:当初为了阅读Kafka源代码而学习了Scala语言,本以为Kafka的实现会用到很多 ...
- C语言学习003:Hello 指针
在C中使用指针的原因 避免副本 在函数调用的时候,可以只传递数据的引用,而不用传递数据 数据共享 两段代码可以同时操作同一份数据,而不是两份独立的副本 使用指针读写数据 #include <st ...
- C# ACCESS数据库操作类
这个是针对ACCESS数据库操作的类,同样也是从SQLHELPER提取而来,分页程序的调用可以参考MSSQL那个类的调用,差不多的,只是提取所有记录的数量的时候有多一个参数,这个需要注意一下! usi ...