155.Vue实现个人博客（三）【Vue2.0-展示博客并请求数据】 2019.03.13

<template>
  <div  id="show-blogs">
    <h1>博客总览</h1>
        <h2>{{blog.title}}</h2>
    	<article>
    		{{blog.body}}
    	</article>
  </div>
</template>

<script>

// 导出默认输出
export default {
  name: 'show-blogs',
  data(){
  	return {
  		blogs:[], // 空的blog数组
  	}
  },
  created(){
    // 使用vue-resource的get（）方法请求数据
  	this.$http.get('https://vuedemo-b1233.firebaseio.com/posts.json')
      
    // 注意：若想请求当前本地的json文件，需要把json文件放在static文件下，主这样才能够访问成功
    // this.$http.get('./../static/posts.json') 

      // get数据成功后，返回数据信息
      .then(function(data){
  			// console.log(data.json());
  			   this.blogs = data.body.slice(0,10); // 输出10条数据信息
  			// console.log(this.blogs);
  		})
}
</script>

<style>
#show-blogs{
	max-width: 800px;
	margin: 0 auto;
}

.single-blog{
	padding: 20px;
	margin: 20px 0;
	box-sizing: border-box;
	background: #eee;
  border: 1px dotted #aaa;
}

#show-blogs a{
  color: #444;
  text-decoration: none;
}

input[type="text"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}


</style>