Skip to content

Commit d8923b5

Browse files
TIGERBTIGERB
committedJul 22, 2016
Merge branch 'develop'
·
v0.8.0v0.2.0
2 parents 2e91ea9 + 7155f78 commit d8923b5

File tree

10 files changed

+247
-48
lines changed

10 files changed

+247
-48
lines changed
 

‎README.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,19 @@
33
> a easy sample to use vue to implement easy web
44
55
### Version 0.1.1
6+
---
67

78
> [download](https://github.com/TIGERB/easy-vue/releases/tag/v0.1.1)
89
10+
### Demo
11+
---
12+
13+
> <http://tigerb.github.io/easy-vue>
14+
915
### How To Use ?
16+
----
1017

11-
* `php environment to use server.php simulate api`
1218
* `npm install`
1319
* `bower install`
1420
* `npm run test (develop environment) OR npm run build (production environment)`
21+
* `php environment to use server.php simulate api`

‎app.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@ var VueRouter = require('vue-router'); //get vue-router
33
var App 　　　 = require('./app.vue');// get root module
44

55
Vue.use(VueRouter);//error:　Please install the Router with Vue.use() before creating an instance
6-
var router = new VueRouter();//init
6+
var router = new VueRouter({
7+
// history: true, //this config is to del anchor point like "#!"
8+
// saveScrollPosition: true
9+
});//init
710
var viewPath = './src/views/';//component src
811

912
router.map({
1013
'/':{
1114
name:'',
12-
component:require(viewPath+'home.vue')
15+
component:require(viewPath+'pageone.vue')
1316
},
14-
'/home':{
15-
name:'home',
16-
component:require(viewPath+'home.vue')
17+
'/two':{
18+
name:'two',
19+
component:require(viewPath+'pagetwo.vue')
20+
},
21+
'/three':{
22+
name:'three',
23+
component:require(viewPath+'pagethree.vue')
1724
}
1825
});
1926

‎src/components/bar.vue

-20
This file was deleted.

‎src/components/barBottom.vue

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<nav class="bar bar-tab easy-bottom-bar">
3+
<a class="tab-item" href="#" v-link="{path:'/'}">
4+
<span class="icon fa fa-weixin" :class="{'easy-fa-color': isOnePage}"></span>
5+
<span class="tab-label" :class="{'easy-fa-color': isOnePage}">pageone</span>
6+
</a>
7+
<a class="tab-item" href="#" v-link="{path:'/two'}">
8+
<span class="icon icon-pages" :class="{'easy-fa-color': isTwoPage}"></span>
9+
<span class="tab-label" :class="{'easy-fa-color': isTwoPage}">pagetwo</span>
10+
</a>
11+
<a class="tab-item" href="#" v-link="{path:'/three'}">
12+
<span class="icon icon-person" :class="{'easy-fa-color': isThreePage}"></span>
13+
<span class="tab-label" :class="{'easy-fa-color': isThreePage}">pagethree</span>
14+
</a>
15+
</nav>
16+
</template>
17+
18+
<script>
19+
module.exports = {
20+
data: function () {
21+
return {
22+
isOnePage: true,
23+
isTwoPage: false,
24+
isThreePage: false
25+
}
26+
},
27+
ready: function () {
28+
var uri = window.location.hash;
29+
if (uri === '#!/') {
30+
this.isOnePage = true;
31+
this.isTwoPage = false;
32+
this.isThreePage = false;
33+
}
34+
if (uri === '#!/two') {
35+
this.isOnePage = false;
36+
this.isTwoPage = true;
37+
this.isThreePage = false;
38+
}
39+
if (uri === '#!/three') {
40+
this.isOnePage = false;
41+
this.isTwoPage = false;
42+
this.isThreePage = true;
43+
}
44+
},
45+
methods: {
46+
47+
}
48+
}
49+
</script>
50+
<style>
51+
.easy-bottom-bar .easy-fa-color{
52+
color: #428bca;
53+
}
54+
</style>

‎src/components/barTop.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<header class="bar bar-nav bar-easy-vue">
3+
<a class="icon icon-refresh pull-left" @click="refresh"></a>
4+
<a class="icon icon-compose pull-right" @click="writeSome"></a>
5+
<h1 class="title">hello vue</h1>
6+
</header>
7+
</template>
8+
9+
<script>
10+
module.exports={
11+
methods:{
12+
writeSome:function () {
13+
alert('write something');
14+
},
15+
refresh: function () {
16+
// dispatch bar-top-refresh event to parent component
17+
this.$dispatch('bar-top-refresh');
18+
}
19+
}
20+
}
21+
</script>
22+
23+
<style>
24+
25+
</style>

‎src/components/card.vue

+46
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,26 @@
2020
.then(function(response) {
2121
return response.json()
2222
}).then(function(json) {
23+
//fake data
24+
json = [
25+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
26+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
27+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
28+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
29+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
30+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
31+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
32+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
33+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
34+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
35+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
36+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
37+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
38+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
39+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
40+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
41+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
42+
];
2343
self.results = json;
2444
}).catch(function(ex) {
2545
console.log(ex);
@@ -33,12 +53,38 @@
3353
.then(function(response) {
3454
return response.json()
3555
}).then(function(json) {
56+
//fake data
57+
json = [
58+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
59+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
60+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
61+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
62+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
63+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
64+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
65+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
66+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
67+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
68+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
69+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
70+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
71+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
72+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
73+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
74+
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
75+
];
3676
self.results = self.results.concat(json);
3777
}).catch(function(ex) {
3878
console.log(ex);
3979
});
4080
this.busy = false;
4181
}
82+
},
83+
events:{
84+
//catch refresh event boardcast by parent component
85+
'refresh': function(){
86+
this.results = [];
87+
}
4288
}
4389
}
4490
</script>

‎src/views/home.vue

-22
This file was deleted.

‎src/views/pageone.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<bar-top
4+
@bar-top-refresh="refresh">
5+
</bar-top>
6+
<card></card>
7+
<bar-bottom></bar-bottom>
8+
</div>
9+
</template>
10+
11+
<script>
12+
var barTop = require('../components/barTop.vue');
13+
var card = require('../components/card.vue');
14+
var barBottom = require('../components/barBottom.vue');
15+
16+
module.exports = {
17+
components:{
18+
'bar-top':barTop,
19+
'card':card,
20+
'bar-bottom':barBottom,
21+
},
22+
methods:{
23+
refresh: function () {
24+
//catch bar-top-refresh event dispatch by son component
25+
//broadcast all son component to execute refresh event
26+
this.$broadcast('refresh');
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style>
33+
34+
</style>

‎src/views/pagethree.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<bar-top
4+
@bar-top-refresh="refresh">
5+
</bar-top>
6+
<card></card>
7+
<bar-bottom></bar-bottom>
8+
</div>
9+
</template>
10+
11+
<script>
12+
var barTop = require('../components/barTop.vue');
13+
var card = require('../components/card.vue');
14+
var barBottom = require('../components/barBottom.vue');
15+
16+
module.exports = {
17+
components:{
18+
'bar-top':barTop,
19+
'card':card,
20+
'bar-bottom':barBottom,
21+
},
22+
methods:{
23+
refresh: function () {
24+
//catch bar-top-refresh event dispatch by son component
25+
//broadcast all son component to execute refresh event
26+
this.$broadcast('refresh');
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style>
33+
34+
</style>

‎src/views/pagetwo.vue

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<bar-top
4+
@bar-top-refresh="refresh">
5+
</bar-top>
6+
<card></card>
7+
<bar-bottom></bar-bottom>
8+
</div>
9+
</template>
10+
11+
<script>
12+
var barTop = require('../components/barTop.vue');
13+
var card = require('../components/card.vue');
14+
var barBottom = require('../components/barBottom.vue');
15+
16+
module.exports = {
17+
components:{
18+
'bar-top':barTop,
19+
'card':card,
20+
'bar-bottom':barBottom,
21+
},
22+
methods:{
23+
refresh: function () {
24+
//catch bar-top-refresh event dispatch by son component
25+
//broadcast all son component to execute refresh event
26+
this.$broadcast('refresh');
27+
}
28+
}
29+
}
30+
</script>
31+
32+
<style>
33+
34+
</style>

0 commit comments

Comments
 (0)
Please sign in to comment.