Introducción a Vue.js: Vue-cli y Lifecycle Hooks | Programar Plus ▷ Tutoriales

Esta es la tercera parte de una serie de cinco partes sobre el marco de JavaScript, Vue.js. Cubriremos Vue-cli y hablaremos un poco más sobre los procesos de desarrollo de la vida real. Esto no pretende ser una guía completa, sino más bien una descripción general de los conceptos básicos para que pueda comenzar a utilizar Vue.js y comprender lo que el marco tiene para ofrecer.

Serie de artículos:

Representación, directivas y eventos
Componentes, accesorios y tragamonedas
Vue-cli (¡Estás aquí!)
Vuex
animaciones

Vue-cli y procesos de compilación

Si aún no ha leído la última sección sobre los componentes y accesorios de Vue.js, le sugiero que lo haga antes de leer esta sección; de lo contrario, algunas cosas que cubriremos carecerán de contexto.

Vue ofrece un cli realmente agradable que lo pone en marcha con su elección de algunas herramientas de compilación, y una plantilla de inicio simple realmente agradable. Es una herramienta preciosa. Antes de instalar vue-cli, es posible que desee verificar que sus versiones de nodo y npm o yarn estén actualizadas. Primero querrá instalar vue-cli (el -g lo ayuda a instalarlo globalmente)

$ npm install -g vue-cli

Hay muchas compilaciones disponibles para usted, pero en nuestro ejemplo, usaremos webpack:

$ vue init webpack <project-name>

Puede pasar por los comandos que le dará la salida, lo que lo ayudará a ingresar al directorio, instalar todo, configurar su archivo `package.json` y luego, finalmente, servir un servidor de desarrollo local en localhost: 8080 con el mando:

$ npm run dev

¡Estás listo y funcionando! Me encanta que la configuración sea tan limpia. Comenzará con un archivo de aplicación en su directorio `/src/` con un archivo `Hello.vue` en el directorio `/components/`. Esto es realmente bueno porque ya puede ver cómo configuraría estos archivos y cómo podrían funcionar las importaciones y exportaciones.

Repasemos esta nueva extensión de archivo `.vue` por un momento, porque si no ha trabajado con vue, no lo habrá encontrado antes.

En su archivo `.vue`, puede colocar todo lo que necesita para su componente. Ya no tenemos que envolver nuestras plantillas en <script type="text/x-template">, ahora crearemos archivos más semánticamente que sigan esta lógica:

<template>
  <div>
     <!-- Write your HTML with Vue in here -->	
  </div>
</template>

<script>
  export default {
     // Write your Vue component logic here
  }
</script>

<style scoped>
  /* Write your styles for the component in here */
</style>

Hice un repositorio de fragmentos de Vue para Sublime Text para activar rápidamente un modelo estándar como este para archivos `.vue` (esto es lo que el fragmento vbase produciría). También está este para atom (aunque especifica la versión 1+, y Vue está en v2), y este para vscode.

Algunas cosas a tener en cuenta aquí: al igual que en React, debe devolver exactamente una etiqueta adjunta, aquí he usado un div. también he usado <g> elementos en SVG. Puede ser cualquier cosa, pero la plantilla completa debe estar envuelta en una sola etiqueta.

Verás que usaremos export default aquí para escribir nuestros scripts, como la función de datos o los métodos que usamos anteriormente, pero si tuviéramos que usar componentes como elementos secundarios en este documento `.vue`, también tendríamos que importarlos (más sobre esto en un minuto).

También puedes ver que tenemos un especial scoped valor en la etiqueta de estilo. Esto nos permite abarcar muy fácilmente los estilos de este componente solo para este componente. También podríamos usar solo <style> y crearía estilos para toda la aplicación. Por lo general, me gusta crear una hoja de estilo base para toda la aplicación con estilos comunes como fuentes y alturas de línea, que usaré @import en el <style> etiqueta del archivo App.vue con la ayuda de vue-style-loader. Entonces usaré el <style scoped> etiqueta para estilos muy particulares para la plantilla cuando lo requiera, ¡pero realmente cada uno tiene lo suyo en este! Lo bueno es que Vue-cli te permite decidir cómo organizarlo, y no tienes que agregar ninguna otra dependencia o módulo para abarcar nuestros estilos de esta manera. *ojos del corazón*.

Hablamos brevemente sobre las ranuras antes, cuando usamos ranuras en los componentes de Vue con las etiquetas de estilo con ámbito, se aplican al componente que tiene las ranuras. Esto es muy útil, porque puede cambiar componentes y cambiar la apariencia muy fácilmente. *ojos más sinceros*

Debo decir que, en términos de flujo de trabajo de desarrollo, trabajar dentro de cada archivo `.vue` particular para mi HTML, estilos y JS ha sido extraordinariamente útil. Me encanta que las cosas estén lo suficientemente separadas para ver cada pieza con claridad, pero lo suficientemente juntas como para No estoy cambiando de contexto. Acelera mi desarrollo y me he dado cuenta de que el marcado se mantiene bastante semántico.

También puede notar que su resaltador de sintaxis no reconoce automáticamente los archivos `.vue`, así que instalé esto para Sublime Text.

Esta es la forma más básica de importar/exportar componentes a un archivo (vimport:c en vue-sublime snippets)

import New from './components/New.vue';

export default {
  components: {
    appNew: New
  }
}

Para ver más de un ejemplo de la vida real, veamos una muestra de la última demostración de etiqueta de vino que usamos, con los componentes separados en sus propias plantillas:

Aplicación.vue:

<template>
  <div class="container">

  <main>
      <component :is="selected">
        <svg class="winebottle" aria-labelledby="title" xmlns="http://www.w3.org/2000/svg" viewBox="0 155 140 300">
          ...
      </svg>
      </component>
    </main>

    <aside>
      <h4>Name your Wine</h4>
      <input v-model="label" maxlength="18">
      <div class="button-row">
        <h4>Color</h4>
        <button @click="selected ='appBlack', labelColor="#000000"">Black Label</button>
        <button @click="selected ='appWhite', labelColor="#ffffff"">White Label</button>
        <input type="color" v-model="labelColor" defaultValue="#ff0000">
      </div>
    </aside>

  </div>
</template>

<script>
  import Black from './components/Black.vue'
  import White from './components/White.vue'
  ...
  export default {
      data: function () {
        return {
          selected: 'appBlack',
          label: 'Label Name',
          ...
        };
      },
      components: {
          appBlack: Black,
          appWhite: White,
          ...
      }
  }
</script>

<style>
  @import "./assets/style.css";
</style>

Componente negro:

<template>
  <div>
    <slot></slot>
  </div>
</template>

<style scoped>
  .label {
    fill: black;
  }
  .bottle, .wine-text {
    fill: white;
  }
  .flor {
    fill: #ccc;
  }
  .bkimg {
    filter:url(#inverse)
  }
</style>

Tenga en cuenta que estoy usando el componente aquí para diseñar cada ranura de manera diferente, esa es una forma muy buena de trabajar, pero es solo una forma. Hay infinitas formas de componer su aplicación con componentes, ranuras y accesorios. El código aquí también solo muestra una parte de lo que está sucediendo. He creado un repositorio para que lo explore, ya que usé Vue-cli desde el principio para construirlo. Recomiendo usar Vue-cli junto con leer esto y construir algunos componentes y pasar el estado con accesorios de una manera simple, solo para acostumbrarse al flujo de trabajo. ¡Es muy intuitivo y rápido una vez que superas la configuración inicial!

Ganchos de ciclo de vida

Antes de hablar sobre los ganchos del ciclo de vida, debemos retroceder un poco y hablar sobre el DOM virtual que mencioné en el primer artículo. Noté que Vue.js tiene un DOM virtual, pero no realmente lo que hace.

Cuando trabaja con algo como jQuery, en esencia, está escuchando el DOM y cambiando las cosas en función de esas actualizaciones. Terminamos pasando mucho tiempo comprobando qué está haciendo el DOM y almacenando el estado allí. Por el contrario, un DOM virtual es una representación abstracta de un DOM, algo así como una copia, pero en este caso será nuestra copia maestra. Cuando trabajamos con el estado de la forma en que lo hemos hecho con Vue en estos artículos, creamos el estado nosotros mismos y luego observamos cuándo cambia el estado.

Cuando se actualiza una instancia de Vue, Vue verificará si es diferente de lo que teníamos anteriormente. Si es realmente diferente, llamará a algunos de estos métodos de ciclo de vida y parcheará el DOM real con cambios. Esto es por eficiencia, de esta manera el DOM solo actualiza lo que es absolutamente necesario.

Los ganchos de ciclo de vida le brindan una método para que pueda desencadenar algo precisamente en diferentes momentos del ciclo de vida de un componente. Los componentes se montan cuando los instanciamos y, a su vez, se desmontan, por ejemplo, cuando los alternamos en una instrucción v-if/v-else.

Algunos de los ganchos disponibles para ti son: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeDestroy, y destroyed. Los documentos de API hacen un buen trabajo al describir cada uno si desea profundizar más. Aquí hay una pequeña demostración para mostrar cómo funcionan algunos de ellos (consulte la consola):

const Child = {
  template: '#childarea',
  beforeCreate() {
    console.log("beforeCreate!");
  }, 
 ...
};

new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});

<div v-if="isShowing">
  <app-child></app-child>
</div>

Ver la pluma de Sarah Dransner.

Tenga en cuenta que usamos v-if aquí en lugar de v-show, como v-if montará y desmontará el componente, mientras que v-show solo alternará la visibilidad (pero permanecerá montado y permanecerá en el DOM). Similar, <keep-alive></keep-alive> no se montará ni desmontará, sino que se activará y desactivará, ya que el componente permanece montado, pero no está en uso.

Así como los métodos disponibles en el componente vinculan esto automáticamente, los enlaces de ciclo de vida también se vinculan automáticamente a la instancia para que pueda usar el estado y los métodos del componente. De nuevo, no tienes que hacer console.log para saber qué this ¡se refiere a! *ojos más sinceros* Sin embargo, por esta razón, no debe usar una función de flecha en un método de ciclo de vida, ya que devolverá el padre en lugar de brindarle un buen enlace listo para usar.

A continuación, muevo una tonelada de elementos cuando cada componente está montado inicialmente, así que usaré el gancho montado para activar la animación correspondiente para cada componente. Es posible que deba presionar el botón de volver a ejecutar en la esquina inferior izquierda para ver la animación de inicio.

Vea el notificador meteorológico Pen Vue de Sarah Drasner (@sdras) en CodePen.

 mounted() {
    let audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rain.mp3'),
        tl = new TimelineMax();

    audio.play();
    tl.add("drops");

    //drops in
    tl.staggerFromTo("#droplet-groups g path", 0.3, {
      drawSVG: "0% -10%"
    }, {
      drawSVG: "100% 110%",
      repeat: 3,
      repeatDelay: 1,
      ease: Sine.easeIn
    }, 0.5, "drops");
 …
}

También los hay hermosos y sofisticados. <transition> y <transition-group> componentes que ofrece Vue y que usamos en otras partes de esta demostración, y los cubriremos, y por qué y cuándo usar cada uno en la última publicación de la serie sobre Animación.

Serie de artículos:

Representación, directivas y eventos
Componentes, accesorios y tragamonedas
Vue-cli (¡Estás aquí!)
Vuex
animaciones