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 cantidad de veces. 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. Los Props son los atributos que se declaran en un componente. Al pasar el valor a un atributo prop, se convertirá en la propiedad de ese componente.
Sintaxis:
<Child_component prop1 = data1 prop2 = data2 ></Child_component>
Enfoque : aquí, crearemos un proyecto Vue y luego crearemos una aplicación web de » Lista de tareas pendientes». Las tareas se pasan como accesorios.
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 podrá ver 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 : en este ejemplo, estamos creando una lista de tareas pendientes. Para mostrar toda la lista de tareas pendientes, las tareas se pasan como accesorios al componente de tareas.
App.vue : este archivo está llamando al componente de la tarea 5 veces para mostrar la lista de tareas del usuario.
Javascript
<template>
<center id="app">
<h1 style="color: green">GeeksforGeeks</h1>
<h2><u>To Do List</u></h2>
<Task task="Run a mile" index="0" />
<Task task="Code on GFG" index="1" />
<Task task="Clean Room" index="2" />
<Task task="Go to Swim" index="3" />
<Task task="Buy Dog Food" index="4" />
</center>
</template>
<script>
import Task from "./components/Task";
export default {
name: "App",
components: { Task },
};
</script>
Componente de tareas: cree un nuevo archivo Task.vue dentro de la carpeta de componentes.
Task.vue: este es el componente que se llama 5 veces para mostrar la lista.
Javascript
<template>
<h3 style=
"color: white;
backgroundColor: green;
width: 300px;
height: 30px;
padding: 15px;">
{{index}} - {{task}}
</h3>
</template>
<script>
export default {
name: 'Task',
props : ['task','index']
}
</script>
Producción:
Componentes de la tarea
Referencia : https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA