tyrel/learnin-some-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

s5e75 lifecycle

Browse Source
This commit is contained in:
Tyrel Souza 2018-04-15 23:33:40 -04:00
parent 0be4aad7da
commit 8106085e2d
No known key found for this signature in database
GPG Key ID: 5A9394D4C30AEAC0
2 changed files with 33 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
lessons/app.js
View File

@ -1,10 +1,35 @@
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
data: { data: {
ingredients: ['meat', 'fruit', 'cookies'], title: "The VueJS nstance"
persons: [ },
{name: "Max", age: 33, color: "red"}, beforeCreate(){
{name: "Tyrel", age: 30, color: "blue"}, 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();
}
} }
}); });

31
lessons/index.html
View File

@ -7,34 +7,9 @@
</head> </head>
<body> <body>
<div id='app'> <div id='app'>
<ul> {{title}}
<li v-for="(ingredient, i) in ingredients" :key="ingredient"> <button @click="title = 'changed'">click</button>
({{i+1}}) {{ ingredient }} <button @click="destroy"> destroy </button>
</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>
</div> </div>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>