Control de Flujo con Directivas

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 = “img”.
• 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 “v-if”, pero para usarla debe existir previamente la directiva “v-if” o “v-else-if”.
• v-else: Para usar esta directiva previamente debe existir la directiva “v-if” o “v-else-if”.
• v-show: Dependiendo de la condición, cambia la propiedad “display” 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=“changePercent < 0”
  .
• v-show: solo modifica la propiedad display para mostrar o ocultar los elementos del DOM.
  v-show=“changePercent < 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

👌