Skip to content

Minor updates to 02.md #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Minor updates to 02.md #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions ex/02.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -120,11 +120,11 @@ const app = new Vue(vm)
</div>
```

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 = {
Expand All @@ -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
<div id="app">
Expand All @@ -169,11 +169,11 @@ const app = new Vue(vm)
</div>
```

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 `<li>`. 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.


Expand All @@ -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 }}
Expand All @@ -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/)

Expand Down