Crear listas con la directiva v-for de Vue.js

En la lección de hoy veremos cómo funciona la directiva v-for de Vue.js para recorrer un array u objeto y de esta manera poder operar con cada uno de los items que contiene dicho array u objeto, de la misma forma como lo haríamos con un bloque foreach() en PHP.

Repositorio

Ver el código de esta lección en GitHub

Notas

Ten presente siempre que en PHP cuando se itera un array se hace con la estructura variable-a-iterar as alias-de-elemento-singular :
```
foreach ($array as $item) {
    //
}
```
pero con Vue.js es lo contrario, primero se coloca el elemento singular y luego el plural:
```
<ul v-for="item in array">
  //
</ul&
```
Si la variable a iterar es un array con strings o cadenas de texto, el alias va a contener el valor de cada elemento del array.
Puedes usar la variable especial $index para trabajar con el índice del elemento actual.
Cuando la variable a iterar es un objeto de JavaScript que contiene propiedades, como por ejemplo: notes que tiene la propiedad text y author se muestran en Vue.js:
```
<ul v-for="note in notes">
  <li>
    {{ note.text }} por {{ note.author }}
  </li>
</ul>
```

Actividad

Realiza la mejora al ejemplo que hemos venido trabajando para agregar:

Que el programador pueda agregar todas las tecnologías que quiera y colocar sus años de experiencias.
Que le campo autor sea dinámico.
Que las notas se puedan marcar como favoritas con estilos que la resalte del resto.