Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de la lista de compras de Vue 3: API de composición y estado reactivo

 A lo largo de este tutorial, aprenderá a usar Vue 3 y la API de composición para crear su aplicación web. La API de composición se introduce en Vue 3 como una alternativa a la API de opciones.

Aprenderemos cómo crear un estado reactivo usando la reactive()función.

La API de composición le permite escribir y organizar componentes en una aplicación Vue 3 siguiendo un enfoque reactivo. La API de composición de Vue le ayudará a crear una aplicación más escalable.

En este tutorial, aprenderemos cómo crear una aplicación de lista de compras con Vue 3 y la API de composición de Vue.

Prerrequisitos

Para seguir este tutorial paso a paso en su máquina de desarrollo, 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 vue3shoppinglist

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 Retorno.

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:

$ cd vue3shoppinglist
$ npm run serve

El servidor de desarrollo se ejecutará en localhost: 8080 :

Nueva aplicación Vue 3

Paso 3: creación de un componente de Vue 3 para la lista de compras

A continuación, creemos un componente de Vue 3 para nuestra lista de compras.

En la src/components/carpeta de su proyecto, cree un nuevo ShoppingList.vuearchivo y agregue el siguiente código:

<template>
  <section>
    <div class="form-container">
      <h1>Add Product</h1>
      <form>
        <div>
          <label>Name</label>
          <br />
          <input type="text" />
        </div>
        <div>
          <button type="submit" class="submit">Add Product</button>
        </div>
      </form>
    </div>
    <div class="list-container">
      <ul>
        <li>
          Shopping List
          <span style="float:right;padding-right:10px;">
            <button>X</button>
          </span>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
export default {};
</script>
<style scoped>
input {
  width: 20%;
  height: 30px;
  border: 2px solid green;
}
.submit {
  margin: 10px;
  padding: 10px;
  border-radius: 0px;
  border: 0px;
  background: green;
  color: white;
}
ul li {
  list-style: none;
  border: 2px solid green;
  width: 30%;
  margin-top: 10px;
}
</style>

A continuación, necesitamos importar nuestro componente de lista de compras desde el ShoppingList.vuearchivo en nuestro App.vuearchivo de la siguiente manera:

<template>
  <div id="app">
    <img alt="Shoppingd List" src="./assets/shopping.png">
    <shopping-list msg="Vue 3 App"/>
  </div>
</template>
<script>
import ShoppingList from './components/ShoppingList.vue'
export default {
  name: 'App',
  components: {
    ShoppingList
  }
}
</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>

Paso 4: implementación de la API de composición de Vue 3

A continuación, implementemos nuestro componente de lista de compras Vue 3,

Abra el ShoppingList.Vuearchivo e importe la reactivefunción de la siguiente manera:

<script>
import { reactive } from "vue";
export default {};
</script>

Ahora agregaremos algunos detectores de eventos a la aplicación modificando nuestra plantilla a esto:

<template>
  <section>
    <div class="form-container">
      <h1>Vue 3 Shopping List Example</h1>
      <form @submit.prevent="addProduct">
        <div>
          <label> Name</label>
          <br />
          <input v-model="state.input" type="text" />
        </div>
        <div>
          <button type="submit" class="submit">Add Product</button>
        </div>
      </form>
    </div>
    <div class="list-container">
      <ul v-for="(Product,index) in state.Products" :key="index">
        <li>

          <span style="float:right;padding-right:10px;">
            <button @click="removeProduct(index)">X</button>
          </span>
        </li>
      </ul>
    </div>
  </section>
</template>

A continuación, definamos una statevariable y métodos dentro del setup()método, de la siguiente manera:

<script>
  import { reactive } from "vue";
  export default {
  setup() {
      const { state, addProduct, removeProduct } = ProductList();
      return { state, addProduct, removeProduct };
    }
  };
</script>

Después de definir las variables y los métodos, definiremos el estado de nuestro componente:

<script>
import { reactive } from "vue";
export default {
setup() {
  const { state, addProduct, removeProduct } = ProductList();
  return { state, addProduct, removeProduct };
}
};
function ProductList() {
let state = reactive({
  input: "",
  Products: ["Product 1"]
});
return { state };
</script>

Definimos el inputestado reactivo que vincularemos al campo de entrada y una Productsmatriz reactiva que contendrá todos nuestros productos de la lista de compras.

A continuación, definamos la addProductfunción de la siguiente manera:

<script>
import { reactive } from "vue";
export default {
setup() {
    const { state, addProduct, removeProduct } = ProductList();
    return { state, addProduct, removeProduct };
  }
};
function ProductList() {
  let state = reactive({
    input: "",
    Products: ["Product 1"]
  });
 let addProduct = () => {
    state.Product.push(state.input);
    state.input = "";
  };
  return { state, addProduct };
</script>

La funcionalidad de agregar tomará los datos del campo de entrada y los insertará en la Productsmatriz utilizando el pushmétodo.

Implementemos ahora la función de eliminación. Obtendremos el índice de Producty luego lo eliminaremos Productde la matriz de usuarios usando el método de empalme:

<script>
import { reactive } from "vue";
export default {
setup() {
    const { state, addProduct, removeProduct } = ItemList();
    return { state, addProduct, removeProduct };
  }
};
function ProductList() {
  let state = reactive({
    input: "",
    Products: ["Product 1"]
  });
 let addProduct = () => {
    state.Products.push(state.input);
    state.input = "";
  };

 let removeProduct = i => {
    state.Products.splice(i, 1);
  };
  return { state, addProduct, removeProduct };
</script>

Dado que necesitamos acceder a estos métodos y el estado de la plantilla, necesitamos devolverlos desde el setup()método.

Conclusión

En este tutorial, aprendimos cómo crear una aplicación de lista de compras con el estado reactivo de Vue 3.

Publicar un comentario

0 Comentarios