A lo largo de este tutorial, aprenderá a crear su primer componente de Vue 3. También verá cómo utilizar el método de componentessetup
.
Vue 3 aún no se lanzó para producción, pero se espera que se lance pronto.
Aprenderemos cómo montar un nuevo proyecto de Vue 3 usando la última versión de Vue CLI y crear un componente de Vue 3.
Como la mayoría de las bibliotecas y marcos de desarrollo web modernos, Vue adopta un enfoque basado en componentes para crear aplicaciones donde los componentes son los componentes básicos de la aplicación.
Un componente controla una parte de la interfaz de usuario e interactúa con los demás componentes de la aplicación.
En este tutorial, aprenderemos cómo crear un componente de Vue 3 paso a paso.
Prerrequisitos
Para seguir este tutorial, necesitará:
- El conocimiento de HTML, CSS, JavaScript y Vue
- Node.js instalado en su máquina,
Paso 1: instalación de Vue CLI 4
Comencemos instalando Vue CLI 4 en nuestra máquina de desarrollo local.
Abra una interfaz de línea de comandos y ejecute el siguiente comando:
$ npm i -g vue-cli
Después de instalar CLI. Si ejecuta el vue --version
comando, debería obtener el siguiente resultado:
@vue/cli 4.5.2
Paso 2: creación de un nuevo proyecto de Vue 3
Ahora, si tiene Vue CLI 4 instalado, puede crear un proyecto de Vue 3 usando el siguiente comando:
$ vue create vue3componentdemo
Se le pedirá el siguiente código:
? Please pick a preset:
Default ([Vue 2] babel, eslint)
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
A continuación, debe seleccionar la segunda opción Default (Vue 3 Preview) ([Vue 3] babel, eslint)
para indicarle a la CLI que genere un nuevo proyecto basado en Vue 3.
A continuación, presione Return
.
Se generarán los archivos de su proyecto y las dependencias se instalarán automáticamente desde npm.
Después de la instalación, vaya a la carpeta del proyecto e inicie el servidor de desarrollo de la siguiente manera:
$ cd vue3componentdemo
$ npm run serve
El servidor de desarrollo se ejecutará en localhost: 8080 :
Paso 3: creación de un componente de Vue 3
A continuación, creemos un componente de Vue 3 y usémoslo en nuestra aplicación.
En la src/components/
carpeta de su proyecto, cree un nuevo Random.vue
archivo y agregue el siguiente código:
<template>
</template>
<script>
import { ref, computed } from "vue";
export default {
name: 'Random',
setup() {
const randomValue = ref(0);
const times = ref([]);
function generate() {
randomValue.value = Math.floor(Math.random() * Math.floor(9)) + 1;
times.value.unshift(randomValue.value);
}
function init() {
randomValue.value=0
times.value = [];
}
const total = computed(() => {
let t = 0;
for (let i=0 ; i< times.value.length; i++) {
t += times.value[i]
}
return t;
});
return { randomValue, times, total, generate, init };
}
}
</script>
Primero importamos ref
y computed
desde vue3, luego definimos la setup
función. En la setup
función del componente, definimos dos variables reactivas y dos funciones para generar un valor aleatorio y lo agregamos al arreglo e inicializamos el arreglo.
A continuación, definimos una función calculada para calcular el total de los valores de renadom. Finalmente, devolvemos todas las variables y funciones definidas, del setup
método del componente , a las que necesitamos hacer referencia desde la plantilla del componente.
Si la instalación devuelve un objeto, se puede acceder a las propiedades del objeto en la plantilla del componente. Los documentos de Vue 3
Agregar la plantilla del componente Vue 3
A continuación, debemos agregar el código de la plantilla dentro de la <template></template>
etiqueta:
<template>
<h1>Current random value: </h1>
<div>Number of times: </div>
<div>Total: </div>
<button @click="generate()">Generate a random value</button>
<button @click="init()">Init</button>
<ul>
<li v-for="(e, i) in times" :key="i">
</li>
</ul>
</template>
Usamos la interpolación para mostrar el valor de la randomValue
variable, la times
longitud de la matriz y la total
variable. A continuación, vinculamos las funciones generate
y init
al evento de clic de dos botones.
Importando nuestro componente Vue 3
A continuación, necesitamos importar nuestro componente de valor aleatorio del Random.vue
archivo en nuestro App.vue
archivo de la siguiente manera:
<template>
<div id="app">
<Random />
</div>
</template>
<script>
import Random from './components/Random.vue'
export default {
name: 'App',
components: {
Random
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Simplemente importamos el componente del ./components/Random.vue
archivo y lo declaramos dentro del components
objeto y luego lo incluimos en la plantilla a través de su nombre de etiqueta <Random />
.
Conclusión
Aprendimos sobre los componentes de Vue 3 y cómo crearlos. Vimos cómo usar el setup
método del componente para devolver todas las variables y funciones a las que queremos acceder desde la plantilla del componente.
0 Comentarios
Dejanos tu comentario para seguir mejorando!