<!-- Interpolación -->
<span>{{ nombre }}</span>
<!-- Interpolación de métodos (debe retornar algo que se pueda mostrar) -->
<span>{{ mostrarMensaje() }}</span><input type="text" v-model="nombre"><ul>
<li v-for="pais in paises"> <!-- también puede ser "pais of paises" -->
{{ pais.nombre }}
</li>
</ul>
<!-- Ejemplo con índice -->
<ul>
<li v-for="(pais, i) of paises">
{{ i + 1 }} - {{ pais }}
</li>
</ul><!-- Con la etiqueta template de html podemos repetir estructuras mas complejas -->
<ul>
<template v-for="pais of paises">
<li>
{{pais}}
</li>
<hr>
</template>
</ul><!-- al recorrer un objeto se puede adquirir el nombre de la proiedad y el valor de esta -->
<ul>
<li v-for="(valor, prop) of persona">
{{ prop }} = {{ valor }}
</li>
</ul><span v-if="miVar">texto...</span>
<span v-if="miVar==5">texto...</span>
<span v-if="x==y">texto...</span>
<span v-else>texto...</span><!-- debe haber primero un v-if -->
<p v-if="num==1">parrafo 1</p>
<p v-else-if="num==2">parrafo 2</p>
<p v-else-if="num==3">parrafo 3</p>
<!-- también se puede poner un v-else para cuando no es ninguna de las anteriores -->
<p v-else>no es ningún parrafo</p><!-- es lo mismo que v-if pero este oculta el elemento con css -->
<p v-show="mostrar">texto...</p><!-- Enlazar una variable a una propiedad html -->
<img v-bind:src="img">
<!-- manera rápida -->
<img :src="img"><button v-on:click>ingresar</button>
<input v-on:keyup.enter="enviar()"></input>
<!-- manera rápida -->
<input @keyup.enter="enviar()"></input><!-- nos sirve para que reconosca etiquetas html desde la variable -->
<p v-html="texto"></p>data: {
texto: '<strong>Ejemplo de v-html</strong>'
}<!-- esta directiva tiene la misma función que la interpolación {{ algo }} -->
<p v-text="texto"></p><!-- .once ejecuta el evento solo una vez -->
<div v-on:click.once="metodo">
algo
</div>
<!-- .stop detiene la propagación del evento gatillado -->
<div v-on:mousemove.stop>
algo
</div>**💡TIP: ** se puede reemplazar v-on: por @ en los eventos, ejemplo: @click="metodo( )"
<template>
<!-- elementos html -->
</template>
<script>
export default{
props: ['parametro'], // recibe información desde componentes padres
data(){
return{
titulo: 'Hola mundo' // variables locales
}
},
methods: {
miFuncion(){ // funciones del componente
}
}
}
</script>
<style>
/* estilos CSS */
</style><!-- Componente padre -->
<template>
<nombre-componente :miPropiedad="miPropiedad"></nombre-componente>
</template><!-- Componente hijo -->
<script>
export default{
props: ['miPropiedad']
}
</script>💡Tip: También se pueden enviar metodos desde el componente padre al hijo.
<!-- Componente hijo -->
<script>
export default{
data(){
return{
valor: ''
}
}
methods: {
mandarInfo(){
// argumentos: 1. nombre del evento a emitir - 2. parametro a enviar al elemento padre
this.$emit('incrementar', this.valor)
}
}
}
</script><!-- Componente padre -->
<template>
<nombre-componente v-on:incrementar="total += $event"></nombre-componente>
<!-- $event es el parametro enviado desde el componente hijo -->
</template>
<script>
export default{
data(){
return {
total: 0
}
}
}
</script><script>
export default{
data(){
return {
props: { // se usa props como objeto, no como array
titulo: {
default: 'titulo por defecto'
}
}
}
}
}
</script>- beforeCreate( ) antes de que la instancia sea creada
- created( ) cuando la instancia ya ha sido creada
- beforeMount( ) antes de montar la plantilla en el DOM de la app
- mounted( ) cuando se ha montado la plantilla en el DOM
- beforeUpdate( ) antes que actualice información
- updated( ) una vez haya terminado la actualización
- beforeDestroy( ) antes de destruir la instancia, acá se cierra conexión a bd, etc.
- destroyed( ) cuando la instacia ha sido destruida
new Vue({
el: '#vm',
data: {
mensaje: 'Este es el mensaje'
},
beforeCreate(){
console.log('Llamando beforeCreate');
},
created(){
console.log('Llamando created');
},
beforeMount(){
console.log('Llamando beforeMount');
},
mounted(){
console.log('Llamando mounted');
},
beforeUpdate(){
console.log('Llamando beforeUpdate');
},
updated(){
console.log('Llamando updated');
},
beforeDestroy(){
console.log('Llamando beforeDestroy');
},
destroyed(){
console.log('Llamando destroyed');
},
activated(){
console.log('componente activo');
},
desactivated(){
console.log('componente inactivo');
}
methods : {
destruir : function(){
this.$destroy();
}
}
}) <!-- componente hijo -->
<template>
<slot></slot> <!-- slot por defecto -->
</template>
<!-- componente padre -->
<template>
<nombre-componente>
<h1>Hola mundo</h1> <!-- esta etiqueta se mostrará en el slot del componente hijo -->
</nombre-componente>
</template><!-- componente hijo -->
<template>
<form class="form">
<slot name="elementos"></slot>
<slot name="boton"></slot>
</form>
</template>
<!-- componente padre -->
<template>
<nombre-componente>
<div slot="elementos">
<label>Correo electrónico</label>
<input type="email">
</div>
<div slot="boton">
<button>Ingresar</button>
</div>
</nombre-componente>
</template><!-- componente padre -->
<template>
<button @click="componenteSeleccionado = 'formLogin'">Iniciar Sesión</button>
<button @click="componenteSeleccionado = 'formregister'">Registrar cuenta</button>
<component v-bind:is="componenteSeleccionado"></component>
</template>
<script>
import FormLogin from './components/FormLogin.vue'
import FormRegister from './components/FormRegister.vue'
export default{
components: {
formLogin: FormLogin,
formRegister: FormRegister
},
data(){
return{
componenteSeleccionado: 'formLogin'
}
}
}
</script><!-- componente padre -->
<template>
<button @click="componenteSeleccionado = 'formLogin'">Iniciar Sesión</button>
<button @click="componenteSeleccionado = 'formregister'">Registrar cuenta</button>
<keep-alive> <!-- no se destruye el componente -->
<component v-bind:is="componenteSeleccionado"></component>
</keep-alive>
</template>
<!-- componente hijo -->
<script>
export default{
// estos hooks puede ser muy utiles para componentes dinámicos
activated(){
console.log('componente activo');
},
desactivated(){
console.log('componente desactivado');
}
}
</script>// dentro del main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export const bus = new Vue({
data:{
// data en este caso queda como objeto, se pueden guardar variable globales
},
methods: {
actualizarContador(numTareas){
this.$emit('actualizarContador', numTareas)
}
}
}); // se exporta el bus
new Vue({
render: h => h(App),
}).$mount('#app')<!-- dentro del componente -->
<script>
import { bus } from './main.js'
export default{
methods: {
miFuncion(){
bus.actualizarContador(this.tareas.lenght)
}
}
}
</script>
<!-- dentro de otro componente -->
<script>
import { bus } from './main.js'
export default{
data(){
return {
varLocal: 0
}
},
created(){ // recordar que created es un ciclo de vida (hook)
bus.$on('actualizarContador', (valor) => {
this.varLocal = valor;
})
}
}
</script> <div class="vue">
<button v-on:click="primero++">Primero</button>
<button v-on:click="segundo++">Segundo</button>
<span>Primero = {{ primero }}</span>
<span>Segundo = {{ segundo }}</span>
<span>Total = {{ total }}</span>
</div>const app = new Vue({
el: '.vue',
data: {
primero: 0,
segundo: 0,
suma: 0
},
computed: { // va despues de data
total: function(){
return this.primero + this.segundo
}
}
})
// cada vez que haya un cambio relacionado con las variables comprometidas se ejecutará la función<!-- puede ser de gran utilidad en los forms para enviar solo un objeto con todos las propiedades que sean necesarias -->
<script>
export default {
data(){
return{
user: {
name: '',
email: '',
phone: ''
}
}
}
}
</script><template>
<!-- trim para eliminar los espacios en el texto -->
<input type="text" v-model.trim>
<!-- number para que el numero ingresado sea typeof number -->
<input type="text" v-model.number>
<!-- lazy para que el v-model haga su trabajo una vez que el focus sale del input -->
<input type="text" v-model.lazy>
</template><template>
<select v-model="pais">
<option v-for="pais in paises">{{ pais }}</option>
</select>
</template>
<script>
export default{
data(){
return{
paises: ['Chile', 'Peru', 'Argentina']
}
}
}
</script><template>
<label>
<input type="radio" name="optionRadios" value="hombre" v-model="usuario.genero">
</label>
<label>
<input type="radio" name="optionRadios" value="mujer" v-model="usuario.genero">
</label>
</template><template>
<label>
<input type="checkbox" value="acepto" v-model="usuario.condiciones">
Acepto condiciones
</label>
<label>
<input type="checkbox" value="acepto" v-model="usuario.condiciones">
Recibir newsletter
</label>
</template>
<script>
export default{
data(){
return{
usuario: {
condiciones: [] // se usa un array para mantener un orden en caso de tener mas de un checkbox, de lo contrario basta con una propiedad normal
}
}
}
}
</script><!-- componente -->
<template>
<span>{{ mensaje | mayuscula }}</span>
</template><!-- dentro del main.js -->
Vue.filter('mayuscula', (texto) => {
return texto.toUpperCase()
})💡 Tip: vue js no viene con filtros por defecto
- vue create nombreProyecto crea el proyecto.
- npm run serve ejecuta el proyecto.
- se puede referenciar a un objeto del dom ya sea con class (.nombre) o con id (#nombre) desde la instancia de Vue el: '.nombre' o '#nombre'.
- El componente
<template></template>solo puede tener un elemento root (solo una etiqueta html global). - props: en los components puede ser un array o un objeto.
- se puede enviar tanto variables como funciones al componente hijo usando v-bind:, por ejemplo, :miFuncion="miFuncion".
- en los slots las class de las etiquedas html toman el style del componente donde se encuentre el slot
- se puede agregar un slot por defecto sin nombre, este tomara cualquier elemento html que no tenga asginado un slot previo.