Cómo crear una aplicación con vue.js

Sep 14, 2025

Cómo

[dieciséis]

El ecosistema JavaScript ha estado cambiando durante más de una década, lo que significa que los desarrolladores delanteros han tenido que rastrear nuevas tecnologías. Después de la prueba Marcos de JavaScript y bibliotecas durante más de cinco años, he encontrado el que funciona para mí: VUE.JS.

En este tutorial, explicaré la estructura básica de una aplicación VUE. Además, voy a definir los componentes en detalle y a tocar características más avanzadas como Mixins para demostrar Cómo iniciar un blog Corriendo en su propia aplicación simple.

¿Quieres más consejos? Tenemos guías en todo desde Alojamiento web servicios para almacenamiento en la nube Opciones y lo mejor. Creador de sitios web alrededor.

Las mejores plataformas de blogs gratuitas.

Las ventajas de vue.js

El principal punto de venta de VUE.JS es lo fácil que es aprender, ya que está escrito en HTML, CSS y JavaScript. La biblioteca es compatible con un conjunto de documentación que se actualiza constantemente. El tamaño de la biblioteca es pequeño en comparación con los competidores. Además, su CLI 3.0 ha sido reescrito para ser una prueba de futuro.

Acelerar el rendimiento con vue.js

Empezar

Para seguir este tutorial, solo necesita una conexión a Internet, ya que todo el desarrollo se llevará a cabo en CODESANDBOX, un editor de código web de característica completa. Se puede encontrar el enlace al código. aquí .

Nuestra aplicación incluirá archivos de configuración como Package.json , un index.html Página que es el archivo de entrada de nuestra aplicación y una SRC Carpeta que es el núcleo de nuestra aplicación. El contenido de esta carpeta se explicará a lo largo del tutorial.

Componentes en VUE

VUE ofrece la capacidad de crear componentes. Estos son elementos personalizados utilizados para encapsular el código reutilizable y pueden variar desde un botón simple a una página con todas las funciones. Un componente consta de tres secciones principales, & lt; plantilla & gt; De & lt; script & gt; y & lt; estilo & gt; , que se explorará más adelante.

Crear app.vue

Vamos a iniciar nuestra aplicación creando un App.vue Archivo que es nuestra raíz. Este componente encerrará todos nuestros futuros componentes. El primer componente será muy simple, ya que no tiene datos dinámicos, sino que simplemente incluye las tres secciones mencionadas anteriormente (plantilla, script, estilo).

 & lt; plantilla & gt;
& lt; div id = "aplicación" & gt;
& lt; img class = "logo" src = "./ activos / logo.png" alt = "Vue JS logo oficial" / & gt;
& lt; / DIV & GT;
& lt; / plantilla & gt;
& lt; script & gt;
Exportación predeterminada {
Nombre: "App",
Componentes: {}
};
& lt; / script & gt;
& lt; estilo & gt;
#App {// NORMAL CSS aquí}
& lt; / estilo & gt;

Crear article.vue

Para crear nuestra aplicación de blog, necesitamos artículos. Esto implica crear un archivo llamado Artículo.Vue y almacenándolo dentro de una carpeta de componentes. Este componente va a ser más complejo, ya que incluirá algunas características básicas de VUE que le permitirán ser dinámico.

La primera característica que vamos a introducir se llama una directiva, los tirantes dobles rizados, que reemplazarán el valor del título con una propiedad dinámica pasada al componente. Este es un token específico que se agrega dentro del HTML y está usado por la Biblioteca VUE para modificar el DOM para producir HTML.

 & lt; plantilla & gt;
& lt; div class = "article" & gt;
& lt; img src = "./../ activos / logo.png" / & gt;
& lt; h1 & gt; {{title}} & lt; / h1 & gt;
& lt; p & gt; {{value}} & lt; / p & gt;
& lt; / DIV & GT;
& lt; / plantilla & gt;

Para que el componente sea dinámico, debemos poder pasar datos. Esto se puede lograr al declarar propiedades. Un componente también tiene acceso a su propia variable de instancia privada llamada DATOS.

 & lt; script & gt;
Exportación predeterminada {
Props: {
Título: Cadena,
Valor: {tipo: cadena, requerido: true}
},
datos() {
Devolver {Likes: 0, Showingsnippets: verdadero};
}};
& lt; / script & gt;

Este componente solo necesita un estilo básico para mostrar correctamente.

Para mostrar nuestro primer artículo, debemos tomar tres pasos: Incluya el archivo en App.vue , agreguelo en la instancia de VUE y consulte como parte de la sección de la plantilla:

& lt; plantilla & gt;
& lt; div id = "aplicación" & gt;
& lt; img class = "logo" src = "./ activos / logo.png" alt = "Vue JS logo oficial" / & gt;
& lt; articlecontainer / & gt;
& lt; / DIV & GT;
& lt; / plantilla & gt;
& lt; script & gt;
Importar ArticleContainer de "./components/article";
Exportación predeterminada {
Nombre: "App",
Componentes: {articlecontainer}};
& lt; / script & gt;

Desafortunadamente, ejecutar este código producirá un error, debido al hecho de que no hayamos proporcionado todas las propiedades que se establecen según sea necesario dentro del componente del artículo. Para solucionar el problema, debemos declarar un objeto de datos y usar una nueva directiva llamada v-bind Para pasar el objeto al componente del artículo.

 & lt; plantilla & gt;
...
& lt; articlecontainer v-bind = "post" / & gt; ...
& lt; / plantilla & gt;
& lt; script & gt;
...
Nombre: "App",
Datos: Función () {
  Devuelve {POST: {
    Título: "Mi primer post",
    Valor: "Lorem Ipsum Dolor Sit Dmet, ...",
    img: "./assets/logo.png"}
  };
}, ...
& lt; / script & gt;

Propiedades computadas

Para hacer que nuestro componente sea más complejo, introduciremos una nueva característica de la API VUE llamada computado . Por lo general, esto se conoce como 'Propiedades computadas', ya que su valor se convierte en una propiedad real. Para mostrar cómo funcionan las propiedades computadas, mejoraremos nuestro componente para admitir una vista de fragmentos y un artículo completo.

 & lt; plantilla & gt;
& lt; div class = "article" & gt;
& lt; img src = "./../ activos / logo.png" / & gt;
& lt; h1 & gt; {{title}} & lt; / h1 & gt;
& lt; p v-if = "showingsnippets" & gt; {{stippets}} & lt; / p & gt;
& lt; p v-mas & gt; {{value}} & lt; / p & gt;
& lt; botón V-ON: Click = "togglearticle" & gt; {{buttontext}} & lt; / Button & GT;
& lt; botón v-on: Click = "le gusta ++;" & gt; le gusta: {{like}} & lt; / button & gt;
& lt; / DIV & GT;
& lt; / plantilla & gt;
& lt; script & gt;
Exportación predeterminada {
Props: {
Título: Cadena,
Valor: {Tipo: Cadena, Requerido: verdadero},
SnippetsLength: {Tipo: Número, Requerido: Falso, Predeterminado: 20}
},
datos() {
Devolver {Likes: 0, Showingsnippets: verdadero};
},
calculado: {
fragmentos () {
const fullarticle = esto.value;
const articipsnippets = fullarticle.substring (0, esto. SnippetsLength);
Devuelve `$ {Articipsnippets} ...`;},
botón de texto() {
Devuelve esto .Showingsnippets? "Mostrar artículo completo": "Mostrar fragmentos";}
},
métodos: {
Togglearticle () {
Esto.showingsnippets =! Esto.showingsnippets; }
}};
& lt; / script & gt;

Este ejemplo es proporcionar una nueva directiva. v-si y v-on , que mostrará u ocultará automáticamente los componentes, utilizando una variable privada llamada Showingsnippets . El valor de los fragmentos se calcula sobre la marcha y cambiará si alguna de las propiedades que usa ( SnippetsLength De articulo completo ) cambios.

MainComponent.Vue

El siguiente paso implica un nuevo componente que va a ser el cuerpo de nuestra solicitud, utilizado para emular una llamada de API y nos introducirá a una nueva directiva v-para . La VUE API proporciona acceso a una lista completa de ganchos para cargar y desencadenar eventos en el momento adecuado (en nuestro caso montado). Estos están fuera del alcance de este tutorial, pero se pueden encontrar detalles. aquí .

 & lt; plantilla & gt;
& lt; div id = "maincontent" & gt;
& lt; articlecontainer v-for = "(índice, índice) en las publicaciones": clave = "índice" v-bind = "item" / & gt;
& lt; / DIV & GT;
& lt; / plantilla & gt;
& lt; script & gt;
Importar Articlecontainer de "./article.vue";
Importar falsos de "../data/posts.js";
Exportación predeterminada {
Datos: Función () {
retorno {publicaciones: []};
},
métodos: {
fakapicall () {
// Aquí estamos emulando la posibilidad de cargar el valor con una API
esto.posts = falsposts;}
},
Componentes: {articlecontainer},
montado () {
esto.fakapicall ();}
};
& lt; / script & gt;

Construir una mezcla

Otra característica poderosa de VUE.JS son las mezclas. Estos son métodos JS reutilizables que expanden las características de un componente específico. Las mezclas tienen acceso a la mayoría de las API VUE (propiedades, datos, métodos). Normalmente se almacenan en una mezcla carpeta, creada dentro del directorio SRC y, como Mixins, son puramente JS, guardado con un .js extensión.

Al principio, el poder de esta característica puede no ser obvio. Sin embargo, a medida que se familiarice con Vue y su API, Mixins comenzará a tomar forma y apoyar su solicitud. He visto esta función utilizada para definir la validación de entrada, la internacionalización y proporcionar la funcionalidad del producto, como la carga del archivo.

La principal diferencia entre un componente normal y una mezcla es que este último se puede incluir y aplicar a cualquier componente. Por ejemplo, puede agregar un archivo Cargar Mixin a un botón o una imagen y todos tendrán acceso a la nueva característica.

Vamos a construir una mezcla de accesibilidad. Esto proporcionará un togglecontrast Método que se puede aplicar a cualquiera de nuestros componentes.

 Predeterminado de exportación {
Props: {
LightTextColour: {Type: String, Predeterminado: "# 252525"},
BackbackRangrourColour: {Type: String, Predeterminado: "#fff"},
DarkTextColour: {Type: String, Predeterminado: "#fff"},
DarkBackgroundColour: {Type: String, Predeterminado: "# 252525"}
},
datos() {
Devolver {Islas Lluvia: verdadero};
},
métodos: {
togglehighcontrast () {
esta luz =! esta.islight;
Si (esta luz) {
esto. $ el.style.backgroundColor = esta.LightBackgroundColour;
esto. $ el.style.color = este.lightTextColor;
} demás {
esto. $ el.style.backgroundColor = esto.DarkBackgroundColour;
esto. $ el.style.color = esto.DarkTextColor; }
}}
};

Ahora, nuestro código se define, podemos incluirlo en cualquier componente y utilizar sus métodos y propiedades como si se definieran en el componente real. Mixins podría ser impulsada por las propiedades, permitiéndolas ofrecerla tan pronto como se incluyen en el componente, o es posible que necesiten alguna acción para tener efecto (por ejemplo, tener que llamar a un método específico).

Para aprovechar al máximo esta función, debemos realizar la siguiente modificación dentro de nuestro código:

 & lt; plantilla & gt;
& lt; div class = "article" & gt;
...
& lt; Botón V-ON: Click = "ToggleHighContrast" & GT; Toggle High Contrast & Lt; / Button & GT;
& lt; / DIV & GT;
& lt; / plantilla & gt;

& lt; script & gt;
Importar la accesibilidad de "../mixins/accessibility.js";
...
Mixins: [Accesibilidad]
};
& lt; / script & gt;

Ahora podemos alternar el contraste en el componente individual utilizando el nuevo botón definido. Es importante entender que incluso si no se han definido propiedades adicionales, nuestro componente de artículo es realmente capaz de aceptar LightTextColor De DarkTextColor De campo de campo y DarkbackgroundColour . Estos se definen dentro de la mezcla de accesibilidad.

Nuestro pequeño prototipo ahora está completamente funcionando y se puede utilizar como referencia para proyectos futuros.

Este artículo fue publicado originalmente en el número 316 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar problema 316 aquí o Suscríbete aquí .

Artículos relacionados:

9 de los mejores marcos de JavaScript
Revelado: las últimas tendencias de Javascript.
Cómo construir un sitio de blogs con Gatsby

Cómo crear una aplicación con vue.js

Las ventajas de vue.js

Empezar

Componentes en VUE

Crear app.vue

Crear article.vue

Propiedades computadas

MainComponent.Vue

Construir una mezcla

Cómo - Artículos más populares

Cómo agregar fuentes en Photoshop

Rebuille un sitio web de 2004 Flash para 2018

10 consejos para el modelado de superficie dura

Aprende a cultivar follaje con partículas X

Cómo crear activos digitales

Cómo agregar fondos CSS divertidos a sus sitios

Crea efectos de pintura en Photoshop CC

Cómo dominar el arte 3D Fan

Categorías