PDF de programación - VUEJS La documentación oficial

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:

# Instala vue-cli
$ npm install --global vue-cli

Shell

# 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!

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

# Última versión estable
$ bower install vue

Gestores de módulos AMD

Shell

Shell

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:

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

HTML

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

JS

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

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:

<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>

HTML

var app2 = new Vue({

JS

el: '#app-2',
data: {
message: 'You loaded this page on ' + new Date()
}
})

¡Deja tu mouse sobre este mensaje unos segundos para ver el atributo
`title` enlazado dinámicamente!

Aquí nos encontramos con algo nuevo. El atributo v-bind que estás viendo es conocido como
una directiva. Las directivas llevan el prefijo v- para indicar que son atributos especiales
provistos por Vue y, como debes haber adivinado, aplican un comportamiento reactivo especial al
DOM renderizado. En este caso, básicamente está diciendo “mantén el atributo title de este
elemento enlazado con la propiedad message en la instancia de Vue”.

Si abres nuevamente tu consola JavaScript y escribes app2.message = 'some new message' ,
verás que el HTML enlazado (en este caso, el atributo title ) ha sido actualizado.

Condicionales y bucles

Es bastante sencillo alternar la presencia de un elemento:

<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>

var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})

Now you see me

HTML

JS

Adelante, escribe app3.seen = false en la consola. Deberías ver desaparecer el mensaje.

Este ejemplo demuestra que no solo podemos enlazar datos con texto y atributos, sino también
con la estructura del DOM. Además, Vue provee un sistema de transiciones muy poderoso que
puede aplicar automáticamente efectos de transición cuando los elementos son
agregados/actualizados/removidos por Vue.

Hay unas cuantas otras directivas, cada una con una funcionalidad especial. Por ejemplo, la
directiva v-for puede ser utilizada para mostrar una lista de elementos usando los datos de un
array:

HTML

JS

<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: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})

1. Learn JavaScript
2. Learn Vue
3. Build