Lesson 42

package.json

@@ -9,7 +9,9 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "vue": "^2.2.1"
+    "vue": "^2.2.1",
+    "vue-resource": "^1.2.1",
+    "vue-router": "^2.3.1"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",

src/App.vue

@@ -1,43 +1,27 @@
 <template>
     <div>
-        <app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
-        <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
-        <ul>
-          <li v-for="ninja in ninjas">{{ ninja.name }}</li>
-        </ul>
-        <app-footer v-bind:title="title"></app-footer>
+        <app-header></app-header>
+        <router-view></router-view>
     </div>
 </template>
 
 <script>
 // Imports
-import Header from './components/Header.vue';
-import Footer from './components/Footer.vue';
-import Ninjas from './components/Ninjas.vue';
+import showBlogs from './components/showBlogs.vue';
+import listBlogs from './components/listBlogs.vue';
+import header from './components/header.vue';
 
 export default {
     components: {
-        'app-header': Header,
-        'app-footer': Footer,
-        'app-ninjas': Ninjas
+        'app-header': header
     },
     data () {
         return {
-          ninjas: [
-              {name: 'Ryu', speciality: 'Vue Components', show: false},
-              {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
-              {name: 'Hitoshi', speciality: 'Click Events', show: false},
-              {name: 'Tango', speciality: 'Conditionals', show: false},
-              {name: 'Kami', speciality: 'Webpack', show: false},
-              {name: 'Yoshi', speciality: 'Data Diggin', show: false}
-          ],
-          title: 'Vue Wizards'
+
         }
     },
     methods: {
-      updateTitle: function(updatedTitle){
-        this.title = updatedTitle;
-      }
+
     }
 }
 </script>

src/components/addBlog.vue

@@ -0,0 +1,108 @@
+<template>
+    <div id="add-blog">
+        <h2>Add a New Blog Post</h2>
+        <form v-if="!submitted">
+            <label>Blog Title:</label>
+            <input type="text" v-model.lazy="blog.title" required />
+            <label>Blog Content:</label>
+            <textarea v-model.lazy.trim="blog.content"></textarea>
+            <div id="checkboxes">
+                <p>Blog Categories:</p>
+                <label>Ninjas</label>
+                <input type="checkbox" value="ninjas" v-model="blog.categories" />
+                <label>Wizards</label>
+                <input type="checkbox" value="wizards" v-model="blog.categories" />
+                <label>Mario</label>
+                <input type="checkbox" value="mario" v-model="blog.categories" />
+                <label>Cheese</label>
+                <input type="checkbox" value="cheese" v-model="blog.categories" />
+            </div>
+            <label>Author:</label>
+            <select v-model="blog.author">
+                <option v-for="author in authors">{{ author }}</option>
+            </select>
+            <hr />
+            <button v-on:click.prevent="post">Add Blog</button>
+        </form>
+        <div v-if="submitted">
+            <h3>Thanks for adding your post</h3>
+        </div>
+        <div id="preview">
+            <h3>Preview blog</h3>
+            <p>Blog title: {{ blog.title }}</p>
+            <p>Blog content:</p>
+            <p style="white-space: pre">{{ blog.content }}</p>
+            <p>Blog Categories:</p>
+            <ul>
+                <li v-for="category in blog.categories">{{ category }}</li>
+            </ul>
+            <p>Author: {{ blog.author }}</p>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+
+export default {
+    data () {
+        return {
+            blog: {
+                title: '',
+                content: '',
+                categories: [],
+                author: ''
+            },
+            authors: ['The Net Ninja', 'The Angular Avenger', 'The Vue Vindicator'],
+            submitted: false
+        }
+    },
+    methods: {
+        post: function(){
+            this.$http.post('http://jsonplaceholder.typicode.com/posts', {
+                title: this.blog.title,
+                body: this.blog.content,
+                userId: 1
+            }).then(function(data){
+                console.log(data);
+                this.submitted = true;
+            });
+        }
+    }
+}
+</script>
+
+<style scoped>
+#add-blog *{
+    box-sizing: border-box;
+}
+#add-blog{
+    margin: 20px auto;
+    max-width: 500px;
+}
+label{
+    display: block;
+    margin: 20px 0 10px;
+}
+input[type="text"], textarea{
+    display: block;
+    width: 100%;
+    padding: 8px;
+}
+#preview{
+    padding: 10px 20px;
+    border: 1px dotted #ccc;
+    margin: 30px 0;
+}
+h3{
+    margin-top: 10px;
+}
+#checkboxes input{
+    display: inline-block;
+    margin-right: 10px;
+}
+#checkboxes label{
+    display: inline-block;
+    margin-top: 0;
+}
+</style>

src/components/header.vue

@@ -0,0 +1,39 @@
+<template>
+    <nav>
+        <ul>
+            <li><router-link to="/" exact>Blog</router-link></li>
+            <li><router-link to="/add" exact>Add a new blog</router-link></li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+ul{
+    list-style-type: none;
+    text-align: center;
+    margin: 0;
+}
+li{
+    display: inline-block;
+    margin: 0 10px;
+}
+a{
+    color: #fff;
+    text-decoration: none;
+    padding: 6px 8px;
+    border-radius: 10px;
+}
+nav{
+    background: #444;
+    padding: 14px 0;
+    margin-bottom: 40px;
+}
+.router-link-active{
+    background: #eee;
+    color: #444;
+}
+</style>

src/components/listBlogs.vue

@@ -0,0 +1,42 @@
+<template>
+    <div id="show-blogs">
+        <h1>List Blog Titles</h1>
+        <input type="text" v-model="search" placeholder="search blogs" />
+        <div v-for="blog in filteredBlogs" class="single-blog">
+            <h2>{{ blog.title }}</h2>
+        </div>
+    </div>
+</template>
+
+<script>
+// Imports
+import searchMixin from '../mixins/searchMixin';
+
+export default {
+    data () {
+        return {
+            blogs: [],
+            search: ''
+        }
+    },
+    created() {
+        this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
+            this.blogs = data.body.slice(0,10);
+        });
+    },
+    mixins: [searchMixin]
+}
+</script>
+
+<style>
+#show-blogs{
+    max-width: 800px;
+    margin: 0px auto;
+}
+.single-blog{
+    padding: 20px;
+    margin: 20px 0;
+    box-sizing: border-box;
+    background: #eee;
+}
+</style>