added lesson 33 code

Shaun Pelling · Shaun Pelling · commit 476cb4a05123 · 2017-04-03T13:27:58.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,16 @@
 <template>
     <div>
-        <add-blog></add-blog>
+        <show-blogs></show-blogs>
     </div>
 </template>
 
 <script>
 // Imports
-import addBlog from './components/addBlog.vue';
+import showBlogs from './components/showBlogs.vue';
 
 export default {
     components: {
-        'add-blog': addBlog
+        'show-blogs': showBlogs
     },
     data () {
         return {
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -0,0 +1,40 @@
+<template>
+    <div id="show-blogs">
+        <h1>All Blog Articles</h1>
+        <div v-for="blog in blogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+            <article>{{ blog.body }}</article>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            blogs: []
+        }
+    },
+    methods: {
+
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    }
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>
