3. proyecto [vuejs-01]: los fundamentos

Para explicar el código ejecutado en [vuejs-00], lo simplificaremos en [vuejs-01]. Duplicamos la carpeta [vuejs-00] en [vuejs-01]:

El proyecto [vuejs-01] consta básicamente de cuatro archivos:

[main.js] [2] es el punto de entrada del proyecto;
[App.vue, HelloWorld.vue] y [3-4] son componentes de [Vue.js], que incluyen opcionalmente los siguientes elementos:
- [<template>...</template>]: código HTML;
- [<script>...</script>]: el código JavaScript asociado al código HTML;
- [<style>...</style>]: el estilo CSS asociado al código HTML;
[public/index.html] [5]: el documento HTML visualizado por el comando [npm run serve];

El archivo [public/index.html] que se muestra al ejecutar el proyecto es este:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- los archivos generados se insertarán automáticamente -->
  </body>
</html>

Por lo tanto, este archivo HTML no muestra nada de forma estática. Aquí no hay ningún código HTML. La visualización es dinámica: el código jS del proyecto generará HTML, que sustituirá por completo a la etiqueta [<div id=’app’>] de la línea 14. El código HTML generado por el código jS del proyecto e insertado en lugar de la etiqueta [<div>] de la línea 14 procede de las etiquetas [template] de los componentes [vue.js], los archivos con el sufijo [.vue].

El código HTML se inserta dinámicamente en la línea 14 mediante el siguiente script [vuejs-01/main.js]:


// importaciones
import Vue from 'vue'
import App from './App.vue'

// configuración
Vue.config.productionTip = false

// instanciación del proyecto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Comentarios

línea 2: el objeto [Vue] es proporcionado por el marco [vue.js];
línea 3: el objeto [App] es proporcionado por el archivo [vuejs-01/App.vue];
línea 6: configuración del objeto [Vue];
líneas 9-11: estas son las líneas que:
- generan el código HTML de la aplicación. En la línea 10, es el archivo [App.vue] el que lo genera;
- carguen el código HTML generado en la línea 10 en la sección [<div id=’app’></div>] del archivo [public/index.html];

Cualquier proyecto [Vue.js] puede conservar el archivo [index.html] tal cual.

El archivo [App.vue] del proyecto inicial [vuejs-00] se simplifica de la siguiente manera en el proyecto [vuejs-01]:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Comentarios

Un fragmento [.vue] consta de un máximo de tres secciones:
- [<template>...</template>]: del código HTML;
- [<script>...</script>]: el código JavaScript asociado al código HTML;
- [<style>...</style>]: el estilo CSS asociado al código HTML;

Aquí no tenemos ninguna sección [style].

líneas 1-6: el código HTML del fragmento (página, componente, vista, ...);
líneas 2-5: la sección [template] solo puede contener un elemento. Por lo general, se incluye una sección [div] que abarca todo el HTML del fragmento. También se puede incluir una etiqueta <template>;
línea 3: una imagen;

línea 4: un componente denominado [HelloWorld]. El principio de [Vue.js] consiste en construir páginas web utilizando fragmentos definidos en archivos [.vue], como aquí [App.vue]. Este componente está definido por el archivo [HelloWorld.vue], definido en la línea 9 del script jS asociado;
línea 4: un componente puede aceptar parámetros. El parámetro es aquí el atributo [msg];
líneas 8-17: el script jS del fragmento (o componente);
línea 9: para poder utilizar el componente [HelloWorld] en el componente [App], es necesario importar su definición en la parte [script];
líneas 11-16: el script define un objeto y lo exporta para que esté disponible externamente;
línea 12: el atributo [name] define el nombre del componente exportado;
líneas 13-15: el atributo [components] enumera los componentes utilizados por el componente [App]. Se exportan junto con él;

Línea 9: no es obligatorio que el componente [HelloWorld] tenga el mismo nombre que el archivo que lo define. Se podría importar como [X] y exportarlo como componente [Bonjour]:

línea 14: el componente [X] se exporta con el nombre [Bonjour]. A continuación, se utiliza con ese nombre, línea 4;

La primera versión es la más habitual, por lo que definiremos nuestros componentes de esta manera;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

La línea 14 es un atajo para el código [HelloWorld : HelloWorld]: el componente [HelloWorld] (a la derecha, importado en la línea 9) se exporta con el nombre [HelloWorld] (a la izquierda).

Simplificamos el componente [HelloWorld.vue] de la siguiente manera:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Comentarios

el componente [HelloWorld] tiene la misma estructura de archivo que el componente principal [App];
línea 3: aquí tenemos una evaluación de una expresión JavaScript, en este caso la expresión [msg];
líneas 10-12: definen las propiedades del componente, más concretamente sus parámetros. Cuando el componente [App] instanció un componente [HelloWorld], lo hizo con la siguiente sintaxis:


<HelloWorld msg="Notre première application Vue.js" />

El componente [HelloWorld] se instancia asignando un valor al parámetro (atributo) [msg]. Si seguimos el [template] del componente [HelloWorld], este se convierte en:


<div>
    <h1>Notre première application Vue.js</h1>
</div>

líneas 7-14: las propiedades del componente definidas en forma de un objeto que se exporta;
- línea 9: el componente se exporta con el nombre [HelloWorld];
- líneas 10-12: sus parámetros se definen mediante la propiedad [props];

Finalmente, si se combinan las plantillas de los dos componentes [App, HelloWorld] utilizados, el archivo [index.html] que se mostrará será el siguiente:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

Iniciamos la aplicación modificando el comando [serve] [1] del archivo [package.json]:

La página que se muestra es entonces [2].

Ahora veamos el código de esta página:

en [1], hacer [clic droit];
en [2], el código fuente de la página. Vemos que es el código del archivo inicial [index.html] y no es eso lo que se ha mostrado. Efectivamente, la página [index.html] fue la que se cargó inicialmente. A continuación, de forma dinámica, el código JavaScript modificó esta página, pero eso no se nos muestra;

Cuando las páginas se generan dinámicamente mediante JavaScript, la opción [2] no sirve de nada. Hay que ir a las herramientas del navegador (F12 en Firefox) para ver el código de la página que se muestra actualmente:

en [1], el inspector del DOM (Document Object Model) del documento mostrado;
en [2], lo que realmente contiene este DOM;
[3-4], las herramientas que utilizaremos para visualizar los objetos JavaScript utilizados por el framework [Vue.js];
[4] es una extensión (en este caso para Firefox) para depurar aplicaciones [Vue.js]:
- para Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
- para Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Veamos la pestaña [Vue] [4]:

La vista [1-4] nos muestra la estructura [Vue.js] del documento: la raíz del documento [2] (index.html) incluye el componente [App] (3), que a su vez incluye el componente [HelloWorld] (4). Al hacer clic en [4], aparecen las propiedades del componente [HelloWorld] [5].

En [4] (a la derecha) se ve el indicador [$vm0]. Es el nombre de la variable que se puede utilizar en la consola JavaScript [6] para designar el objeto [HelloWorld]. Hagámoslo:

en [2], evaluamos la expresión [$vm0], lo que tiene como efecto mostrar su estructura. Normalmente no tendremos que utilizar directamente esta estructura;

Terminemos mostrando la capacidad de [hot reload] del comando [serve] utilizado para ejecutar el proyecto:

en [App.vue], modifique el mensaje mostrado por [HelloWorld]:

en [1], se modifica el mensaje que se muestra;
en [2-3], la página se actualiza automáticamente sin que tengamos que intervenir;

Ahora vamos a crear varios proyectos [vuejs-xx] para ilustrar los puntos importantes de [Vue.js]. Por «importantes» hay que entender «que vamos a utilizar en el cliente [vue.js] del servidor de cálculo de impuestos». Otros puntos «importantes» se omitirán si no se utilizan en el cliente. Por lo tanto, no se realizará una presentación exhaustiva de [vue.js].