Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.
Los componentes se utilizan para crear la combinación de elementos de la interfaz de usuario que deben llamarse cualquier número de veces. En términos simples, llama a una función muchas veces cuando necesita realizar la misma acción en diferentes conjuntos de entrada. Este es un enfoque similar para llamar al mismo elemento de la interfaz de usuario en diferentes páginas web. El elemento de la interfaz de usuario llamado es el Componente y el proceso es Reutilización de componentes . Algunos datos pueden ser específicos del componente. Esos datos deben vincularse con un componente de forma repetida. Aquí es cuando resulta útil pasar datos a través de accesorios a un componente.
Sintaxis :
<Component prop=data></Component>
Enfoque : aquí, crearemos un proyecto Vue y luego crearemos una aplicación web de «Lista de tareas pendientes». Reutilizar diferentes componentes de la tarea.
Crear proyecto Vue :
Paso 1 : para crear una aplicación Vue, debe instalar módulos Vue con este comando npm. Debe asegurarse de tener el Node instalado previamente.
npm install vue
Paso 2 : use Vue JS a través de CLI. Abra su terminal o símbolo del sistema y ejecute el siguiente comando.
npm install --global vue-cli
Paso 3 : Ejecute el siguiente comando para crear el proyecto.
vue init webpack myproject
Paso 4 : después de crear su proyecto Vue, muévase a la carpeta para realizar diferentes operaciones.
cd myproject
Paso para ejecutar la aplicación : Abra la terminal y escriba el siguiente comando.
npm run dev
Abre tu navegador. Abra una pestaña con localhost ejecutándose (http://localhost:8080/) y vea el resultado que se muestra en la imagen.
Estructura del proyecto : después de ejecutar los comandos (mencionados en los pasos anteriores), si abre el proyecto en un editor, puede ver una estructura de proyecto similar (como se muestra a continuación).
Estructura del proyecto
Ejemplo 1 : en este ejemplo, estamos creando un componente de tarjeta de interfaz de usuario mediante la creación de un componente de tarjeta que informará al usuario y que el usuario puede reutilizar si necesita agregar más tarjetas.
tarjeta.vue
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA