Vue router教程，基于Vue.js 1.0.25

keepfool · Jul 20, 2016 · 1c8cdc9 · 1c8cdc9
1 parent 4b78698
commit 1c8cdc9
Show file tree

Hide file tree

Showing 72 changed files with 16,221 additions and 2 deletions.
diff --git a/.project b/.project
@@ -14,4 +14,15 @@
 	<natures>
 		<nature>com.aptana.projects.webnature</nature>
 	</natures>
+	<filteredResources>
+		<filter>
+			<id>1468412932332</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
 </projectDescription>
diff --git a/04.OAuth/vue-resource/demo.html b/04.OAuth/vue-resource/demo.html
@@ -10,7 +10,7 @@
 	</head>
 
 	<body>
-		<div id="app">
+		<div id="app" v-cloak>
 
 			<div class="container">
 				<span id="message">{{ msg | json }}</span>

diff --git a/04.OAuth/vue-resource/step-01.html b/04.OAuth/vue-resource/step-01.html
@@ -9,7 +9,7 @@
 
 	<body>
 
-		<div id="app">
+		<div id="app" v-cloak>
 			<div class="container">
 				<span id="message">{{ msg | json }}</span>
 			</div>

diff --git a/04.OAuth/vue-resource/style.css b/04.OAuth/vue-resource/style.css
@@ -103,6 +103,10 @@ template {
 	max-width: 640px;
 }
 
+[v-cloak] {
+  display: none;
+}
+
 #message {
 	color: #ff0000;
 }

diff --git a/06.Router/.gitignore b/06.Router/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
diff --git a/06.Router/basic/assets/css/custom.css b/06.Router/basic/assets/css/custom.css
@@ -0,0 +1,18 @@
+body {
+	font-family: "Lato","Hiragino Sans GB", "Helvetica Neue", "Micrsoft YaHei", sans-serif;
+	background-color: #f7f8f9;
+}
+
+ul {
+	margin-top: 10px;
+}
+
+p {
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+
+.well{
+	max-height: 400px;
+	overflow-y: scroll;
+}
diff --git a/06.Router/basic/basic_01.html b/06.Router/basic/basic_01.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css"/>
+		<link rel="stylesheet" href="assets/css/custom.css" />
+	</head>
+
+	<body>
+		<div id="app">
+			<div class="row">
+				<div class="col-xs-offset-2 col-xs-8">
+					<div class="page-header">
+						<h2>Router Basic - 01</h2>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xs-2 col-xs-offset-2">
+					<div class="list-group">
+						<!--使用指令v-link进行导航-->
+						<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
+						<a class="list-group-item" v-link="{ path: '/about'}">About</a>
+					</div>
+				</div>
+				<div class="col-xs-6">
+					<div class="panel">
+						<div class="panel-body">
+							<!--用于渲染匹配的组件-->
+							<router-view></router-view>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<template id="home">
+			<div>
+				<h1>Home</h1>
+				<p>{{msg}}</p>
+			</div>
+		</template>
+		<template id="about">
+			<div>
+				<h1>About</h1>
+				<p>This is the tutorial about vue-router.</p>
+			</div>
+		</template>
+	</body>
+	<script src="js/vue.js"></script>
+	<script src="js/vue-router.js"></script>
+	<script>
+		/* 创建组件构造器  */
+		var Home = Vue.extend({
+			template: '#home',
+			data: function() {
+				return {
+					msg: 'Hello, vue router!'
+				}
+			}
+		})
+
+		var About = Vue.extend({
+			template: '#about'
+		})
+
+		/* 创建路由器  */
+		var router = new VueRouter()
+
+		/* 创建路由映射  */
+		router.map({
+			'/home': {
+				component: Home
+			},
+			'/about': {
+				component: About
+			}
+		})
+
+		router.redirect({
+			'/': '/home'
+		})
+
+		/* 启动路由  */
+		var App = Vue.extend({})
+		router.start(App, '#app')
+	</script>
+
+</html>
diff --git a/06.Router/basic/basic_02.html b/06.Router/basic/basic_02.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css"/>
+		<link rel="stylesheet" href="assets/css/custom.css" />
+	</head>
+
+	<body>
+		<div id="app">
+			<div class="row">
+				<div class="col-xs-offset-2 col-xs-8">
+					<div class="page-header">
+						<h2>Router Basic - 02</h2>
+					</div>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-xs-2 col-xs-offset-2">
+					<div class="list-group">
+						<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
+						<a class="list-group-item" v-link="{ path: '/about'}">About</a>
+					</div>
+				</div>
+				<div class="col-xs-6">
+					<div class="panel">
+						<div class="panel-body">
+							<router-view></router-view>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<template id="home">
+			<div>
+				<h1>Home</h1>
+				<p>{{msg}}</p>
+			</div>
+			<div>
+				<ul class="nav nav-tabs">
+					<li>
+						<a v-link="{ path: '/home/news'}">News</a>
+					</li>
+					<li>
+						<a v-link="{ path: '/home/message'}">Messages</a>
+					</li>
+				</ul>
+				<router-view></router-view>
+			</div>
+		</template>
+
+		<template id="news">
+			<ul>
+				<li>News 01</li>
+				<li>News 02</li>
+				<li>News 03</li>
+			</ul>
+		</template>
+		<template id="message">
+			<ul>
+				<li>Message 01</li>
+				<li>Message 02</li>
+				<li>Message 03</li>
+			</ul>
+		</template>
+
+		<template id="about">
+			<div>
+				<h1>About</h1>
+				<p>This is the tutorial about vue-router.</p>
+			</div>
+		</template>
+
+	</body>
+	<script src="js/vue.js"></script>
+	<script src="js/vue-router.js"></script>
+	<script>
+		var Home = Vue.extend({
+			template: '#home',
+			data: function() {
+				return {
+					msg: 'Hello, vue router!'
+				}
+			}
+		})
+
+		var News = Vue.extend({
+			template: '#news'
+		})
+
+		var Message = Vue.extend({
+			template: '#message'
+		})
+
+		var About = Vue.extend({
+			template: '#about'
+		})
+
+		var router = new VueRouter()
+		router.redirect({
+			'/': '/home'
+		})
+		router.map({
+			'/home': {
+				component: Home,
+				// 定义子路由
+				subRoutes: {
+					'/news': {
+						component: News
+					},
+					'/message': {
+						component: Message
+					}
+				}
+			},
+			'/about': {
+				component: About
+			}
+		})
+
+		var App = Vue.extend({})
+		router.start(App, '#app')
+	</script>
+
+</html>