diff --git a/ex/02.md b/ex/02.md index e83414c..da09476 100644 --- a/ex/02.md +++ b/ex/02.md @@ -5,13 +5,13 @@ Este concepto (como muchos otros) viene del mundo Angular. Podemos definir enton Estas son algunas de las directivas nativas de Vue: 1. `v-if` y `v-else` ➡️ Agrega o elimina elementos del DOM en función de un resultado `booleano` -2. `v-show` ➡️ funciona igual a `v-if` pero en lugar de eliminar o agregar el elemento, lo hace visible o invisible. -3. `v-for` ➡️ Iterar y representa en HTML una colección de elementos (`Array`) o un objeto. -4. `v-bind` ➡️ Permite que cualquier atributo HTML como `href`, `src` o `class` recibe propiedades para generar valores dinámicos. +2. `v-show` ➡️ Funciona igual a `v-if` pero en lugar de eliminar o agregar el elemento, lo hace visible o invisible. +3. `v-for` ➡️ Itera y representa en HTML una colección de elementos (`Array`) o un objeto. +4. `v-bind` ➡️ Permite que cualquier atributo HTML como `href`, `src` o `class` reciba propiedades para generar valores dinámicos. ## `v-if`, `v-else` y `v-show` -1. Partiendo del ejemplo anterior vamos agregar una propiedad `show` a nuestro `vm`, que nos permita agregar o eliminar el elemento del DOM. Recuerden que las propiedades siempre deben ser parte del objeto que retorna la función `data`. +1. Partiendo del ejemplo anterior vamos a agregar una propiedad `show` a nuestro `vm`, que nos permita agregar o eliminar el elemento del DOM. Recuerden que las propiedades siempre deben ser parte del objeto que retorna la función `data`. ```js const vm = { @@ -62,7 +62,7 @@ Al igual que en JS, el uso de `v-else` cuando usamos un `v-if` es opcional. Pode ``` Ahora el texto `'Hello Vue!'` se visualizara por duplicado cada vez que `show` sea verdadero. -Si inspeccionamos el DOM usando las *Dev Tools* del browser, podemos observar que +Si inspeccionamos el DOM usando las *Dev Tools* del browser, podemos observar que cuando `show === true` ambos elementos permanecen en el DOM. Pero cuando `show === false`, el elemento que usa `v-if` se elimina, mientras que el que usa `v-show` sigue existiendo pero permanece oculto usando la propiedad `display` de CSS. ![directives](../img/directives.gif) @@ -120,11 +120,11 @@ const app = new Vue(vm) ``` -Como pueden ver la manera de utilizar la directiva es con el formato `v-bind:[nombre del atributo]`. De ahora en mas cada vez que el valor de la propiedad `url` se modifique también se modificara el valor del atributo `href` de nuestro link. Esta directiva puede escribirse de manera mas sencilla usando un *shortcut*: `:href="url"`. Por lo cual cada vez que en Vue vean `:` que preceden un atributo HTML, recuerden que equivale a escribir la directiva `v-bind`. +Como pueden ver la manera de utilizar la directiva es con el formato `v-bind:[nombre del atributo]`. De ahora en mas cada vez que el valor de la propiedad `url` se modifique también se modificara el valor del atributo `href` de nuestro link. Esta directiva puede escribirse de manera más sencilla usando un *shortcut*: `:href="url"`. Por lo cual cada vez que en Vue vean `:` que preceden un atributo HTML, recuerden que equivale a escribir la directiva `v-bind`. ## `v-for` -1. Por ultimo vamos a ver el compartimiento de `v-for`. Nos permite representar una colección de elementos en nuestro HTML. Creamos un `Array` con el nombre `items` en la función `data` de nuestro `vm` y vamos a llenar este array con algunos objetos. +1. Por último vamos a ver el comportamiento de `v-for`. Nos permite representar una colección de elementos en nuestro HTML. Creamos un `Array` con el nombre `items` en la función `data` de nuestro `vm` y vamos a llenar este array con algunos objetos. ```javascript const vm = { @@ -146,7 +146,7 @@ const vm = { const app = new Vue(vm) ``` -2. Ahora nos falta agregar el HTML necesario que junto a la directiva `v-for` nos permita visualizar cada elemento dentro de la colección de `items`. +2. Ahora nos falta agregar el HTML necesario que junto a la directiva `v-for` nos permita visualizar cada elemento dentro de la colección de `items`. ```html
@@ -169,11 +169,11 @@ const app = new Vue(vm)
``` -Agregamos tambien la directiva `v-bind` con la propiedad `key`. Esta propiedad es requerida por vue cuando utilizamos colecciones y la directiva `v-for` ya que le permite identificar univocamente cada elemento y evitar problemas en el futuro. Podes encontar mas informacion en este [link](https://es.vuejs.org/v2/guide/list.html#key). +Agregamos tambien la directiva `v-bind` con la propiedad `key`. Esta propiedad es requerida por vue cuando utilizamos colecciones y la directiva `v-for` ya que le permite identificar univocamente cada elemento y evitar problemas en el futuro. Podes encontar más informacion en este [link](https://es.vuejs.org/v2/guide/list.html#key). Si todo salió bien, vas a ver en pantalla una lista que contiene 3 elementos `
  • `. Lo que esta pasando entonces es que a través de la propiedad `i` podemos representar cada uno de los elementos de `items` y definir la estructura HTML con la cual queremos visualizarlos. Como nuestros items son objetos usamos la sintaxis nativa de JS para acceder a sus propiedades `{{ i.text }}`. -> 👌 Usando la directiva `v-for`, tambien podes al indice que le corresponde a cada elemento con la siguiente sintaxis: `v-for="(item, index) in items`". De esta forma, el primer parametro hace referencia al elemento y el segundo al indice que le corresponde al mismo. +> 👌 Usando la directiva `v-for`, tambien podes acceder al índice que le corresponde a cada elemento con la siguiente sintaxis: `v-for="(item, index) in items`". De esta forma, el primer parámetro hace referencia al elemento y el segundo al índice que le corresponde al mismo. > 👌 `v-for` tambien puede ser utilizado para representar las propiedades de un objeto. Podes ver [este ejemplo](https://es.vuejs.org/v2/guide/list.html#v-for-con-un-Objecto) de la documentación. @@ -182,7 +182,7 @@ ___ ### 👉 Aclaraciones > En JS tenemos valores *truthy* y *falsy*. A grandes rasgos esto implica que cualquier valor (independientemente del tipo de dato) puede ser evaluado de forma booleana. Los valores *falsy* son todos aquellos que en el caso de ser evaluados en expresiones booleanas devuelven *false*. Estos valores son: `false`, `''`, `0`, `null` y `undefined`. Esto quiere decir que todos los otros valores (incluso objetos y arreglos vacíos) retornan `true`. -> En las expresiones podemos escribir cualquier tipo de código JS valido. En realidad no cualquiera. No podemos usar `if`, `else`, `for`, `while` pero si podemos usar *ternary expressions*, concatenar cadenas de texto, operar valores aritméticamente y acceder a métodos y propiedades de las variables. Estos son algunos ejemplos de expresiones validas: +> En las expresiones podemos escribir cualquier tipo de código JS valido. En realidad no cualquiera. No podemos usar `if`, `else`, `for`, `while` pero sí podemos usar *ternary expressions*, concatenar cadenas de texto, operar valores aritméticamente y acceder a métodos y propiedades de las variables. Estos son algunos ejemplos de expresiones validas: ```javascript {{ 1 * 100 }} @@ -192,7 +192,7 @@ ___ {{ arr.join('-') }} ``` -Si tenes ganas, podes experimentar en codepen y jugar con diferentes alternativas de codigo JavaScript para probar en las expresiones. +Si tenes ganas, podes experimentar en codepen y jugar con diferentes alternativas de código JavaScript para probar en las expresiones. ### 📝 [Solución](https://jsfiddle.net/8vvm6d5v/4/)