Browse Source

lesson 4: vue event listeners with v-on/@.

Frederic G. MARAND 7 years ago
parent
commit
1a3ca1161c
3 changed files with 42 additions and 0 deletions
  1. 17 0
      lesson4/code.js
  2. 22 0
      lesson4/index.html
  3. 3 0
      lesson4/styles.css

+ 17 - 0
lesson4/code.js

@@ -0,0 +1,17 @@
+
+const app = new Vue({
+  el: '#root',
+  data: {
+    names: ['Joe', 'Mary', 'Jane', 'Jack'],
+    newName: '',
+  },
+
+  methods: {
+    addName() {
+      this.names.push(this.newName);
+      this.newName = '';
+    },
+  },
+});
+
+

+ 22 - 0
lesson4/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div id="root">
+      <ul>
+        <li v-for="name in names" v-text="name"></li>
+      </ul>
+
+      <input v-model="newName" type="text" />
+      <button @click="addName">Add name</button>
+      {{/* Delete last name */}}
+    </div>
+
+    <script src="../lib/vue-2.1.3.js"></script>
+    <script src="code.js"></script>
+  </body>
+</html>

+ 3 - 0
lesson4/styles.css

@@ -0,0 +1,3 @@
+[v-cloak] {
+  display: none;
+}