En la publicación introductoria de esta serie, hablamos un poco sobre cómo los diseñadores web pueden beneficiarse utilizando Vue. En este tutorial, aprenderemos cómo poner en marcha Vue, y responderemos algunas preguntas iniciales que pueda tener.

Cómo agregar Vue a tu proyecto

Vue es solo JavaScript, lo que significa que puede cargarlo al incluir una etiqueta de script en su documento HTML. El sitio de Vue recomienda usar un CDN como https://cdn.jsdelivr.net/npm/vue Para estar seguro de obtener la última versión. También puede utilizar otros enlaces específicos de versión como https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.

Nota: Si está creando una aplicación de producción, se recomienda utilizar un controlador de paquete como hilo para administrar todas sus dependencias e implementarlo en ubicaciones impulsadas por CDN. Esto es particularmente importante si desea integrar Vue en su paquete de JavaScript, por ejemplo, utilizando algo como Webpack. 

Entendiendo el marcado y las plantillas

Al crear una “instancia” de Vue, puede utilizar la el Opción en el objeto de configuración para conectar su instancia al DOM. los el La opción debe ser un elemento o una cadena de selector CSS. Este elemento también puede contener código de plantilla. Entonces, en el HTML de tu página, podrías tener algo como esto:

 
título
 
contenido
 

Y luego en tu JavaScript, tendrías algo como esto:

var app = new Vue (el: "#app", datos: title: "Threat Level Midnight", contenido: "AGENT MICHAEL SCARN, fuertemente guapo sin siquiera intentarlo, se relaja en su escritorio, levanta los pies y revisa el archivo del caso Sus reposabrazos al lado de su insignia del FBI, que destella en la luz fluorescente de la oficina. Vestido con un traje, se aflojó la corbata y desabrochó algunos de los botones, revelando su pecho velludo. ",)

Una vez más, tenga en cuenta que la "#app" cadena se refiere a la div en su HTML. Vue reemplazará los contenidos internos de ese div con el resultado del paso de representación de Vue.

Lo que Vue hace en el fondo

Hemos establecido que Vue nos permite separar nuestra vista de nuestros datos. Es posible que se realice alguna lógica en la vista en sí misma, pero podemos evitar los siguientes patrones que conducen a un código deficiente o un estado incorrecto:

• Almacenamiento / lectura de datos en el DOM
• Actualización del DOM mediante la manipulación y modificación directas del DOM en lugar de la representación de plantillas
• Uso de métodos de procedimiento para evaluar el estado en formas inconexas que a menudo conducen a una representación DOM que no coincide con el estado deseado

Entonces, cómo funciona esto?

Vue te permite configurar información en el datos opción. Cualquier par clave-valor pasado dentro de este objeto se observará en busca de cambios, y cualquier cosa que dependa de ese dato será re-renderizado cuando los datos cambian.

Lo que esto significa esencialmente es que el datos objeto es reactivo. Si utiliza los métodos de manipulación de datos incorporados de JavaScript, el cambio hará que el motor de renderizado de Vue haga su magia..

Por ejemplo, si su objeto de datos está configurado así:

var vm = new Vue (el: "#app", data: items: []);

Con este código de plantilla:

 
item.text
 

Y luego agregas algunos artículos, como este:

vm.items = [texto: "Día de la Diversidad", texto: "Viaje a la playa"]

La plantilla se volvería a representar automáticamente, iterando (repasando) los elementos que se están configurando.

Importante advertencia para la reactividad

Como la característica de JavaScript que permite a Vue ver el datos el objeto (captadores y definidores de objetos) no proporciona información cuando se agregan nuevas claves o se eliminan las claves existentes, al agregar y eliminar las claves no se activa la representación. Por lo tanto, en el mismo ejemplo anterior, si el objeto de datos inicial está vacío (artículos: [] no está presente):

var vm = new Vue (el: "#app", datos: )

Cualquier cambio a vm.items no desencadenará una devolución. De la documentación de Vue: 

"Vue no permite agregar dinámicamente nuevas propiedades reactivas a nivel de raíz a una instancia ya creada".

Además, es importante tener en cuenta que al agregar elementos a una matriz mediante la sintaxis array [index] = 'nuevo valor', la representación no se activará. En su lugar, debe utilizar empalme, o Vue Vue.set Método, que está fuera del alcance de este artículo. Ver la lista de advertencias en la documentación de Vue..

Trabajando junto a jQuery y otras bibliotecas

Vue no está en conflicto con jQuery, Underscore, o cualquier otra biblioteca de utilidad de JavaScript popular. Sin embargo, debes pensar dos veces antes de intentar utilizar Vue junto con otro JavaScript. marco de referencia como reaccionar.

Es probable que no necesariamente necesitar jQuery además de Vue, pero es posible que desee utilizarlo en otras áreas de su aplicación que no estén representadas por Vue.

Vue también proporciona "enlaces" para integrarse con otras bibliotecas, por ejemplo, para realizar animaciones..

Usando Babel u otro Transpiler

Vue no requiere que Babel sea productivo con él. Sin embargo, Babel le permitirá utilizar algunas de las características de las características principales de JavaScript, como cadenas de plantillas y técnicas de manipulación de matrices más sofisticadas..

Vue no requiere ningún sistema de compilación especial, lo que lo hace muy accesible para los desarrolladores orientados al diseño que están acostumbrados a escribir pequeñas cantidades de JavaScript, al tiempo que siguen siendo lo suficientemente potentes como para integrarse en sistemas de compilación más complejos y aplicaciones completas de una sola página..

Usando Vue varias veces en la misma página

No solo puede tener varias instancias de Vue en la misma página, sino que incluso puede hacer referencia al mismo objeto de datos subyacente en la misma página. Por ejemplo, en nuestro ejemplo de lista de datos anterior, si nuestro JavaScript se veía así:

var sharedObject = items: [] let vm = new Vue (el: "#app", data: sharedObject) vm.items = [text: "Diversity Day", text: "Beach Trip" ]

El resultado de usar esta plantilla sería el mismo que en nuestro ejemplo anterior:

 
item.text
 

Sin embargo, también podemos agregar una segunda instancia de Vue que haga referencia a la misma representación de datos subyacente como esta:

var vm2 = new Vue (el: "# app2", datos: sharedObject)

Entonces podríamos mostrar, por ejemplo, el recuento de elementos en la lista:

 
items.length
 

Por supuesto, este puede no ser el comportamiento deseado. Es posible que desee crear dos componentes que no estén vinculados al mismo objeto subyacente, y que funcionarán sin problemas.

Si desea crear dos instancias separadas que comienzo con el mismo objeto subyacente, puede utilizar el Object.assign Método para crear nuevas copias del mismo objeto..

let vm2 = new Vue (el: "# app2", data: Object.assign (, sharedObject))

Conclusión

Vue es una excelente opción para los desarrolladores que desean un marco ligero que sea fácil de adoptar, pero anticipan la necesidad de un marco más sólido en el futuro. Vue escalará con tus necesidades. Comprender cómo usar Vue en varios escenarios (y tener una idea de lo que está sucediendo bajo la superficie) le proporcionará un conjunto de herramientas muy poderoso con el que podrá ser productivo desde el primer día..

En el siguiente tutorial, cubriremos más del valor único que Vue proporciona al observar algunos ejemplos del código limpio de Vue. Te veo allí!

Aprender vue.js

Aprenda Vue.js con nuestra guía de tutoriales completa de Vue.js, ya sea un programador experimentado o un diseñador web que busque nuevas técnicas de desarrollo de front-end.