Add shortcuts to Vue.js

Note: You can use: - @click instead v-on:click - :href instead v-bind:href
sicktastic · Sep 15, 2017 · d763cf3 · d763cf3
1 parent f070eab
commit d763cf3
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/vuejs/shortcuts.html b/vuejs/shortcuts.html
@@ -0,0 +1,41 @@
+<!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 @click="changeLink" class="btn btn-block btn-primary">Click to Change Link</button>
+              <br />
+              <a :href="link">Link</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script charset="utf-8">
+      new Vue({
+        el: '#app',
+        data: {
+          link: 'http://anthonylee.io'
+        },
+        methods: {
+          changeLink: function() {
+            this.link = 'https://lunamisoo.org'
+          }
+        }
+      });
+    </script>
+  </body>
+</html>