La documentación oficial

2.0
Guía

Inicio
 Instalación

# Notas de compatibilidad
Vue no está soportado en IE8 ni versiones anteriores, porque utiliza características de ECMAScript
5 que son irreproducibles en ellos. Sin embargo soporta todos los navegadores compatibles con
ECMAScript 5.

# Notas de lanzamiento
Se pueden encontrar notas de lanzamiento detalladas para cada versión en GitHub.

Versión independiente

Simplemente descargala e incluyela con una etiqueta script. Vue se registrará como una variable
global.

! No utilices la versión minificada durante el desarrollo. ¡Perderás todas las advertencias

para los errores comunes!

Versión de desarrollo Con todas las advertencias y el modo depuración.

Versión de producción Advertencias eliminadas, 24.72kb min+gzip

# CDN
Recomendación: unpkg, el cual contendrá la última versión apenas haya sido publicada en npm.
También puedes explorar el código fuente del paquete npm en unpkg.com/vue/.
 También se encuentra disponible en jsdelivr o cdnjs, pero estos dos servicios pueden tardar algún
tiempo en sincronizar, por lo que la última versión puede no estar disponible todavía.

NPM

NPM es el método de instalación recomendado cuando se construyen aplicaciones de gran escala

con Vue. Se integra bien con empaquetadores de módulos como Webpack o Browserify. Vue
también provee herramientas complementarias para la creación de componentes de un solo
archivo.

Shell

# última versión estable

$ npm install vue

# Versión independiente vs. versión Runtime-only

Hay dos versiones disponibles, la independiente y la runtime-only. La diferencia es que la primera
incluye un compilador de plantillas y la última no.

El compilador de plantillas es responsable de compilar plantillas de Vue en funciones de

renderizado de JavaScript puro. Si deseas utilizar la opción template , entonces necesitas el
compilador.

La versión independiente incluye el compilador y soporta la opción template . También

depende de la presencia de APIs del navegador, por lo que no puedes usarlo para
renderizado del lado servidor.

La versión runtime-only no incluye el compilador de plantillas y no soporta la opción

template . Solo puedes utilizar la opción render cuando estás utilizando esta versión, pero
funciona con componentes de un solo archivo, porque las plantillas de los componentes de un
solo archivo son pre-compiladas en funciones render durante la etapa de construcción. La
versión runtime-only es aproximadamente 30% más liviana que la versión independiente,
ocupando solo 17.14kb min+gzip.

Por defecto, el paquete NPM exporta la versión runtime-only. Para utilizar la versión
independiente, añade el siguiente alias en tu archivo de configuración de Webpack:

JS
 resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}

Para Browserify, puedes añadir un alias a tu archivo package.json:

JS

"browser": {
"vue": "vue/dist/vue.common"
},

! No realices un import Vue from 'vue/dist/vue.js' - dado que algunas herramientas

en bibliotecas de terceros pueden también importar vue y podría causar que la
aplicación intente cargar ambas versiones al mismo tiempo, conduciendo a errores.

# Ambientes CSP
Algunos ambientes, como las aplicaciones de Google Chrome, imponen las Políticas de Seguridad
de Contenido (CSP por sus siglas en inglés), las cuales prohiben el uso de new Function() para
la evaluación de expresiones. La versión independiente depende de esta característica para
compilar plantillas, por lo que no es posible utilizarla en estos ambientes.

Por otro lado, la versión runtime-only es completamente compatible con CSP. Cuando utilices la
versión runtime-only Webpack + vue-loader o Browserify + vueify, tus plantillas serán pre-
compiladas en funciones render las cuales funcionan perfectamente en ambientes CSP.

CLI

Vue.js provee una CLI oficial para estructurar rápidamente Aplicaciones de una Sola Página (SPA
por sus siglas en inglés). Provee configuraciones todo-en-uno para un flujo de trabajo frontend
moderno. Solo toma unos minutos estar preparado para el desarrollo con: recarga en caliente,
lint-on-save y versiones listas para producción:

Shell

# Instala vue-cli
$ npm install --global vue-cli
 # Crea un nuevo proyecto usando la plantilla "webpack"
$ vue init webpack my-project
# Instala las dependencias y ¡listo!
$ cd my-project
$ npm install
$ npm run dev

! La CLI asume un conocimiento previo de Node.js y las herramientas de trabajo

asociadas. Si eres principiante con Vue o las herramientas de desarrollo front-end, te
recomendamos fervientemente leer la guía sin ninguna herramienta de desarrollo previo
a usar la CLI.

Versión desarrollo

Importante: los archivos construidos dentro de la carpeta /dist de GitHub son compiladas solo
durante lanzamientos. Para utilizar el código fuente más reciente de Vue en GitHub, ¡tendrás que
construirlo tú mismo!

Shell

git clone https://github.com/vuejs/vue.git node_modules/vue

cd node_modules/vue
npm install
npm run build

Bower

Shell

# Última versión estable

$ bower install vue

Gestores de módulos AMD

La versión independiente o las instaladas a través de Bower están encapsuladas con UMD, por lo
que pueden ser usadas directamente como módulos AMD.
Introducción

¿Qué es Vue.js?

Vue (pronunciado /vjuː/ en inglés, como view) es un framework progresivo para construir
interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde el
inicio para ser adoptado incrementalmente. La biblioteca principal se enfoca solo en la capa de la
vista, y es muy simple de utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro
lado, Vue también es perfectamente capaz de soportar aplicaciones sofisticadas de una sola
página (en inglés single-page-application o SPA) cuando se utiliza en combinación con
herramientas modernas y librerías compatibles.

Si eres un desarrollador de frontend con experiencia y quieres saber como Vue se compara con
otras bibliotecas/frameworks, revisa esta comparación.

Empezando

! La guia oficial asume un conocimiento intermedio de HTML, CSS y JavaScript. Si eres

totalmente nuevo en el desarrollo de frontend, puede no ser la mejor idea empezar a
utilizar un framework - ¡aprende los conceptos básicos y luego regresa aquí! La
experiencia previa con otros frameworks ayuda, pero no es obligatoria.

La manera más sencilla de probar Vue.js es usando el ejemplo “hola mundo” en JSFiddle.
Siéntete libre de abrilo en otra pestaña y revisarlo a medida que avanzamos con ejemlos básicos.
Si no, puedes crear un archivo .html e incluir Vue con:

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

La página de instalación provee más opciones para instalar Vue. Nota que no recomendamos a
los principiantes comenzar con vue-cli , especialmente si no estás familiarizado con las
herramientas de trabajo basadas en Node.js.
Renderizado declarativo

En el corazón de Vue.js se encuentra un sistema que nos permite renderizar declarativamente

datos en el DOM utilizando una sintaxis de plantillas directa:

HTML

<div id="app">
{{ message }}
</div>

JS

var app = new Vue({

el: '#app',
data: {
message: 'Hello Vue!'
}
})

Hello Vue!

¡Ya hemos creado nuestra primera aplicación Vue! Esto parece bastante similar a renderizar una
plantilla de texto, pero internamente Vue ha hecho muchas cosas. Los datos y el DOM están
enlazados, y todo es reactivo. ¿Cómo lo sabemos? Abre la consola de JavaScript en tu navegador
(ahora mismo, en esta página) y cambia el valor de app.message . Deberías ver el ejemplo
renderizado actualizarse acorde a lo que has ingresado.

Además de interpolación de texto, tambíen podemos enlazar atributos de un elemento, por

ejemplo:

HTML

<div id="app-2">
<span v-bind:title="message">
¡Deja tu mouse sobre este mensaje unos segundos para ver el atributo `title` en
</span>
</div>

JS

var app2 = new Vue({