Si queréis encontrar este tema en la documentación, esta en este apartado: https://vuejs.org/v2/guide/conditional.html
Introducción
Bienvenidos al Curso Profesional de VueJS
Introducción a VueJS
CLI y Dev Tools
Herramientas y Experiencia de Desarrollo + Archivos .vue
CLI - Hello World
Webpack
Babel
Eslint
SASS y BULMA
PUG
Ejercicio de SASS y PUG
Ejercicio Avanzado de Pug y SASS
Manipulación del DOM
Expresiones
Directivas
Data Binding
Computed properties
Watchers
Eventos
Integración a Platzi Music
Ejercicio de Manipulación del DOM
REST y HTTP
Servicios
Fetch API & Trae
Consumir API's REST
Sistema de Componentes
Component
Creación de componentes
Reactividad
Ciclo de vida
Comunicación entre componentes padres e hijos
Comunicación de hijos hacia padres
Utilización de Slots
Comunicacion entre Componentes Genericos - Event Bus y Plugins
Vue Router
Introducción a Vue Router
Instalar vue-router y configurar router view
Crear y Navegar Rutas con router-link
Extendiendo VueJS
Modifiers
Filtros
Directivas Personalizadas
Mixins
Clases, Animaciones y Transiciones36
Vue Transitions y Animaciones de CSS
Vuex
Estado Centralizado, Flux y Vuex
State
Mutations
Getters
Actions
Integración a Platzi Music
Nuxt.js
Server Side Rendering
Nuxt.js
Conceptos Básicos de Nuxt
Deploy a Producción con Now
Qué es now
Configuración de now y deploy
Conclusiones
Cierre del curso
Bonus
Internacionalización con vue-i18n
Unit Test Karma - Mocha & Webpack
Implementación de Autenticación de Usuarios en Vue usando JWT
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Las Directivas son pequeños marcadores o atributos que podemos agregar a nuestros elementos HTML que nos sirven para aplicar transformaciones en esos mismos elementos.
Aportes 10
Preguntas 1
Si queréis encontrar este tema en la documentación, esta en este apartado: https://vuejs.org/v2/guide/conditional.html
Existen dos directivas en Vue para mostrar contenido condicional: v-if
& v-show
.
v-if
nos renderiza el elemento en el DOM cuando la condición se cumple, mientras que v-show
nos muestra el elemento que ya se encuentra renderizado en el DOM.
De esta forma, dependiendo de la interacción que tendrá el usuario, nos convendrá usar una u otra.
Si un elemento será constantemente mostrado/ocultado, nos conviene que ya esté renderizado para una mejor performance mediante v-if
.
Mientras que si el elemento se mostrará eventualmente dado un evento específico, nos conviene renderizarlo sólo en ese instante mediante v-show
.
Las directiva Vue se utilizan para manipular el dom estas comienzan con “v” que se refiere al nombre del FromeWork, existe muchas directivas algunas para los eventos como v-on como tambien para interactuar que son v-show, v-if, v-else, v-else-if.
Con las directivas podemos controlar el DOM, prácticamente nos permite usar las estructuras de control de JavaScript y poco más
Esto igual se ve en el curso básico, es una estructura un poco extraña pero te acostumbras xD
PD. Para usar v-for SIEMPRE debes poner v-bind:key para especificar la key del elemento
poniendo en práctica esta clase 🙂:
<template lang="pug">
#app
input(v-model="name")
br
label {{ name }}
br
a(:href="name") GO
h2 Has Click sobre el mono para ver varias páginas de prueba
span(@click="watchListOFlinks" :class="listOFlinks ? 'red' : 'green'") {{ listOFlinks ? '🙉' : '🙈'}}
ul(style="list-style: none;" v-show="listOFlinks")
li(v-for="i in listLinks" @click="valueInput(i.jw)") {{ i.jw }}
li(v-for="i in listLinks" @click="valueInput(i.facebook)") {{ i.facebook }}
li(v-for="i in listLinks" @click="valueInput(i.youtube)") {{ i.youtube }}
li(v-for="i in listLinks" @click="valueInput(i.google)") {{ i.google }}
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
data() {
return {
name: '',
url:'http://jw.org',
listLinks: [{ jw:'https://jw.org', facebook:'https://facebook.com', youtube:'https://youtube.com', google:'https://google.com' }],
listOFlinks: false
}
},
methods: {
watchListOFlinks() {
this.listOFlinks = !this.listOFlinks;
},
valueInput(key) {
this.name = key;
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red {
background-color: red;
font-size: 45px;
padding: 16px;
}
.green {
background-color: green;
font-size: 45px;
padding: 16px;
}
</style>
Como recomendacion les diria que mejor buscaran aislar esa logica y ponerla fuera del template, para que sea mas facil de entender
Presiento que esto de ESLint mejorará mis prácticas de programación. si bien basta con leer las recomendaciones y aplicarlas al código. Ahora tengo un inspector que no me deja hacer lo que yo quiera.
Todo con buenas prácticas
En Vue.js, una directiva es el término usado para referirse a algunos atributos especiales, identificados con v-, que le indican a Vue.js que debe realizar ciertos cambios en un elemento del DOM, cada vez que la expresión asociada con dicha directiva cambie.
👌
como dice @jhojangarcia eslint detecta como error cuando no pones key="" en el v-for, el key será el identificador que es unico.
para ello podemos poner un index asi:
v-for="(index, i) in items" :key="index"
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.