Tutorial de Vue js

Tutorial básico de Vue js con algunos ejemplos.

Vue js es un framework progresivo para construir interfaces de usuario.
A diferencia de otros frameworks monolíticos, Vue js está diseñado desde cero para ser adoptable incrementalmente.
La biblioteca central está enfocada sólo en la capa de visualización, y es fácil de seleccionar e integrar con otras bibliotecas o proyectos existentes.

Este tutorial de Vue js asume que ya tienes un nivel de HTML, CSS y JavaScript.
Si eres totalmente nuevo en el desarrollo frontend, puede que no sea la mejor idea entrar directamente en un framework como primer paso.
Para ello te recomiendo empezar por libros de html, css y javascript.

O los tutoriales interactivos, como el html5.

La filosofía de Vue js es proporcionar la API más simple posible para crear un enlace de datos bidireccional en tiempo real entre una vista (plantilla HTML) y un modelo (objeto JavaScript).

La forma más fácil de instalar Vue js es simplemente conectarlo con la etiqueta <script> al final del documento HTML.
Todo el framework está en un archivo js, que puede descargarse del sitio oficial o importarse directamente a través de CDN:

Para desarrollo:

Para producción:

Si usas NodeJS, entonces Vue js está disponible como un módulo npm. El módulo tiene su propia interfaz en el terminal para la configuración del proyecto.

Para vincular la vista con el modelo se crea una nueva instancia de Vue js pasando un objeto de opciones, que contienen el elemento de anclaje (un div por ejemplo) y los datos.

El ejemplo más sencillo con Hola mundo.

<div id="app">
{{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Este simple código contiene muchos trucos bajo la manga.
Los datos y el DOM ahora están vinculados, y todo ahora es reactivo.
¿Cómo lo sabemos? Abre las herramientas para desarrolladores del navegador web (Control+May+I en Chrome) y en la consola de JavaScript establece app.message a un valor diferente. Deberías ver el ejemplo renderizado con el nuevo valor.

Además de la interpolación de texto, también podemos vincular atributos como este:

<div id="app-2">
<span v-bind:title="message">
Pasa el ratón por encima
</span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Cargado el ' + new Date().toLocaleString()
  }
});

Aquí nos encontramos con algo nuevo. El v-bind es una directiva.
Las directivas tienen el prefijo v- para indicar que son atributos especiales provistos por Vue js aplican un comportamiento reactivo especial al DOM renderizado.
Aquí, básicamente dice "mantener el atributo de título de este elemento actualizado con la propiedad del mensaje en la instancia de Vue".

Si abres de nuevo la consola JavaScript y introduces app2.message = 'hay un titular nuevo', verás una vez más que el HTML enlazado, en este caso el atributo del título, se ha actualizado.
Este ejemplo demuestra que podemos vincular datos a atributos, pero también a la estructura del DOM.
Además, Vue js también proporciona un poderoso efecto de transición.

Hay bastantes otras directivas, cada una con su propia funcionalidad especial.
Por ejemplo, la directiva v-for se puede usar para mostrar una lista de elementos utilizando los datos de un array:

<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Tutorial de html' },
      { text: 'Tutorial de Vuejs' },
      { text: 'Animaciones css' }
    ]
  }
});

Vue js también proporciona la directiva v-model que hace que la vinculación bidireccional entre la entrada del formulario y el estado de la aplicación sea muy sencilla:

<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hola desde el modelo'
  }
});

Otra cosa que puede hacerse en el código anterior es el atributo v-if. Muestra u oculta el elemento completo, dependiendo del estado de la variable.
Para ello añadir una propiedad "ver" a los datos:

data: { ver: true }
...
<div v-if="ver">Se muestra</div>

Lo mismo de antes, si abrimos la consola de Javascript y establecemos ver a false, el div no se mostrará.

Para mostrar precios en el formato correcto, podemos definir un filtro de moneda simple. Los filtros permiten modificar o filtrar los datos del modelo. Para definir un filtro personalizado que ponga la primera letra en mayúsculas:

filters: {
   mayus: function (valor) {
     if (!valor) return '';
     valor = valor.toString();
     return valor.charAt(0).toUpperCase()+valor.slice(1);
   }
}

Luego se aplica el filtro a las interpolaciones de texto:

{{mensaje | mayus}} o v-bind:title="mensaje | mayus"

En conclusión Vue js es mucho más de lo que hemos visto en estos ejemplos. La biblioteca sabe cómo hacer animaciones, componentes personalizados y muchas otras funciones. Para ello puedes revisar su página web de ejemplos.