Skip to content

Instantly share code, notes, and snippets.

@l08084 l08084/App.vue
Created Feb 20, 2019

Embed
What would you like to do?
ルートコンポーネント
<template>
<div id="app">
<h1>{{title}}</h1>
<nav>
<router-link to="/dashboard">Dashboard</router-link>
<router-link to="/heroes">Heroes</router-link>
</nav>
<router-view></router-view>
<Messages />
</div>
</template>
<script>
import Messages from './components/pages/Messages'
export default {
name: 'app',
components: {
Messages
},
data: function() {
return {
title: 'Tour of Heroes',
}
}
};
</script>
<style>
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[type="text"], button {
color: #888;
font-family: Cambria, Georgia;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<style scoped>
h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607d8b;
}
nav a:hover {
color: #039be5;
background-color: #cfd8dc;
}
nav a.active {
color: #039be5;
}
nav a:nth-child(2) {
margin-left: 10px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.