added lesson 5 code

Shaun Pelling · Shaun Pelling · commit 22dbecbd80a1 · 2017-03-27T15:54:49.000+01:00
diff --git a/app.js b/app.js
@@ -1,13 +1,20 @@
 new Vue({
     el: '#vue-app',
     data: {
-        name: 'Shaun',
-        job: 'Ninja',
-        website: 'http://www.thenetninja.co.uk'
+        age: 25,
+        x: 0,
+        y: 0
     },
     methods: {
-        greet: function(time){
-            return 'Good ' + time + ', ' + this.name;
+        add: function(inc){
+            this.age += inc;
+        },
+        subtract: function(dec){
+            this.age -= dec;
+        },
+        updateXY: function(event){
+            this.x = event.offsetX;
+            this.y = event.offsetY;
         }
     }
 });
diff --git a/index.html b/index.html
@@ -8,9 +8,13 @@
     </head>
     <body>
         <div id="vue-app">
-            <h1>Data Binding</h1>
-            <a v-bind:href="website">The Net Ninja Website</a>
-            <input type="text" v-bind:value="name" />
+            <h1>Events</h1>
+            <button v-on:click="add(1)">Add a Year</button>
+            <button v-on:click="subtract(1)">Subtract a Year</button>
+            <button v-on:dblclick="add(10)">Add 10 Years</button>
+            <button v-on:dblclick="subtract(10)">Subtract 10 Years</button>
+            <p>My age is {{age}}</p>
+            <div id="canvas" v-on:mousemove="updateXY">{{ x }} , {{ y }}</div>
         </div>
     </body>
 
diff --git a/styles.css b/styles.css
@@ -0,0 +1,6 @@
+#canvas{
+    width: 600px;
+    padding: 200px 20px;
+    text-align: center;
+    border: 1px solid #333;
+}
