Crea tu primer componente de Vue 3

 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 --versioncomando, 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.vuearchivo 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 refy computeddesde vue3, luego definimos la setupfunción. En la setupfunció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 setupmé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 randomValuevariable, la timeslongitud de la matriz y la totalvariable. A continuación, vinculamos las funciones generatey inital evento de clic de dos botones.

Importando nuestro componente Vue 3

A continuación, necesitamos importar nuestro componente de valor aleatorio del Random.vuearchivo en nuestro App.vuearchivo 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.vuearchivo y lo declaramos dentro del componentsobjeto 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 setupmétodo del componente para devolver todas las variables y funciones a las que queremos acceder desde la plantilla del componente.