added lesson 34 code

Shaun Pelling · Shaun Pelling · commit 14aa9abf8a55 · 2017-04-03T14:16:10.000+01:00
diff --git a/src/components/showBlogs.vue b/src/components/showBlogs.vue
@@ -1,8 +1,8 @@
 <template>
-    <div id="show-blogs">
+    <div v-theme:column="'narrow'" id="show-blogs">
         <h1>All Blog Articles</h1>
         <div v-for="blog in blogs" class="single-blog">
-            <h2>{{ blog.title }}</h2>
+            <h2 v-rainbow>{{ blog.title }}</h2>
             <article>{{ blog.body }}</article>
         </div>
     </div>
diff --git a/src/main.js b/src/main.js
@@ -5,6 +5,27 @@ import App from './App.vue'
 // Use vue-resource package
 Vue.use(VueResource);
 
+// Custom directives
+Vue.directive('rainbow', {
+    bind(el, binding, vnode){
+        el.style.color = "#" + Math.random().toString(16).slice(2, 8);
+    }
+});
+
+Vue.directive('theme', {
+    bind(el, binding, vnode){
+        if (binding.value == 'wide'){
+            el.style.maxWidth = "1260px";
+        } else if (binding.value = 'narrow'){
+            el.style.maxWidth = "560px";
+        }
+        if(binding.arg == 'column'){
+            el.style.background = '#ddd';
+            el.style.padding = '20px';
+        }
+    }
+});
+
 new Vue({
   el: '#app',
   render: h => h(App)
