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.  @@ -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