s5e75 lifecycle

2018-04-15 23:33:40 -04:00 · 2018-04-15 23:33:40 -04:00 · 8106085e2d
commit 8106085e2d
parent 0be4aad7da
2 changed files with 33 additions and 33 deletions
--- a/lessons/app.js
+++ b/lessons/app.js
@ -1,10 +1,35 @@
 var app = new Vue({
  el: '#app',
  data: {
-    ingredients: ['meat', 'fruit', 'cookies'],
-    persons: [
-      {name: "Max", age: 33, color: "red"},
-      {name: "Tyrel", age: 30, color: "blue"},
-    ]
+    title: "The VueJS nstance"
+  },
+  beforeCreate(){
+    console.log("Created");
+  },
+  created(){
+    console.log("created");
+  },
+  beforeMount(){
+    console.log("beforeMount");
+  },
+  mounted(){
+    console.log("mounted");
+  },
+  beforeUpdate(){
+    console.log("before update");
+  },
+  updated(){
+    console.log("updated");
+  },
+  beforeDestroy(){
+    console.log("before destroy");
+  },
+  destroyed(){
+    console.log("destroyed");
+  },
+  methods:{
+    destroy(){
+      this.$destroy();
+    }
  }
 });
--- a/lessons/index.html
+++ b/lessons/index.html
@ -7,34 +7,9 @@
  </head>
  <body>
    <div id='app'>
-      <ul>
-        <li v-for="(ingredient, i) in ingredients" :key="ingredient">
-           ({{i+1}}) {{ ingredient }}
-        </li>
-      </ul>
-      <button @click="ingredients.push('spices')"> Add New</button>
-
-      <hr>
-      <template v-for="(ingredient, index) in ingredients">
-        <h1>{{ingredient}}</h1>
-        <p>{{index}}</p>
-      </template>
-      <hr>
-
-      <ul>
-
-        <li v-for="person in persons">
-            <div v-for="(value, key, index) in person">
-              {{key}}: {{value}} - {{index}}
-            </div>
-        </li>
-      </ul>
-      <hr>
-
-      <span v-for="n in 10">{{n}} </span>
-
-
-
+        {{title}}
+        <button @click="title = 'changed'">click</button>
+        <button @click="destroy"> destroy </button>
    </div>
    <script src="app.js" charset="utf-8"></script>
  </body>