mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-31 15:50:32 +00:00
Faster Loading component
- Finished examples/custom-routes/
This commit is contained in:
parent
7dd959bd21
commit
e80cf65d21
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<h3>{{ name }}</h3>
|
<h3>{{ name }}</h3>
|
||||||
|
<h4>@{{ username }}</h4>
|
||||||
<p>Email : {{ email }}</p>
|
<p>Email : {{ email }}</p>
|
||||||
|
<p><router-link to="/">List of users</router-link></p>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -16,5 +18,10 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.user {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="users">
|
<div class="container">
|
||||||
<h2>Users</h2>
|
<h2>Users</h2>
|
||||||
<li v-for="user in users">
|
<ul class="users">
|
||||||
<router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
|
<li v-for="user in users">
|
||||||
</li>
|
<router-link :to="{ name: 'user', params: { id: user.id } }">{{ user.name }}</router-link>
|
||||||
</ul>
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -20,6 +22,25 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
.users {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.users li a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 200px;
|
||||||
|
border: 1px #ddd solid;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: left;
|
||||||
|
color: #222;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.users li a:hover {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -73,9 +73,9 @@ export default {
|
|||||||
Vue.nextTick(() => {
|
Vue.nextTick(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.percent = 0
|
this.percent = 0
|
||||||
}, 100)
|
}, 200)
|
||||||
})
|
})
|
||||||
}, 800)
|
}, 500)
|
||||||
return this
|
return this
|
||||||
},
|
},
|
||||||
fail () {
|
fail () {
|
||||||
@ -96,7 +96,7 @@ export default {
|
|||||||
right: 0px;
|
right: 0px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
transition: width 0.2s, opacity 0.6s;
|
transition: width 0.2s, opacity 0.4s;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: #efc14e;
|
background-color: #efc14e;
|
||||||
z-index: 999999;
|
z-index: 999999;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "nuxt",
|
"name": "nuxt",
|
||||||
"version": "0.1.7",
|
"version": "0.1.8",
|
||||||
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
"description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
Loading…
Reference in New Issue
Block a user