Building a Shopping List with VueJS
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" /> <!-- CDN LINK --> <script src= </script> <!-- font icon link --> <link rel="stylesheet" href= <link rel="stylesheet" href= integrity= "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" /> <!-- CSS style --> <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.
Please Login to comment...