07.-Vue js 2 tutorial español ? [created,mounted,updated,destroyed]??
Introducción
En este tutorial les tengo 2 noticias una mala y una buena:
La mala es que vamos a trabajar con teoría 🙁
La buena es que vamos a ver esa teoría con practica 🙂 .
Ademas esto que vamos a aprender hoy nos funcione para los siguientes tutoriales asi que si o si tienes que ver este video para entender los demás.
en realidad es muy simple lo que aprenderemos y son los elementos que se se cargan en vue que son estos:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
Codigo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Vuejs</title>
</head>
<body>
<div id="elemento">
<button @click="texto='hola cambiado'">Cambiar</button>
<button @click="destruir()">Destruir</button>
{{texto}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const con=new Vue({
el:"#elemento",
data:{
texto:'hola'
},methods: {
destruir(){
this.$destroy();
}
},
beforeCreate() {
console.log('beforeCreate');
console.log(this.texto);
},
created() {
console.log('created');
console.log(this.texto);
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
})
</script>
</html>
Codigo github.com: https://github.com/programadornovato/vuejs
Codigo en codepen.io: https://codepen.io/programadornovato/pen/VOxdaP
Codigo en codepen.io: https://codepen.io/programadornovato/pen/VOxdaP
Video
Ave que vuela, a la cazuela.