Creemos en la Web: Un poco de lógica a la vista

Contemos

El primer ejemplo va a empezar simple, nuestro dato va a ser un numero, que indica cuantas veces se apretó un botón, es decir, un contador.

Cuando el usuario hace click en el botón, incrementamos en 1 el contador.

Empecemos con el HTML que ya conocemos:

<div>
    <p>Contador: <span>0</span></p>
    <button>Incrementar</button>
</div>

Que resulta en:

Lo único nuevo es el tag button que no habíamos visto hasta ahora porque no sirve de mucho si no sabemos como hacerlo interactivo.

Muy linda aplicación, pero notaras que si hacemos click en el botón no pasa nada...

Es porque no le indicamos dos cosas:

• Que sucede cuando se hace click en el botón

• De donde saca el valor del contador y donde lo muestra

Para lo primero necesitamos indicarle al botón "cuando esto sucede, hace esto otro", Para lo segundo necesitamos indicarle:

• El estado inicial de nuestros datos

  • En este caso, un contador inicialmente en cero

• Donde mostrar ese contador en nuestro HTML

Para eso vamos a usar un proyecto llamado vuejs, que nos permite hacer esto y mucho mas.

Primero tenemos que incluir vuejs en nuestra pagina, así su funcionalidad esta disponible, esto lo hacemos con un tag script dentro del head de nuestra pagina:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

Lo segundo que necesitamos hacer, es indicarle a vuejs, que parte de nuestro HTML es su responsabilidad, ya que podemos tener distintas partes de la pagina manejadas por distintas aplicaciones. Esto se lo indicamos agregando un identificador al tag raíz de nuestra aplicación e indicando ese identificador cuando inicializamos la aplicación.

<div id="mi-app-1">
    <!-- nuestra aplicación va acá -->
</div>

Luego necesitamos inicializar nuestra app, para esto le indicamos cual es su estado inicial y cual es el id de la raíz del HTML de nuestra app.

Esta parte va a requerir bastante explicación ya que vamos a usar un nuevo lenguaje que quizás hayas oído mencionar: javascript.

<script>
  new Vue({
    el: '#mi-app-1',
    data: {count: 0}
  });
</script>

El tag script te parecerá conocido ya que lo usamos para incluir aplicaciones de otros, como vuejs o a-frame en capítulos anteriores. Ahora vamos a escribir nuestros propios programas. Empezando con uno corto.

Al incluir vue.min.js lo que hicimos fue cargar un archivo con código javascript adentro, que lo que hace es registrar un identificador llamado Vue en nuestra pagina.

Este identificador es lo que se llama un constructor, un constructor es una función especial que al invocarla con la instrucción new nos devuelve un nuevo objecto. No te preocupes, son muchos conceptos que vamos a ir explorando en breve, pero por ahora sabe que para crear una nueva app usando vuejs, tenemos que crear un nuevo objeto de tipo Vue, el cual esta disponible porque incluimos el script vue.min.js.

El constructor Vue necesita información para crear una aplicación, mínimamente necesita saber:

• Cual es el id del tag raíz donde la app va a correr

En nuestro caso el id es mi-app-1, como hay muchas formas de indicar el tag raíz, para que vue sepa que es un id le ponemos # al principio.

• Cual es el estado inicial de nuestra aplicación

En nuestro caso un solo campo, llamado count inicializado a 0.

No te preocupes por ahora con los detalles de javascript, para las siguientes apps vas a poder copiar el código y solo cambiar el id y los datos iniciales.

Ok, inicializamos nuestra app, pero el HTML esta vacío, como le decimos "mostrá el valor de count acá"?

Como habrás visto hasta ahora, cuando un programador necesita decirle algo a una computadora, en lugar de usar un formato existente, inventa un lenguaje nuevo, hasta ahora aprendimos HTML, CSS y javascript, todos con formatos distintos, con nuestro lenguaje de plantillas no iba a ser la excepción, pero por suerte es bastante simple.

También vale la pena aclarar que con estos 4 lenguajes (HTML, CSS, javascript y un lenguaje de plantillas) es suficiente para hacer cualquier tipo de aplicación como las que usas día a día en internet.

Para indicar los "huecos" donde van los datos, usamos el siguiente formato:

<div id="mi-app-1">
    <p>Contador: <span>{{count}}</span></p>
    <button>Incrementar</button>
</div>

Como veras dentro del tag span escribimos {{count}} lo que significa "pone el valor del campo count acá".

El resultado es:

Un avance, pero el botón aun no hace nada...

Lo que le queremos indicar es "cuando el usuario haga click, hace esto", lo cual se logra agregando un atributo especial al botón, especial porque lo entiende vuejs, ese atributo se llama @click:

<div id="mi-app-1">
    <p>Contador: <span>{{count}}</span></p>
    <button @click="count = count + 1">Incrementar</button>
</div>

La magia esta acá:

<button @click="count = count + 1">Incrementar</button>

Le decimos "cuando el usuario haga click en este botón, corre el código count = count + 1, es decir, el nuevo valor de count es igual al viejo valor de count mas 1.

Probalo haciendo click, debería incrementarse.

Una Lista (de tareas)

Hasta ahora mostramos un valor y agregamos interactividad a nuestra pagina, pero de la introducción aun falta una cosa: evitar repetición.

Eso vamos a ver ahora haciendo una aplicación para listar tareas.

Como siempre necesitamos tener un tag raíz para nuestra aplicación, un estado inicial, mostrar los datos y agregar interactividad.

Nuestro estado inicial va a ser una lista con 0 o mas datos de tipo texto indicando la tarea a realizar, empecemos con un par de tareas iniciales así podemos practicar repetición antes de agregar interactividad:

<script>
  new Vue({
    el: '#todo-app',
    data: {
        tareas: [
            'Conquistar el mundo',
            'Abolir el patriarcado',
            'Comprar pan'
        ]
    }
  })
</script>

Nuestro estado inicial contiene un campo llamado tareas que es una lista de tres valores, los tres son de tipo texto (otro tipo que vimos es el tipo numérico para el contador)

Ahora con nuestra lista de tareas inicializada, podemos mostrarla en la pantalla, si fuéramos a hacerlo a la vieja usanza, haríamos algo así:

<ul>
    <li>Conquistar el mundo</li>
    <li>Abolir el patriarcado</li>
    <li>Comprar pan</li>
</ul>

Que se vería así:

• Conquistar el mundo
• Abolir el patriarcado
• Comprar pan

Pero obviamente esto no nos sirve, queremos listar las tareas de nuestra lista de datos, con lo que aprendimos hasta ahora podríamos intentar:

<ul>
    <li>{{tarea}}</li>
</ul>

Pero esto no funciona porque no tenemos una sola tarea, sino muchas, y el identificador tarea no esta definido, tenemos el identificador tareas, sin embargo, estamos bastante cerca..., para repetir un fragmento de HTML cuyo contenido se encuentra en una lista tenemos que indicarle a vue algo así como "para cada tarea en la lista de tareas, mostrá este HTML", veamos como se hace:

<div id="todo-app">
    <ul>
        <li v-for="tarea in tareas">{{tarea}}</li>
    </ul>
</div>

Lo que resulta en:

Si entendés un poco de ingles veras que nuestra idea "para cada tarea en la lista de tareas, mostrá este HTML" se traduce bastante similar.

Usamos el atributo v-for (la v es de vue, v-for es un atributo que vue entiende, como @click antes), dentro del valor del atributo le decimos, "tarea in tareas", lo cual completo v-for="tarea in tareas" leído de corrido casi se lee "for tarea in tareas" que se traduce "para tarea en tareas".

El tag con el atributo v-for y sus tags hijos se van a repetir tantas veces como elementos haya en la lista tareas, en nuestro caso 3 veces.

<input>
<button>Crear nueva tarea</button>

<div id="todo-app">
  <input v-model="tituloNuevo">
  <button @click="tareas.push(tituloNuevo); tituloNuevo = '';">Crear nueva tarea</button>

  <ul>
    <li v-for="tarea in tareas">{{tarea}}</li>
  </ul>
</div>
<script>
  new Vue({
    el: '#todo-app',
    data: {
        tituloNuevo: '',
        tareas: [
            'Conquistar el mundo',
            'Abolir el patriarcado',
            'Comprar pan'
        ]
    }
  })
</script>

<input v-model="tituloNuevo">

<button @click="tareas.push(tituloNuevo); tituloNuevo = '';">Crear nueva tarea</button>

<li v-for="(tarea, pos) in tareas">
    <span>{{pos}}: {{tarea}}</span>
    <button @click="$delete(tareas, pos)" style="float: right">X</button>
</li>

<li v-for="(tarea, pos) in tareas">

<span>{{pos}}: {{tarea}}</span>

<button @click="$delete(tareas, pos)" style="float: right">X</button>

<!doctype html>
<html>
  <head>
        <meta charset="utf-8">
        <title>Vue: Lista de Tareas</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  </head>
  <body class="m-3">
        <div id="todo-app">
          <input v-model="tituloNuevo" type="text" class="form-control" id="tareaDesc" placeholder="Descripción de tarea">

          <div class="my-2 text-center">
                <button @click="tareas.push(tituloNuevo); tituloNuevo = '';"
                                class="btn btn-primary">Crear nueva tarea</button>
          </div>

          <table class="table table-bordered table-striped table-hover">
                <tbody>
                  <tr v-for="(tarea, pos) in tareas">
                        <td>{{pos}}</td>
                        <td>{{tarea}}</td>
                        <td class="text-center">
                          <button @click="$delete(tareas, pos)" class="btn btn-danger btn-sm">X</button>
                        </td>
                  </tr>
                </tbody>
          </table>
        </div>
        <script>
          new Vue({
                el: '#todo-app',
                data: {
                  tituloNuevo: '',
                  tareas: [
                        'Conquistar el mundo',
                        'Abolir el patriarcado',
                        'Comprar pan'
                  ]
                }
          })
        </script>
  </body>
</html>