Directivas de Vue: Uso y Funciones Principales

Clase 13 de 53 • Curso Profesional de Vue.js 2

Resumen

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.

Jhojan Garcia

student•

Estoy usando la version de eslint: ^4.15.0 en vs code y al momento de hacer v-for me sacaba el error: "Elements in iteration expect to have ‘v-bind:key’ directives."
Lo solucione poniendo en el codigo

<li :key="i"  v-for="i in items">{{ i }}</li>

También se puede solucionar omitiendo esa regla del archivo .eslintrc

Nacho Anaya

teacher•

Excelente, de hecho es una buena practica siempre usar el :key.

Edward Steven Ramos Palacios

teacher•

Esta bien, pero una mejor forma de usar el :key seria con el index de cada item. Se debe garantizar que ese valor del atributo key no se repita en el array.
Te dejo un ejemplo.

<li :key="index"  v-for="(item, index) in items">{{ item.value }}</li>

KEVIN BRAYAN LUNA FIGUEROA

student•

También cuando utilizamos el v-for podemos obtener el indice de cada elemento:

<ul>
	<li v-for="( i, index) in items">{{index}} {{ i }}</li>
</ul>

Benjamín Parra

student•

excelente aporta

Alejandro Narvaja

student•

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.

Paola Magali Ortiz Trigüis

student•

No sería al revés? v-show si es constantemente mostrado/ocultado y v-if si es solo eventualmente

Jesús Mur Fontanals

student•

Si queréis encontrar este tema en la documentación, esta en este apartado: https://vuejs.org/v2/guide/conditional.html

Carlos Eduardo Gomez García

teacher•

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

Nacxit Armando Mayorga Espinal

student•

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.

Derek Samuel Paúl Peña

student•

poniendo en práctica esta clase 🙂:

&lt;template lang=&quot;pug&quot;&gt;
  #app
    input(v-model=&quot;name&quot;)
    br
    label {{ name }}
    br
    a(:href=&quot;name&quot;) GO
    h2 Has Click sobre el mono para ver varias páginas de prueba
    span(@click=&quot;watchListOFlinks&quot; :class=&quot;listOFlinks ? 'red' : 'green'&quot;) {{ listOFlinks ? '🙉' : '🙈'}}
    ul(style=&quot;list-style: none;&quot; v-show=&quot;listOFlinks&quot;)
      li(v-for=&quot;i in listLinks&quot; @click=&quot;valueInput(i.jw)&quot;) {{ i.jw }}
      li(v-for=&quot;i in listLinks&quot; @click=&quot;valueInput(i.facebook)&quot;) {{ i.facebook }}
      li(v-for=&quot;i in listLinks&quot; @click=&quot;valueInput(i.youtube)&quot;) {{ i.youtube }}
      li(v-for=&quot;i in listLinks&quot; @click=&quot;valueInput(i.google)&quot;) {{ i.google }}
&lt;/template&gt;

&lt;script&gt;
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;
    }
  }
}
&lt;/script&gt;

&lt;style&gt;
#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;
}
&lt;/style&gt;

Julian David Alzate Cuervo

student•

excelente clase, no me gusta mucho pug pero nunca está de mas aprender a utilizar más herramientas

Yomar Esteban Miranda Sarmiento

student•

Cabe aclarar que en el uso de la directiva v-if si queremos mostrar contenido entre v-if y v-else cuando la condición sea cierta, hay que indentar nuestro código, de lo contrario nos dara error, ejemplo:

p(v-if="showValue")
    span Mensaje 01
p(v-else) 
    span Mensaje 02

En el caso de arriba funciona, pero si lo hacemos de la siguiente manera nos dará error:

p(v-if="showValue")
span Mensaje 01
p(v-else) 
span Mensaje 02

Iván Toro

student•

Documentación.

Ruth Ibarra Mendez

student•

Como recomendacion les diria que mejor buscaran aislar esa logica y ponerla fuera del template, para que sea mas facil de entender

Alejandro González Reyes

student•

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

jonathan sanchez

student•

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.

Andres Cobos Reyes

student•

Utilizo v-for para representar un conjunto de items como en el video. Cada item es un input en el que quiero recibir una fecha. Como podría utilizar algun plugin jquery de calendario sobre ese input ? Con Vue me he enfrentado a este inconveniente de no poder utilizar plugins jquery sobre el contenido dinámico, o al menos, no sé como hacerlo.

Carlos Eduardo Gomez García

teacher•

No deberías combinar Vue con jQuery, de hecho, ya no deberías estar usando jQuery 👇

Historia, evolución y muerte de jQuery | Un tributo a su legado

Te recomiendo mejor buscar componentes para Vue que sean calendarios (o hacer el tuyo propio :D)

vue calendar component

Angel Fernando Quiroz Campos

student•

Usa una librería de componentes como vuetify, element plus o vue prime (los componentes de quasar también sirven para web)

Naldo Duran

student•

👌

Jose Barboza

student•

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"

Juan Diego Brocca

student•

Me parece o el video está adelantado con respecto a la voz?

juan david vargas cante

student•

Yo lo veo y escucho bien!

Yomar Esteban Miranda Sarmiento

student•

Cabe aclarar que en el uso de la directiva v-if si queremos mostrar contenido entre v-if y v-else cuando la condición sea cierta, hay que indentar nuestro código, de lo contrario nos dara error, ejemplo:

p(v-if="showValue") {{ value }}
    span Mensaje
p(v-else) {{ 'Hola Mundo!!' }}

En el caso de arriba funciona, pero si lo hacemos de la siguiente manera nos dará error:

p(v-if="showValue") {{ value }}
span Mensaje
p(v-else) {{ 'Hola Mundo!!' }}

Nacho Anaya

teacher•

Si, para que se entienda mejor el elemento con la directiva v-else debe ser SIEMPRE el siguiente hermano del elemento con la directiva v-if

Yomar Esteban Miranda Sarmiento

student•

Exacto, por eso es muy importante la identación.

Yorman Urdaneta

student•

Pregunta, para recorrer el dom tengo que seguir usando Jquery o javascript puro no tiene cosas como los típicos identificadores de elementos de Jquery y disculpen si la pregunta es algo tonta no se.

Nacho Anaya

teacher•

En realidad la manera mas correcta de interactuar con el DOM seria usando directivas, expresiones, filtros, etc.

Si queres acceder a los elementos de forma mas tradicional podrias usar la funcionaldad ref de Vue, donde podes referenciar elementos HTML para luego accederlos dentro el VM. A mi particularmente no me gusta mucho pero es totalmente valido y recomendado. Checa en este link la documentacion.