7 年之前 · 92e925967c
--- a/lesson5/code.js
+++ b/lesson5/code.js
@@ -2,12 +2,23 @@
 
				 const app = new Vue({
			
 
				   el: '#root',
			
 
				   data: {
			
 
				+    className: 'royal',
			
 
				+    isDisabled: false,
			
 
				+    isLoading: false,
			
 
				     title: "Now the title is set through JavaScript",
			
 
				   },
			
 
				 
			
 
				   methods: {
			
 
				     onClick(e) {
			
 
				       alert(e.target.textContent);
			
 
				+    },
			
 
				+
			
 
				+    setDisabled() {
			
 
				+      this.isDisabled = true;
			
 
				+    },
			
 
				+
			
 
				+    toggleClass() {
			
 
				+      this.isLoading = !this.isLoading;
			
 
				     }
			
 
				   },
			
 
				 });
			
--- a/lesson5/index.html
+++ b/lesson5/index.html
@@ -7,8 +7,11 @@
 
				   </head>
			
 
				   <body>
			
 
				     <div id="root">
			
 
				+      <h1 :class="className">Heading 1</h1>
			
 
				       <button v-on:click="onClick" v-bind:title="title">Hover over me</button>
			
 
				       <button @click="onClick" :title="title">Over me too</button>
			
 
				+      <button @click="toggleClass" :class="{ 'is-loading': isLoading }">Toggle me</button>
			
 
				+      <button @click="setDisabled" :disabled="isDisabled">Try to click me</button>
			
 
				     </div>
			
 
				 
			
 
				     <script src="../lib/vue-2.1.3.js"></script>
			
--- a/lesson5/styles.css
+++ b/lesson5/styles.css
@@ -1,3 +1,19 @@
 
				+button {
			
 
				+  display: block;
			
 
				+}
			
 
				+
			
 
				 [v-cloak] {
			
 
				   display: none;
			
 
				 }
			
 
				+
			
 
				+.royal {
			
 
				+  color: red;
			
 
				+}
			
 
				+
			
 
				+.cardinal {
			
 
				+  color: purple;
			
 
				+}
			
 
				+
			
 
				+.is-loading {
			
 
				+  background-color: red;
			
 
				+}