<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue Component testing</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<!--<navigation></navigation>-->
<div class="container-fluid nav-background">
<div class="container main-navbar">
<div class="col-xs-6 logo-contain">
<div class="nav-logo">LOGO</div>
</div>
<div class="col-xs-6 nav-contain">
<ul class="nav-list">
<li class="nav-link"><a href="#" v-on:click=" currentView = 'landing' ">Home</a></li>
<li class="nav-link"><a href="#" v-on:click=" currentView = 'about' ">About</a></li>
<li class="nav-link"><a href="#" v-on:click=" currentView = 'contact' ">Contact</a></li>
</ul>
</div>
</div>
</div>
<component v-bind:is="currentView"></component>
<bottom></bottom>
</div>
<!--<template id="navigation">
<div class="container-fluid nav-background">
<div class="container main-navbar">
<div class="col-xs-6 logo-contain">
<div class="nav-logo">LOGO</div>
</div>
<div class="col-xs-6 nav-contain">
<ul class="nav-list">
<li class="nav-link"><a href="#" v-on:click=" currentView = landing ">Home</a></li>
<li class="nav-link"><a href="#" v-on:click=" currentView = about ">About</a></li>
<li class="nav-link"><a href="#" v-on:click=" currentView = contact ">Contact</a></li>
</ul>
</div>
</div>
</div>
</template>-->
<template id="landing">
<div class="container-fluid">
<div class="col-xs-12 landing-wrap">
<div class="col-xs-6 landing-welcome"><h2>Welcome to the landing page</h2></div>
</div>
</div>
</template>
<template id="about">
<div class="container-fluid">
<div class="col-xs-12 about-wrap">
<div class="col-xs-6 about-welcome">
<h2>Welcome to the about page</h2></div>
</div>
</div>
</template>
<template id="contact">
<div class="container-fluid">
<div class="col-xs-12 contact-wrap">
<div class="col-xs-6 contact-welcome">
<h2>Welcome to the contact page</h2></div>
</div>
</div>
</template>
<template id="footer">
<div class="container-fluid">
<div class="col-xs-12 footer-wrap">
<div class="col-xs-6 footer-welcome"><h2>Welcome to the footer</h2></div>
</div>
</div>
</template>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-Infamous/vue-component-testing-JrWLLo */
/*navigation*/
.nav-background {
background-color: lightgrey;
}
.main-navbar {
height: 30px;
}
.logo-contain {
height: 100%;
display: flex;
align-items: center;
}
.nav-list {
float: right;
height: 100%;
}
.nav-link {
display: inline;
padding-left: 10px;
padding-right: 10px;
}
/*landing*/
.landing-wrap {
height: calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
}
.landing-welcome {
height: 50%;
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: center;
}
/*about*/
.about-wrap {
height: calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
}
.about-welcome {
height: 50%;
background-color: darkgrey;
display: flex;
align-items: center;
justify-content: center;
}
/*contact*/
.contact-wrap {
height: calc(100vh - 130px);
display: flex;
align-items: center;
justify-content: center;
}
.contact-welcome {
height: 50%;
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
}
/*footer*/
.footer-wrap {
height: 100px;
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: center;
}
.footer-welcome {
height: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/*Downloaded from https://www.codeseek.co/-Infamous/vue-component-testing-JrWLLo */
//Vue.component("navigation", {
// template: "#navigation"
//});
Vue.component("landing", {
template: "#landing"
});
Vue.component("about", {
template: "#about"
});
Vue.component("contact", {
template: "#contact"
});
Vue.component("bottom", {
template: "#footer"
});
new Vue({
el: "#app",
data: {
currentView: "landing"
}
});