From def98067b919fdd08ef5a7a17eeaf1cecc284070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sergio=20=C3=81lvarez?= <code@sergio.am>
Date: Sat, 9 Nov 2019 12:09:41 +0100
Subject: [PATCH] basic hello world

---
 README.md        |  1 +
 hello/app.js     | 24 ++++++++++++++++++++++++
 hello/index.html | 35 +++++++++++++++++++++++++++++++++++
 hello/style.css  |  8 ++++++++
 4 files changed, 68 insertions(+)
 create mode 100644 README.md
 create mode 100644 hello/app.js
 create mode 100644 hello/index.html
 create mode 100644 hello/style.css
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..936b5ef
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+Following the Vue.js Guide: https://vuejs.org/v2/guide/
diff --git a/hello/app.js b/hello/app.js
new file mode 100644
index 0000000..db7aaea
--- /dev/null
+++ b/hello/app.js
@@ -0,0 +1,24 @@
+
+Vue.component('todo-item', {
+    props: ['todo'],
+    template: '<li>{{ todo.text }}</li>'
+})
+
+var app = new Vue({
+    el: '#app',
+    data: {
+        message: 'Hello Vue!',
+        showspan: true,
+        todos: [
+            { id: 1, text: 'Learn JavaScript' },
+            { id: 2, text: 'Learn Vue' },
+            { id: 3, text: 'Build something awesome' }
+        ],
+        label: 'You loaded this page on ' + new Date().toLocaleString()
+    },
+    methods: {
+        reverseMessage: function () {
+            this.message = this.message.split('').reverse().join('')
+        }
+    }
+})
diff --git a/hello/index.html b/hello/index.html
new file mode 100644
index 0000000..88d7c88
--- /dev/null
+++ b/hello/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>titleee</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="https://vuejs.org/js/vue.js"></script><!-- dev version -->
+    </head>
+
+    <body>
+        <div id="app">
+            <p v-bind:title="label">
+                {{ message }}
+                <button v-on:click="showspan = !showspan">toggle</button>
+                <transition name="fade">
+                    <span v-if="showspan">Now you see me</span>
+                </transition>
+            </p>
+
+            <ol>
+                <todo-item
+                    v-for="item in todos"
+                    v-bind:todo="item"
+                    v-bind:key="item.id">
+                </todo-item>
+            </ol>
+
+            <button v-on:click="reverseMessage">Reverse Message</button>
+
+            <input v-model="message">
+        </div>
+        
+        <script src="app.js"></script>
+    </body>
+</html>
diff --git a/hello/style.css b/hello/style.css
new file mode 100644
index 0000000..c4eb67f
--- /dev/null
+++ b/hello/style.css
@@ -0,0 +1,8 @@
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
