The following approach covers how to build a simple shopping list app with VueJs. Vue (or Vue.js) is an open-source JavaScript framework geared towards building user interfaces, it was created by Evan You.
Prerequisites:
- Basic understanding of HTML.
- Basic knowledge of CSS
- Basic knowledge of JavaScript
Including Script: We can include the Vue Js into our HTML using the following CDN link:
<script src=
"https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
</script>Example: Following is a shopping list application using VueJS.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<script src=
</script>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
integrity=
"sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous" />
<style>
@import url(
#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>
|
Output:
Explanation:
HTML Code: This section contains our font icon links, form input to create a new list item, and also the v-for directive to loop through the list and print their items.
JavaScript Code: This section contains the functionality of the app. These are the following steps:
- Create our Vue instance a Vue instance is the heart of a Vue application.
- Return data that needs to be handled within the view. This data has to be dictated within a data option.
- Run a list of items in the data property.
- We can use the v-for directive to render a list of our fruit items based on an array.
- Now let’s create a two-way data binding by using the v-model to update the element based on the input type.
- Create a function that can enable you to delete each of our listed items.
Conclusion: This is how to set up a Vue project via static HTML using the CDN and how to create a simple shopping list in Vue. We learned about Vue instance, data, methods, conditionals, events.