added lesson 21 code example

Shaun Pelling · Shaun Pelling · commit 7429107cf440 · 2017-03-30T21:32:32.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,34 @@
 <template>
     <div>
-        <h1>{{ title }}</h1>
-        <ninjas></ninjas>
+        <app-header></app-header>
+        <app-ninjas></app-ninjas>
+        <app-footer></app-footer>
     </div>
 </template>
 
 <script>
 // Imports
-import Ninjas from './Ninjas.vue';
+import Header from './components/Header.vue';
+import Footer from './components/Footer.vue';
+import Ninjas from './components/Ninjas.vue';
 
 export default {
     components: {
-        'ninjas': Ninjas
+        'app-header': Header,
+        'app-footer': Footer,
+        'app-ninjas': Ninjas
     },
     data () {
         return {
-          title: 'Ninja App'
+
         }
     }
 }
 </script>
 
 <style>
-h1{
-    color: purple;
+body{
+    margin: 0;
+    font-family: 'Nunito SemiBold';
 }
 </style>
diff --git a/src/Ninjas.vue b/src/Ninjas.vue
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -0,0 +1,24 @@
+<template>
+    <footer>
+        <p>{{ copyright }}</p>
+    </footer>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            copyright: 'Copyright 2017 Vue Ninjas'
+        }
+    }
+}
+</script>
+<style scoped>
+footer{
+    background: #222;
+    padding: 6px;
+}
+p{
+        color: lightgreen;
+        text-align: center;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,24 @@
+<template>
+    <header>
+        <h1>{{ title }}</h1>
+    </header>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            title: 'Vue Ninjas'
+        }
+    }
+}
+</script>
+<style scoped>
+header{
+    background: lightgreen;
+    padding: 10px;
+}
+h1{
+    color: #222;
+    text-align: center;
+}
+</style>
diff --git a/src/components/Ninjas.vue b/src/components/Ninjas.vue
@@ -0,0 +1,49 @@
+<template>
+    <div id="ninjas">
+        <ul>
+            <li v-for="ninja in ninjas" v-on:click="ninja.show = !ninja.show">
+                <h2>{{ ninja.name }}</h2>
+                <h3 v-show="ninja.show">{{ ninja.speciality }}</h3>
+            </li>
+        </ul>
+    </div>
+</template>
+<script>
+export default {
+    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}
+            ]
+        }
+    }
+}
+</script>
+<style scoped>
+#ninjas{
+    width: 100%;
+    max-width: 1200px;
+    margin: 40px auto;
+    padding: 0 20px;
+    box-sizing: border-box;
+}
+ul{
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 0;
+}
+li{
+    flex-grow: 1;
+    flex-basis: 300px;
+    text-align: center;
+    padding: 30px;
+    border: 1px solid #222;
+    margin: 10px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
@@ -1,8 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-//import Ninjas from './Ninjas.vue'
-
-//Vue.component('ninjas', Ninjas);
 
 new Vue({
   el: '#app',
