El siguiente enfoque cubre cómo crear una aplicación de lista de compras simple con VueJs. Vue (o Vue.js) es un marco JavaScript de código abierto orientado a la construcción de interfaces de usuario, fue creado por Evan You.
requisitos previos:
- Comprensión básica de HTML.
- Conocimientos básicos de CSS
- Conocimientos básicos de JavaScript
Incluyendo Script: Podemos incluir Vue Js en nuestro HTML usando el siguiente enlace CDN:
<script src=
"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>
Ejemplo: La siguiente es una aplicación de lista de compras que usa VueJS.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<!-- CDN LINK -->
<script src=
"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>
<!-- font icon link -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity=
"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous" />
<!-- CSS style -->
<style>
@import url(
"https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#app-vue {
display: flex;
justify-content: center;
font-family: "Rubik", sans-serif;
}
body {
background: #313131;
font-size: 18px;
}
.fa-plus {
background-color: #fca954;
color: #ffffff;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 30px;
}
.lists {
width: 300px;
display: flex;
flex-direction: column;
padding: 20px;
background: #444444;
}
.container {
width: 300px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin: 10px 0px;
background: #444444;
color: #aaaaaa;
}
.container input {
width: 80%;
padding: 8px 0px;
outline: none;
background: transparent;
border: none;
color: #aaaaaa;
font-size: 17px;
}
::placeholder {
color: #aaaaaa;
}
.container-text {
width: 300px;
padding: 20px;
margin: 20px 0px;
background: #444444;
color: #aaaaaa;
}
.text {
display: flex;
align-items: center;
justify-content: space-between;
}
.text {
display: flex;
align-items: center;
justify-content: space-between;
}
li {
margin: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
color: #aaaaaa;
}
@media (max-width: 332px) {
.lists,
.container-text,
.container {
width: 270px;
max-width: 250px;
}
}
</style>
</head>
<body>
<div id="app-vue">
<main>
<div class="container-text">
<div class="text">
<h1>Shopping List</h1>
<span>
<i class="fa fa-plus"
aria-hidden="true">
</i>
</span>
</div>
</div>
<div class="lists">
<ul>
<li v-for="(list, index) in lists"
:key="index">
{{ list }}
<i class="fa fa-trash"
aria-hidden="true"
v-on:click="removeList(index)">
</i>
</li>
</ul>
</div>
<div class="container">
<input type="text"
placeholder="Create list"
v-model="currentList"
v-on:keyup.enter="addList" />
</div>
</main>
</div>
<script>
new Vue({
el: "#app-vue",
data() {
return {
lists: [
"Mackbook Pro",
"Google pixel 4a",
"Microsoft surface laptop 2",
],
currentLists: "",
};
},
methods: {
addList: function () {
this.lists.push(this.currentList);
this.currentList = "";
},
removeList: function (index) {
this.lists.splice(index, 1);
},
},
});
</script>
</body>
</html>
Producción:
Explicación:
Código HTML: esta sección contiene nuestros enlaces de íconos de fuente, entrada de formulario para crear un nuevo elemento de lista y también la directiva v-for para recorrer la lista e imprimir sus elementos.
Código JavaScript: esta sección contiene la funcionalidad de la aplicación. Estos son los siguientes pasos:
- Crear nuestra instancia de Vue una instancia de Vue es el corazón de una aplicación de Vue.
- Devuelve datos que necesitan ser manejados dentro de la vista. Estos datos tienen que ser dictados dentro de una opción de datos.
- Ejecute una lista de elementos en la propiedad de datos.
- Podemos usar la directiva v-for para generar una lista de nuestros artículos de frutas en función de una array.
- Ahora vamos a crear un enlace de datos bidireccional usando el modelo v para actualizar el elemento según el tipo de entrada.
- Cree una función que le permita eliminar cada uno de nuestros elementos enumerados.
Conclusión: Esta es la forma de configurar un proyecto Vue a través de HTML estático utilizando la CDN y cómo crear una lista de compras simple en Vue. Aprendimos sobre instancias, datos, métodos, condicionales y eventos de Vue.
Publicación traducida automáticamente
Artículo escrito por lawsonezekiel68 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA