9 年前 · 1a3ca1161c
--- a/lesson4/code.js
+++ b/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 = '';
			
 
				+    },
			
 
				+  },
			
 
				+});
			
 
				+
			
 
				+
			
--- a/lesson4/index.html
+++ b/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>
			
--- a/lesson4/styles.css
+++ b/lesson4/styles.css
@@ -0,0 +1,3 @@
 
				+[v-cloak] {
			
 
				+  display: none;
			
 
				+}