No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Control de Flujo con Directivas

7/38
Recursos

Aportes 66

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Para insertar emojis en vscode window = Tecla de windows + Tecla de punto

Ustedes no se imaginan la emoci贸n que siento de entender y de que todo por el momento me funcione.

Alguien mas noto que derrepente apareci贸 el v-else-if?? creo que algo paso ah铆 con la edici贸n de la clase jeje

La principal diferencia entre v-if y v-show es que v-if renderiza el elemento en el DOM solo si se cumple la expresi贸n y v-show renderiza todos los elementos en el DOM y luego utiliza la propiedad display de CSS para ocultarlo si no cumple con la expresi贸n.
v-show se utiliza preferentemente si el elemento cambia frecuentemente y v-if cuando no cambia a lo largo del tiempo

鈥 v-bind: Enlaza din谩micamente uno o mas atributos del elemento. Se puede abreviar as铆 鈥 :src = 鈥渋mg鈥.
鈥 v-if: De acuerdo con el cumplimiento de la condici贸n construye o destruye el elemento.
鈥 v-else-if: Funciona de la misma manera que 鈥渧-if鈥, pero para usarla debe existir previamente la directiva 鈥渧-if鈥 o 鈥渧-else-if鈥.
鈥 v-else: Para usar esta directiva previamente debe existir la directiva 鈥渧-if鈥 o 鈥渧-else-if鈥.
鈥 v-show: Dependiendo de la condici贸n, cambia la propiedad 鈥渄isplay鈥 del atributo style del elemento.

Emojis en Windows 10 => tecla windows + Tecla punto (.) o Tecla coma (,).
Mas informaci贸n: https://es.vuejs.org/v2/api/#Directivas

Ya solo con esto siento que es mucho m谩s f谩cil que react, facilitando la interactividad en menos l铆neas de c贸digo鈥
Encontr茅 esta tabla que compara ambos, espero que a otros les parezca igual de interesante, especialmente cuando muestran la curva de aprendizaje鈥

Aqui trabajando Vuejs con Laravel 鉂わ笍

Para el selector de emojis (en windows) : windows + .

la directiva v-if solo renderiza si se cumple la condicion y v-show renderiza pero si no cumple la condicion modifica su style para ocultarlo.

Los Emojis en mac se muestran con:
Ctrl + Cmd + espacio 馃憤馃徑

Usos de condicionales dependiendo del caso:

v-show: es recomendable cuando el elemento o la condici贸n cambia constantemente, para evitar menos mutaciones en el DOM.

Vi-f, v-if-else, v-else: Si es algo que es fijo y no va a variar a lo largo del tiempo

Nota

  • v-if agrega o quita elemento al DOM.
  • v-show los muestra o los oculta con display:none

Si a煤n no las han usado, les recomiendo much铆simo instalar las VueDevTools en su navegador para modificar valores desde una GUI 馃槂

Emojis en Ubuntu 馃殌:
.

  • En algunas aplicaciones como el Text Editor, pueden hacer click derecho y elegir la opci贸n Insert Emoji

  • Para abrir un emoji picker desde cualquier aplicaci贸n una buena alternativa es instalar Emote. Actualmente la estoy usando.

Otra forma de hacerlo es utilizando directamente el operador ternario en una expresi贸n, como se vio en la clase anterior.

<span> {{changePercent > 0 ? '馃憤' : changePercent < 0 ? '馃憥' : '馃' }}</span>

Para los que preguntan sobre los emojis: es una funcionalidad nativa de macOS que podes usar en cualquier campo de text de cualquier tipo de programa con el shortcut: ctrl + cmd + space

Estoy seguro que windows y hasta quizas linux tengan algo similar

gran curso hasta ahora

v-bind:src="" -->Para las im谩genes
v-if="condici贸n" --> para poner una condici贸n EJ: v-if="changePercent聽>聽0"
v-else-if="sino se cumple la condici贸n" --> cuando no se cumple el v-if Ej: v-else-if="changePercent聽<聽0"
v-else --> tambien puede ir solo el else sin una condicion
v-show -->igual que un if, la unica diferencia es que me muestra las etiquetas pero en display none.```

Tambi茅n considerar que el v-if es muy utilizando cuando se empiezan a usar otros componentes para aprovechar el ciclo de vida de un elemento de vuejs

si el elemento cambiar谩 muchas veces en poco tiempo lo mejor es usar v-show por performance de lo contrario utilizar v-if

Vue esta bastante interesante

7.-Control de Flujo con Directivas

De forma condicional

La diferencia entre v-if y v-show radica en que el v-if remueve el elemento del DOM y el v-show modifica la propiedad display del CSS para mostrarlos o no. El uso de estas propiedades es algo ambiguo, en general las dos sirven, pero se recomienda que si el elemento o condici贸n puede estar cambiando constantemente usemos el v-show porque evitamos menos mutaciones en el DOM, si es algo m谩s fijo y que no varia mucho usamos el v-if.

si se dan cuenta cada que se refresca por unos milesegundo aparece {{}} como logramos que eso no pase 驴?

muy interesante vue

la directiva v-show modifica style de la etiqueta, y la directiva v-else elimina la etiqueta del DOM.

Hasta ahora el curso va genial.

Que extension utilizas para ver los emoji en visual studio code

Qu茅 interesante el curso! Muy entretenida la forma en que avanza.

Directivas de controles de flujo
v-if
v-else
v-show

Vue es lo mejor!!

驴C贸mo se ponen lo emojis? xD

Directivas para control de flujo:

    - v-if , v-show, v-else
    - v-if = Si las variables no cumplen, ni siquiera aparecen en el DOM
    - v-show = Si las variables no cumplen, tiene un display: none

Excelente clase, me empezaba a preocupar la falta de preguntas pero , ahora se que es porque dejas bien claro el tema.

Est谩 buen铆simo el curso. No ten铆a idea del potencial de Vue y de lo f谩cil q es usarlo.

La diferencia entre v-if y v-show, es que v-if elimina del DOM la etiqueta HTML, no la renderiza. Pero v-show lo que hace es que si la renderiza, pero le a帽ade la propiedad css display:none que oculta el elemento para que no se visualize, pero si se inspecciona en el DevTool, si se muestra renderizado.

Para mostrar la venta de emojis en Mac

CTRL + CMD + SPACE

Si el elemento o la condicion va a estar cambiando constantemente usar v-show porque evitara menos mutaciones en el DOM.
.
Si es algo mas fijo que no va a estar cambiando mucho a lo largo del tiempo y solo va a estar chequeando una condicion, usar v-if.

Usamos v-if y v-else para mostrar u ocultar elementos. Tambi茅n usamos v-show. La diferencia entre ambas es que la primera elimina o crea elementos en el DOM mientras que la segunda cambia la propiedad display del elemento.

En general, si nuestra informaci贸n va a cambiar mucho, es mejor usar v-show para evitar menos mutaciones en el DOM. Si es algo m谩s fijo, mejor usamos v-if.

馃憤 por si lo necesitan

Mi ejemplo favorito para las directivas v-if y v-else es el que se presenta dentro de la documentaci贸n, por aqu铆 se los comparto, ya que explica con n煤meros random como es que funciona la propiedad:

<div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
  </div>

Facil铆simo de usar.

Empezamos recios, que bueno, me gusta m谩s un curso as铆 馃憤

v-if || v-show

Algo que me gustar铆a compartir con ustedes, consegu铆 este post en este blog super interesante que explica mucho m谩s a detalle sobre las directivas, tipos de directivas, espero que les sirva.
https://lenguajejs.com/vuejs/directivas-vue/que-son-directivas/

Directivas de Control de Flujo

Directiva v-if

Se encarga de decirle a Vue que el elemento se mostrar谩 solamente cuando se cumpla una condici贸n.

v-if="changePercent > 0"

Directiva v-show

Ofrece un comportamiento similar a v-if, v-show no tiene un valor v-hide, siempre tenemos que definir el valor que queremos que tome.

La diferencia de las directivas v-if con v-show, es que una modifica la propiedad display de CSS del elemento para mostrarlo u ocultarlo y la otra elimina directamente el elemento del DOM.

La recomendaci贸n es si el elemento o la condici贸n est谩 cambiando constantemente es recomendable utilizar la directiva v-show y as铆 evitar menos mutaciones en el DOM y evitar que est茅 cambiando constantemente, en cambio si es algo que es fijo y no va a cambiar constantemente es recomendable utilizar la directiva v-if.

Para insertar emojis en VSCode en Mac:

C贸mo es el atajo de teclado para los emoji?

Si usas Ubuntu puedes instalar emojione picker. Les dejo el enlace y que lo disfruten. Os quiero comunidad 馃挌

https://github.com/gentakojima/emojione-picker-ubuntu

Que horrible escribir el html del if y el html del else a la vez 馃槮 vengo de React y all谩 eso ser铆a impensable
Espero cambiar mi opini贸n de Vue con el tiempo

Entonces usar v-if cuando hay pocos o ningun tipo de cambio constantes en la pagina y v-show cuando es lo contrario

excelente, desde estos momentos muy b谩sicos veo las funcionalidades de este framework

Me encant贸 esta clase 馃槃

la directiva v-show oculta a diferencia del v-if que lo desaparece

la directiva v-if para validar condiciones en vue

Uso de if, else, else-if, v-show

que bueno .!!! ya no entiendo nada!!!

les dejo mi github

https://github.com/ruben-xe

  • v-if-else: remueve del DOM los elementos que no cumplan la condici贸n dada.
    v-else-if=鈥渃hangePercent < 0鈥
    .
  • v-show: solo modifica la propiedad display para mostrar o ocultar los elementos del DOM.
    v-show=鈥渃hangePercent < 0鈥

Tiene mucho parecido a una tecnologia que ya utilize.

Para insertar emojis en VSC Linux (Ubuntu) = CTRL + i 贸 CTRL + SHIFT + i

Entiendo que podr铆a haber diferencias tambi茅n en cuanto a la accesibilidad, cierto? Quiero decir en estas cuestiones no ser铆a solamente una uesti贸n de rendimiento decidir ocultar los elementos por CSS o no renderizandolos.

para los que quieran saber acerca ed todas las directivas y sus funciones como v-if aqui les dejo el enlace de la documentacion todas las directivas de Vue

Un ejemplo de usar v-show es cuando un usuario cambia entre secciones que se ocultan y se muestran dependiendo de las secciones en donde est谩, porque siempre puede volver a mostrar otra secci贸n, y es mejor ocultar y mostrar con CSS que quitar y poner con JS

Con las directivas v-if, v-else-if y v-else se pueden mostrar elementos HTML solo si se cumple alguna condici贸n que determinemos.

Otra forma de hacer esto es con v-show, que tambi茅n permite definir una condici贸n para mostrar el elemento.

La diferencia es que el v-if remueve directamente el elemento del DOM, mientras que con v-show el elemento permanece en el DOM pero solo se muestra cuando se cumple la condici贸n.

La recomendaci贸n es que si el elemento va a estar cambiando constantemente se utilice v-show para evitar manipular tanto el DOM.

En general, v-if tiene costos de alternancia m谩s altos, mientras quev-show tiene costos de renderizaci贸n iniciales m谩s altos. Por lo tanto, prefiera v-show si necesita cambiar algo muy a menudo, y prefierav-if si es poco probable que la condici贸n cambie en el tiempo de ejecuci贸n.
https://es.vuejs.org/v2/guide/conditional.html

tanto como v-if y v-show reciben un valor booleano para mostrar o no alguna parte del DOM

馃憣