<!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>
<div id="root">
<button @click="getPost()">Add Api</button>
<div class="" v-for="post in posts">
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</div>
<!--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://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
var app = new Vue({
el:"#root",
data:{
posts:[]
},
methods:{
getPost:function(){
var current = this;
axios.get("http://jsonplaceholder.typicode.com/posts")
.then(function(res){
current.posts = res.data;
});
}
}
});
</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>
<div id="root">
<button @click="getPost()">Add Api</button>
<div class="" v-for="post in posts">
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</div>
<!--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://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
var app = new Vue({
el:"#root",
data:{
posts:[]
},
methods:{
getPost:function(){
var current = this;
axios.get("http://jsonplaceholder.typicode.com/posts")
.then(function(res){
current.posts = res.data;
});
}
}
});
</script>
</body>
</html>
0 comments:
Post a Comment