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>

Video

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en Español 2022]

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en Español 2022]

Twilio es una página web que nos permite enviar mensajes de texto vía Whatsapp. El…

3 semanas hace
📱 Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

📱 Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

En este tutorial vamos a terminar de hacer nuestro cronómetro y le agregaremos horas minutos…

4 semanas hace
📱 Crear un cronometro de cuenta regresiva en Android Studio [29]

📱 Crear un cronometro de cuenta regresiva en Android Studio [29]

En este tutorial vamos a crear un cronometro que cuent de un tiempo inicial a…

4 semanas hace
📱 Colocar un progressbar WebView en Android Studio [28]

📱 Colocar un progressbar WebView en Android Studio [28]

En este tutorial vamos colocar un progressbar (Barra de progreso) a nuestro WebView para ver…

4 semanas hace
📱 Detectar error al cargar WebView en Android Studio [27]

📱 Detectar error al cargar WebView en Android Studio [27]

En este tutorial vamos a detectar si nuestra página web cargo exitosamente o tuvo algún…

4 semanas hace
📱 Cargar una pagina web con WebView en Android Studio [26]

📱 Cargar una pagina web con WebView en Android Studio [26]

En este tutorial vamos a cargar una página web dentro de nuestro activity con la…

4 semanas hace