Conceptos básicos de Vuejs

El sistema de componentes es otro concepto importante en Vue, porque es una abstracción que nos permite crear aplicaciones a gran escala compuestas de componentes pequeños, independientes y, a menudo, reutilizables. Si lo pensamos, casi cualquier tipo de interfaz de aplicación se puede abstraer en un árbol de componentes:

En Vue, un componente es esencialmente una instancia de Vue con opciones predefinidas. Registrar un componente en Vue es sencillo:

// Define un nuevo componente llamado todo-item
Vue.component('todo-item', {
 template: '<li>Esta es una tarea.</li>'
})

Ahora puedes incluirlo en el template de otro componente:

<ol>
 <!-- Crea una instancia del componente todo-item -->
 <todo-item></todo-item>
</ol>

Pero esto supondría tener el mismo texto para cada tarea, que no es muy interesante. Es posible que se pueda pasar datos de un scope o contexto padre a uno secundario en los componentes hijos. Modifique la configuración del componente para que acepte una propiedad:

Vue.component('todo-item', {
  // El componente todo-item ahora acepta una
  // "propiedad", que es como un atributo personalizado.
  // Esta propiedad es llamada todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Ahora podemos pasar la tarea a cada componente repetido usando v-bind:

<div id="app-7">
  <ol>
    <!--
      Ahora proporcionamos a cada todo-item con el objeto todo
      que representa, para que su contenido pueda ser dinámico.
      También necesitamos proporcionar a cada componente con una "clave",
      que vamos a explicar más adelante.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div> 

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetales' },
      { id: 1, text: 'Queso' },
      { id: 2, text: 'Cualquier otra cosa que se supone que los humanos coman' }
    ]
  }
})

En una aplicación grande, es necesario dividir toda la aplicación en componentes para que el desarrollo sea manejable. Hablaremos mucho más sobre los componentes más adelante en la guía, pero aquí hay un ejemplo (imaginario) de cómo se vería el template de una aplicación con componentes: 

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

La instancia Vue

Cada aplicación de Vue se comienza creando una nueva Instancia de Vue con la función Vue:

var vm = new Vue({
 // opciones
})

Por ahora, solo es necesario saber que todos los componentes de Vue son también instancias de Vue, por lo tanto aceptan el mismo objeto options (excepto para unas pocas específicas opciones de raíz).

Hooks del Ciclo de vida de la Instancia 

Cada instancia de Vue pasa a través de una serie de pasos de inicialización cuando es creada - por ejemplo, se necesita configurar la observación de datos, compilar la plantilla, montar la instancia en el DOM y actualizar el DOM cuando cambian los datos. En el camino, también se ejecutan funciones llamadas hooks del ciclo de vida, lo que brinda a los usuarios la oportunidad de agregar su propio código en etapas específicas.

Por ejemplo, el hook created puede ser utilizado para ejecutar código después que una instancia es creada:

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` hace referencia a la instancia vm
    console.log('a es: ' + this.a)
  }
})
// => "a es: 1"

También hay otros hooks que se llamarán en diferentes etapas del ciclo de vida de la instancia, como mounted, updated, y destroyed. Todos los hooks del ciclo de vida se llaman en el contexto this apuntando a la instancia de Vue que lo invoca.

No usar arrow functions en una propiedad de opciones o respuesta, como created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Dado que las arrow functions están vinculadas al contexto padre, this no será la instancia de Vue como lo esperaría, lo que suele producir errores, como ‘Uncaught TypeError: Cannot read property of undefinedoUncaught TypeError: this.myMethod is not a function`.

 

Diagrama del Ciclo de vida 

 

Interpolaciones

Texto

La forma más básica de enlace de datos es la interpolación de texto usando la sintaxis de mustaches (llaves doble):

<span>Message: {{ msg }}</span>

La etiqueta del mustache se reemplazará con el valor de la propiedad msg en el objeto de datos correspondiente. También se actualizará cada vez que cambie la propiedad msg del objeto de datos.