<!DOCTYPE html>
<html>
<head>
<title>Vue Js</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<style>
.menu ul{
background-color: #333;
width: 800px;
margin: 0;
padding: 0;
}
.menu ul li{
float: left;
width: 100px;
}
.menu ul li a{
text-decoration: none;
display: block;
color: #fff;
text-align: center;
padding: 10px;
line-height: 50px;
}
.menu ul li a:hover{
color: red;
background-color: #000;
border-radius: 2px;
}
.homeBody{
width: 800px;
padding: 30px;
background-color: yellow;
}
.aboutBody{
width: 800px;
padding: 30px;
background-color: green;
}
.contactBody{
width: 800px;
padding: 30px;
background-color: pink;
}
.content h1{
}
.content p{
text-align: justify;
}
</style>
<body>
<center>
<div id="root">
<h1>View Js Tutorial</h1>
<div class="menu">
<ul class="nav">
<li><router-link to="home">Home</router-link></a></li>
<li><router-link to="about">About</router-link></a></li>
<li><router-link to="contact">Contact</router-link></a></li>
</ul>
</div>
<br />
<router-view></router-view>
</div>
</center>
<!--js plugin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
var Home={
template:`
<div class="homeBody">
<div class="content">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var About={
template:`
<div class="aboutBody">
<div class="content">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var Contact={
template:`
<div class="contactBody">
<div class="content">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var routes=[
{path:'/home', component:Home},
{path:'/about', component:About},
{path:'/contact', component:Contact},
];
var router = new VueRouter({
routes:routes,
mode:'history',
base:'/viewJS'
});
var app = new Vue({
router:router
}).$mount("#root");
</script>
</body>
</html>
<html>
<head>
<title>Vue Js</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<style>
.menu ul{
background-color: #333;
width: 800px;
margin: 0;
padding: 0;
}
.menu ul li{
float: left;
width: 100px;
}
.menu ul li a{
text-decoration: none;
display: block;
color: #fff;
text-align: center;
padding: 10px;
line-height: 50px;
}
.menu ul li a:hover{
color: red;
background-color: #000;
border-radius: 2px;
}
.homeBody{
width: 800px;
padding: 30px;
background-color: yellow;
}
.aboutBody{
width: 800px;
padding: 30px;
background-color: green;
}
.contactBody{
width: 800px;
padding: 30px;
background-color: pink;
}
.content h1{
}
.content p{
text-align: justify;
}
</style>
<body>
<center>
<div id="root">
<h1>View Js Tutorial</h1>
<div class="menu">
<ul class="nav">
<li><router-link to="home">Home</router-link></a></li>
<li><router-link to="about">About</router-link></a></li>
<li><router-link to="contact">Contact</router-link></a></li>
</ul>
</div>
<br />
<router-view></router-view>
</div>
</center>
<!--js plugin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
var Home={
template:`
<div class="homeBody">
<div class="content">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var About={
template:`
<div class="aboutBody">
<div class="content">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var Contact={
template:`
<div class="contactBody">
<div class="content">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
`
};
var routes=[
{path:'/home', component:Home},
{path:'/about', component:About},
{path:'/contact', component:Contact},
];
var router = new VueRouter({
routes:routes,
mode:'history',
base:'/viewJS'
});
var app = new Vue({
router:router
}).$mount("#root");
</script>
</body>
</html>
0 comments:
Post a Comment