Vue.js se ha ganado su reputación como un marco JavaScript progresivo. Puede usar Vue.js para crear aplicaciones de una sola página (SPA) o desarrollar interfaces de usuario específicas.

Aquí aprenderá los conceptos básicos de Vue.js, incluido cómo crear un componente de Vue y trabajar con el objeto de opciones para representar datos dinámicos.

Vue.js es uno de los marcos JavaScript más populares. Para comenzar con Vuey para agregarlo a su página HTML, copie la etiqueta de secuencia de comandos a continuación y péguela en la sección principal:

<guionorigen="">guion>

Usar el enlace CDN es una excelente opción para mejorar el HTML estático o agregar funcionalidad a su aplicación.

Sin embargo, debe instalar Vue.js a través de npm para usar más funciones avanzadas, como la sintaxis de componente de archivo único (SFC), que es útil al crear aplicaciones Vue completas.

Creación de una aplicación Vue

Acceder a la biblioteca Vue a través del enlace CDN proporciona un objeto Vue, incluido el .createApp() método.

Como su nombre lo indica, puede crear una aplicación Vue utilizando este método.

Por ejemplo:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<guion>
 const app = Vue.createApp();
guion>
cuerpo>
html>

Aquí la aplicación creada se almacena en el aplicación variable. Después de crear la instancia de la aplicación, debe renderizarla usando el .montar() método. Este método indica dónde montar la aplicación en el Modelo de objeto de documento (DOM).

Al igual que:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">división>
<guion>
 const app = Vue.createApp();
 aplicación.mount("#aplicación");
guion>
cuerpo>
html>

Para usar Vue .montar() método, debe proporcionar un elemento DOM o selector como argumento. En este ejemplo, montamos la aplicación Vue usando el elemento DOM con el #aplicación IDENTIFICACIÓN.

Es importante tener en cuenta que la aplicación Vue solo controla los elementos que se especificaron mediante un identificación. Además, la aplicación no tiene control sobre nada fuera de esos elementos, incluidos los eventos de clic o cualquier otra interactividad.

El último paso para crear una aplicación Vue es llamar al .montar() después de completar todas las configuraciones de la aplicación.

El objeto de opciones en Vue

En Vue.js, usas el Opciones object como un objeto de configuración para crear una instancia o componente de Vue.

Es una parte esencial de una aplicación Vue, ya que define el comportamiento y los datos de cada instancia o componente. El Opciones El objeto consiste en varias propiedades que representan varios aspectos de la instancia o componente.

Algunas de las propiedades comúnmente utilizadas en el Opciones objeto son:

• datos: esta propiedad define el objeto de datos para las aplicaciones Vue. Es una función que devuelve un objeto que contiene las propiedades de los datos y sus valores iniciales.
• métodos: El métodos La propiedad del objeto Opciones tiene funciones vitales para habilitar la representación dinámica.
• plantilla: esta propiedad define la plantilla HTML para la instancia o el componente de Vue. Es una cadena que contiene el marcado HTML, que el compilador de plantillas de Vue puede analizar.

Tenga en cuenta que al usar una propiedad de plantilla, el compilador de Vue solo representará el contenido definido en la plantilla.

Aquí hay un ejemplo de una aplicación Vue con el datos, métodos, y plantilla propiedades:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<h1 @hacer clic="mensaje inverso" >{{ texto }}h1>
división>
<guion>
constante aplicación = Vue.createApp({
// plantilla: '
Bienvenido a tu aplicación Vue
',
 datos() {
devolver {
 texto: "Esta es tu aplicación Vue"
 };
 },
 métodos: {
 mensaje inverso () {
este.texto = este.texto.split('').reverse().join('')
 }
 }
 });
aplicación.montar("#aplicación");
guion>
cuerpo>
html>

Este programa representa una aplicación Vue básica que muestra el texto "Esta es su aplicación Vue" mediante interpolación de texto y permite a los usuarios hacer clic en ella para revertir el mensaje.

El datos() función devuelve un objeto con una sola propiedad llamada texto. El @hacer clic directiva se utiliza para adjuntar un mensaje inverso() método a la elemento que invierte la texto propiedad.

Al ejecutar este programa, la aplicación Vue creada se verá así:

Al hacer clic en el texto, se invertirá.

Tenga en cuenta que el programa comentó la propiedad de la plantilla para permitir que se representen los contenidos en la aplicación Vue. Si se deja sin comentarios, esta aplicación Vue solo mostrará una propiedad de plantilla:

Hay otras propiedades como accesorios y calculado, que también puede utilizar para crear aplicaciones Vue potentes y flexibles al configurar el objeto de opciones.

Interpolación de texto en Vue

La interpolación de texto en Vue es una función que le permite vincular datos a elementos HTML de forma dinámica. En otras palabras, le permitirá generar directamente el valor de las propiedades de datos de una instancia de Vue en el HTML.

Para lograr la interpolación de texto en Vue, debe envolver el nombre de la propiedad de datos entre llaves dobles. Vue interpreta los contenidos dentro de las llaves dobles como expresiones de JavaScript, y luego los reemplaza con su valor resultante.

Por ejemplo:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<h1>{{ mensaje }}h1>
<pag>Bienvenido {{ nombre }}pag>
división>
<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 mensaje: "Esta es su aplicación Vue",
 nombre: "Noble",
 };
 },
 });
 aplicación.mount("#aplicación");
guion>
cuerpo>
html>

En este ejemplo, la interpolación de texto une el mensaje y nombre propiedades del objeto de datos devuelto en la instancia de Vue al y elementos. Una vez que se monta la aplicación Vue, muestra los valores de la mensaje y nombre propiedades en el HTML en sus respectivas posiciones.

También puede mostrar el resultado de una llamada de método o realizar operaciones básicas de JavaScript dentro de los corchetes dobles:

html>
<htmlidioma="es">
<cabeza>
<título>aplicación vuetítulo>
<guionorigen=" https://unpkg.com/vue@3/dist/vue.global.js">guion>
cabeza>
<cuerpo>
<divisiónidentificación="aplicación">
<h1>{{ mensaje }}h1>
<h3>Bienvenido {{ nombre.toUpperCase() }}h3>
<pag>Hay {{ nameLength() }} letras en su nombre.pag>
división>
<pag>aqui nopag>
<guion>
 const app = Vue.createApp({
 datos() {
 devolver {
 mensaje: "Esta es su aplicación Vue",
 nombre: "Noble Okafor",
 };
 },
 métodos: {
 nombreLongitud() {
 devuelve este.nombre.longitud - 1;
 },
 },
 });
 aplicación.mount("#aplicación");
guion>
cuerpo>
html>

En este ejemplo, la aplicación Vue tiene un datos objeto que contiene dos propiedades: mensaje y nombre.

Dentro de la aplicación Vue, los tres elementos HTML muestran datos usando la instancia de Vue. El h1 elemento muestra el valor de la mensaje propiedad, mientras que la h3 elemento muestra el valor de la nombre propiedad con un aMayúsculas() método que se le aplica.

El pag elemento muestra el resultado devuelto de la nombreLongitud() método definido en el métodos objeto de la aplicación Vue. El nombreLongitud() método devuelve la longitud de la nombre propiedad restada por uno.

Para acceder a un valor del objeto de datos en el objeto de métodos, debe usar este palabra clave. este La palabra clave se refiere a la instancia actual de Vue y le permite acceder a sus propiedades y métodos desde la instancia de Vue. Mediante el uso este, puede recuperar el valor de la nombre propiedad y realizar cualquier manipulación necesaria en ella utilizando el métodos.

Esta aplicación de Vue demuestra cómo vincular datos a elementos HTML mediante la interpolación de texto y cómo definir y llamar a métodos en una instancia de Vue.

Cree su interfaz usando Vue

En este artículo, aprendió cómo comenzar a trabajar con Vue e interpolar texto con la sintaxis de plantillas de Vue. Puede acceder a varias otras funciones en Vue, como directivas y enlaces de ciclo de vida, lo que lo convierte en una excelente opción para crear aplicaciones de front-end dinámicas.