Skip to content

Commit 1c8cdc9

Browse files
keepfoolkeepfool
committed
Vue router教程，基于Vue.js 1.0.25
1 parent 4b78698 commit 1c8cdc9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+16221
-2
lines changed

‎.project

+11
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,15 @@
1414
<natures>
1515
<nature>com.aptana.projects.webnature</nature>
1616
</natures>
17+
<filteredResources>
18+
<filter>
19+
<id>1468412932332</id>
20+
<name></name>
21+
<type>26</type>
22+
<matcher>
23+
<id>org.eclipse.ui.ide.multiFilter</id>
24+
<arguments>1.0-name-matches-false-false-node_modules</arguments>
25+
</matcher>
26+
</filter>
27+
</filteredResources>
1728
</projectDescription>

‎04.OAuth/vue-resource/demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
</head>
1111

1212
<body>
13-
<div id="app">
13+
<div id="app" v-cloak>
1414

1515
<div class="container">
1616
<span id="message">{{ msg | json }}</span>

‎04.OAuth/vue-resource/step-01.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
<body>
1111

12-
<div id="app">
12+
<div id="app" v-cloak>
1313
<div class="container">
1414
<span id="message">{{ msg | json }}</span>
1515
</div>

‎04.OAuth/vue-resource/style.css

+4
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ template {
103103
max-width: 640px;
104104
}
105105

106+
[v-cloak] {
107+
display: none;
108+
}
109+
106110
#message {
107111
color: #ff0000;
108112
}

‎06.Router/.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
npm-debug.log

‎06.Router/basic/assets/css/custom.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body {
2+
font-family: "Lato","Hiragino Sans GB", "Helvetica Neue", "Micrsoft YaHei", sans-serif;
3+
background-color: #f7f8f9;
4+
}
5+
6+
ul {
7+
margin-top: 10px;
8+
}
9+
10+
p {
11+
margin-top: 10px;
12+
margin-bottom: 10px;
13+
}
14+
15+
.well{
16+
max-height: 400px;
17+
overflow-y: scroll;
18+
}

‎06.Router/basic/basic_01.html

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css"/>
8+
<link rel="stylesheet" href="assets/css/custom.css" />
9+
</head>
10+
11+
<body>
12+
<div id="app">
13+
<div class="row">
14+
<div class="col-xs-offset-2 col-xs-8">
15+
<div class="page-header">
16+
<h2>Router Basic - 01</h2>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="row">
21+
<div class="col-xs-2 col-xs-offset-2">
22+
<div class="list-group">
23+
<!--使用指令v-link进行导航-->
24+
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
25+
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
26+
</div>
27+
</div>
28+
<div class="col-xs-6">
29+
<div class="panel">
30+
<div class="panel-body">
31+
<!--用于渲染匹配的组件-->
32+
<router-view></router-view>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</div>
38+
<template id="home">
39+
<div>
40+
<h1>Home</h1>
41+
<p>{{msg}}</p>
42+
</div>
43+
</template>
44+
<template id="about">
45+
<div>
46+
<h1>About</h1>
47+
<p>This is the tutorial about vue-router.</p>
48+
</div>
49+
</template>
50+
</body>
51+
<script src="js/vue.js"></script>
52+
<script src="js/vue-router.js"></script>
53+
<script>
54+
/* 创建组件构造器 */
55+
var Home = Vue.extend({
56+
template: '#home',
57+
data: function() {
58+
return {
59+
msg: 'Hello, vue router!'
60+
}
61+
}
62+
})
63+
64+
var About = Vue.extend({
65+
template: '#about'
66+
})
67+
68+
/* 创建路由器 */
69+
var router = new VueRouter()
70+
71+
/* 创建路由映射 */
72+
router.map({
73+
'/home': {
74+
component: Home
75+
},
76+
'/about': {
77+
component: About
78+
}
79+
})
80+
81+
router.redirect({
82+
'/': '/home'
83+
})
84+
85+
/* 启动路由 */
86+
var App = Vue.extend({})
87+
router.start(App, '#app')
88+
</script>
89+
90+
</html>

‎06.Router/basic/basic_02.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css"/>
8+
<link rel="stylesheet" href="assets/css/custom.css" />
9+
</head>
10+
11+
<body>
12+
<div id="app">
13+
<div class="row">
14+
<div class="col-xs-offset-2 col-xs-8">
15+
<div class="page-header">
16+
<h2>Router Basic - 02</h2>
17+
</div>
18+
</div>
19+
</div>
20+
<div class="row">
21+
<div class="col-xs-2 col-xs-offset-2">
22+
<div class="list-group">
23+
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
24+
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
25+
</div>
26+
</div>
27+
<div class="col-xs-6">
28+
<div class="panel">
29+
<div class="panel-body">
30+
<router-view></router-view>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
37+
<template id="home">
38+
<div>
39+
<h1>Home</h1>
40+
<p>{{msg}}</p>
41+
</div>
42+
<div>
43+
<ul class="nav nav-tabs">
44+
<li>
45+
<a v-link="{ path: '/home/news'}">News</a>
46+
</li>
47+
<li>
48+
<a v-link="{ path: '/home/message'}">Messages</a>
49+
</li>
50+
</ul>
51+
<router-view></router-view>
52+
</div>
53+
</template>
54+
55+
<template id="news">
56+
<ul>
57+
<li>News 01</li>
58+
<li>News 02</li>
59+
<li>News 03</li>
60+
</ul>
61+
</template>
62+
<template id="message">
63+
<ul>
64+
<li>Message 01</li>
65+
<li>Message 02</li>
66+
<li>Message 03</li>
67+
</ul>
68+
</template>
69+
70+
<template id="about">
71+
<div>
72+
<h1>About</h1>
73+
<p>This is the tutorial about vue-router.</p>
74+
</div>
75+
</template>
76+
77+
</body>
78+
<script src="js/vue.js"></script>
79+
<script src="js/vue-router.js"></script>
80+
<script>
81+
var Home = Vue.extend({
82+
template: '#home',
83+
data: function() {
84+
return {
85+
msg: 'Hello, vue router!'
86+
}
87+
}
88+
})
89+
90+
var News = Vue.extend({
91+
template: '#news'
92+
})
93+
94+
var Message = Vue.extend({
95+
template: '#message'
96+
})
97+
98+
var About = Vue.extend({
99+
template: '#about'
100+
})
101+
102+
var router = new VueRouter()
103+
router.redirect({
104+
'/': '/home'
105+
})
106+
router.map({
107+
'/home': {
108+
component: Home,
109+
// 定义子路由
110+
subRoutes: {
111+
'/news': {
112+
component: News
113+
},
114+
'/message': {
115+
component: Message
116+
}
117+
}
118+
},
119+
'/about': {
120+
component: About
121+
}
122+
})
123+
124+
var App = Vue.extend({})
125+
router.start(App, '#app')
126+
</script>
127+
128+
</html>

0 commit comments

Comments
 (0)