vue单页面程序
2024-09-02 03:45:09
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>
最新文章
- yii2.0邮箱发送
- C语言使用cmd命令并获取输出方法
- 在ubuntu下创建wifi供移动端使用
- linux(centos6.5 i386)安装mysql5.6源码包
- 一段高质量的SQL从问问题开始(笔记)
- Matlab中plot函数参数解析
- iOS:不同属性声明方式的解析
- linux是一种修行
- JAVA中enum的常见用法
- pat 1014 1017 排队类问题
- matlab中 mcc、mbuild和mex命令详解
- Git创建本地版本库
- c# 程序只能运行一次(多次运行只能打开同一个程序)
- Lua之math
- Java反射之如何判断类或变量、方法的修饰符(Modifier解析)
- NFC手机上基于软件的卡模拟 重大利好还是安全噩梦?(转)
- Windows下切换盘符
- 基于jQuery的表单操作
- java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()L
- grub覆盖mbr引导系统