Add Vue.js watch example

sicktastic · Sep 15, 2017 · f070eab · f070eab
1 parent 9bb3151
commit f070eab
Showing 1 changed file with 65 additions and 0 deletions.
diff --git a/vuejs/computed_property_watch.html b/vuejs/computed_property_watch.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Listening to Events</title>
+    <script src="https://unpkg.com/vue/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
+  </head>
+
+  <body>
+
+    <div class="container" style="margin-top: 100px;">
+      <div class="col-4 offset-4">
+        <div id="app">
+          <div class="card">
+            <div class="card-block">
+              <button v-on:click="sayHello" class="btn btn-block btn-warning">Say Hello</button>
+              <button v-on:click="counter++" class="btn btn-block btn-success">Increase</button>
+              <button v-on:click="counter--" class="btn btn-block btn-danger">Decrease</button>
+              <button v-on:click="secondCounter++" class="btn btn-block btn-default">Second Counter</button>
+              <br />
+              <br />
+              <p>{{ counter }} || {{ secondCounter }} </p>
+              <p>{{ result() }} || {{ output }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script charset="utf-8">
+      new Vue({
+        el: '#app',
+        data: {
+          counter: 0,
+          secondCounter: 0
+        },
+        computed: {
+          output: function() {
+            console.log("Computed");
+            return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
+          }
+        },
+        watch: {
+          counter: function(value) {
+            var vm = this;
+            setTimeout(function() {
+              vm.counter = 0;
+            }, 2000)
+          }
+        },
+        methods: {
+          sayHello: function() {
+            alert("Hello, there.");
+          },
+          result: function() {
+            console.log("Method");
+            return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
+          }
+        }
+      })
+    </script>
+  </body>
+</html>