Gilberto 🦁 PRO
Desarrollo visualizaciones y aplicaciones en línea, colaboro con distintos medios digitales
Programación web dinámica
Más Vue
<script>
import Formulario from "./components/Formulario.vue";
export default {
components: {
Formulario,
},
};
</script>
<template>
<div id="app">
<Formulario />
</div>
</template>
Componentes
<script>
import { ref, reactive } from "vue";
import HolaMundo from "./HolaMundo.vue";
export default {
setup() {
const persona = reactive({
nombre: "Fulano de tal",
email: "fulano@nadiesabe.com",
matricula: ref(""),
});
const edad = ref(20);
function actualizarPersona() {
console.log(persona);
persona.nombre = "Mengano de tal";
}
function aumentarEdad() {
console.log(edad);
edad.value++;
}
return {
persona,
edad,
actualizarPersona,
aumentarEdad,
};
},
components: { HolaMundo },
};
</script>
<template>
<HolaMundo />
<div>
<h2>Perfil</h2>
<p>nombre: {{ persona.nombre }}</p>
<p>Edad: {{ edad }}</p>
<label><input type="text" v-model="persona.matricula" /></label>
<button @click="actualizarPersona">Actualizar persona</button>
<button @click="aumentarEdad">Aumentar edad</button>
</div>
</template>
App.vue
Formulario.vue
<script>
import Formulario from "./components/Formulario.vue";
export default {
components: {
Formulario,
},
};
</script>
<template>
<div id="app">
<Formulario />
</div>
</template>
Componentes
<script>
import { ref, reactive } from "vue";
import HolaMundo from "./HolaMundo.vue";
export default {
setup() {
const persona = reactive({
nombre: "Fulano de tal",
email: "fulano@nadiesabe.com",
matricula: ref(""),
});
const edad = ref(20);
function actualizarPersona() {
console.log(persona);
persona.nombre = "Mengano de tal";
}
function aumentarEdad() {
console.log(edad);
edad.value++;
}
return {
persona,
edad,
actualizarPersona,
aumentarEdad,
};
},
components: { HolaMundo },
};
</script>
<template>
<HolaMundo />
<div>
<h2>Perfil</h2>
<p>nombre: {{ persona.nombre }}</p>
<p>Edad: {{ edad }}</p>
<label><input type="text" v-model="persona.matricula" /></label>
<button @click="actualizarPersona">Actualizar persona</button>
<button @click="aumentarEdad">Aumentar edad</button>
</div>
</template>
App.vue
Formulario.vue
<script>
import { ref } from "vue";
export default {
setup() {
const elementos = ref([
{ numero: 1, palabra: "Uno" },
{ numero: 2, palabra: "Dos" },
{ numero: 3, palabra: "Tres" },
{ numero: 4, palabra: "Cuatro" },
{ numero: 5, palabra: "Cinco" },
{ numero: 6, palabra: "Seis" },
{ numero: 7, palabra: "Siete" },
{ numero: 8, palabra: "Ocho" },
{ numero: 9, palabra: "Nueve" },
{ numero: 10, palabra: "Diez" },
]);
console.log(elementos);
return { elementos };
},
};
</script>
<template>
<div>
<ul>
<li v-for="elemento in elementos" :key="elemento.numero">
{{ elemento.palabra }}
</li>
</ul>
</div>
</template>
Ciclos
<script>
import Lista from "./components/Lista.vue";
export default {
components: {
Lista,
},
};
</script>
<template>
<div id="app">
<Lista />
</div>
</template>
Lista.vue
App.vue
<script>
import { ref } from "vue";
export default {
setup() {
const elementos = ref([
{ numero: 1, palabra: "Uno" },
{ numero: 2, palabra: "Dos" },
{ numero: 3, palabra: "Tres" },
{ numero: 4, palabra: "Cuatro" },
{ numero: 5, palabra: "Cinco" },
{ numero: 6, palabra: "Seis" },
{ numero: 7, palabra: "Siete" },
{ numero: 8, palabra: "Ocho" },
{ numero: 9, palabra: "Nueve" },
{ numero: 10, palabra: "Diez" },
]);
console.log(elementos);
return { elementos };
},
};
</script>
<template>
<div>
<ul>
<li v-for="elemento in elementos" :key="elemento.numero">
<template v-if="elemento.numero % 2 == 0">
{{ elemento.palabra }}
</template>
</li>
</ul>
</div>
</template>
Ciclos
<script>
import Lista from "./components/Lista.vue";
export default {
components: {
Lista,
},
};
</script>
<template>
<div id="app">
<Lista />
</div>
</template>
Lista.vue
App.vue
<script>
import { ref } from "vue";
export default {
setup() {
const elementos = ref([
{ numero: 1, palabra: "Uno" },
{ numero: 2, palabra: "Dos" },
{ numero: 3, palabra: "Tres" },
{ numero: 4, palabra: "Cuatro" },
{ numero: 5, palabra: "Cinco" },
{ numero: 6, palabra: "Seis" },
{ numero: 7, palabra: "Siete" },
{ numero: 8, palabra: "Ocho" },
{ numero: 9, palabra: "Nueve" },
{ numero: 10, palabra: "Diez" },
]);
console.log(elementos);
return { elementos };
},
};
</script>
<template>
<div>
<ul>
<template v-for="elemento in elementos" :key="elemento.numero">
<template v-if="elemento.numero % 2 == 0">
<li>{{ elemento.palabra }}</li>
</template>
</template>
</ul>
</div>
</template>
Ciclos
<script>
import Lista from "./components/Lista.vue";
export default {
components: {
Lista,
},
};
</script>
<template>
<div id="app">
<Lista />
</div>
</template>
Lista.vue
App.vue
<script>
import { ref } from "vue";
import Elemento from "./Elemento.vue";
export default {
setup() {
const elementos = ref([
{ numero: 1, palabra: "Uno" },
{ numero: 2, palabra: "Dos" },
{ numero: 3, palabra: "Tres" },
{ numero: 4, palabra: "Cuatro" },
{ numero: 5, palabra: "Cinco" },
{ numero: 6, palabra: "Seis" },
{ numero: 7, palabra: "Siete" },
{ numero: 8, palabra: "Ocho" },
{ numero: 9, palabra: "Nueve" },
{ numero: 10, palabra: "Diez" },
]);
console.log(elementos);
return { elementos };
},
components: { Elemento },
};
</script>
<template>
<div>
<ul>
<template v-for="elemento in elementos">
<Elemento
v-if="elemento.numero % 2 == 0"
:numero="elemento.numero"
:palabra="elemento.palabra"
/>
</template>
</ul>
</div>
</template>
Props
<script>
import { ref, computed } from "vue";
export default {
props: { numero: Number, palabra: String },
setup(props) {
console.log(props);
const numeroConLetra = computed(() => {
return `${props.numero} - ${props.palabra}`;
});
return { numeroConLetra };
},
};
</script>
<template>
<li :key="numero">{{ numeroConLetra }}</li>
</template>
Lista.vue
Elemento.vue
<script>
import { ref, reactive, watch } from "vue";
import HolaMundo from "./HolaMundo.vue";
export default {
setup() {
const persona = reactive({
nombre: "Fulano de tal",
email: "fulano@nadiesabe.com",
matricula: ref(""),
});
const edad = ref(20);
function actualizarPersona() {
console.log(persona);
persona.nombre = "Mengano de tal";
}
function aumentarEdad() {
console.log(edad);
edad.value++;
}
watch(persona, (persona) => {
console.log(
`En este momento la matricula tiene un valor de ${persona.matricula}`
);
});
return {
persona,
edad,
actualizarPersona,
aumentarEdad,
};
},
components: { HolaMundo },
};
</script>
<template>
<HolaMundo />
<div>
<h2>Perfil</h2>
<p>nombre: {{ persona.nombre }}</p>
<p>Edad: {{ edad }}</p>
<label><input type="text" v-model="persona.matricula" /></label>
<button @click="actualizarPersona">Actualizar persona</button>
<button @click="aumentarEdad">Aumentar edad</button>
</div>
</template>
Watchers
<script>
import Formulario from "./components/Formulario.vue";
export default {
components: {
Formulario,
},
};
</script>
<template>
<div id="app">
<Formulario />
</div>
</template>
Formulario.vue
App.vue
Programación web dinámica: Más Vue
By Gilberto 🦁
Programación web dinámica: Más Vue
Más Vue
- 15
