3 brilliant Examples to learn Vue.js

Updated on 17. December 2021Lorenz

Vue.js is on everyone’s lips right now. Due to the dynamics and flexibility of the JS framework, it is perfect for single page applications, but also for smaller features on websites. Here I show you 3 practical examples to learn Vue.js as fast as possible!

Vue.js sometimes has similar syntax to AngularJS or ReactJS. If you have already worked with these frameworks, you will certainly like Vue.js.

Compared to jQuery, Vue.js has clearly gained recognition in recent years. The following statistics show the number of search queries in both frameworks. Of course, this is not the exact usage, but a clear trend can be seen here:

Source: Google Trends

That’s why you now have the chance to jump on the train “Vue.js” and get started!

As a basis for the following projects you can use this HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue.js Examples</title>
  </head>
  <body>
    <div id="app">
      <h1>Vue.js Examples</h1>
      <!-- PUT YOUR VUE.JS CONTENT HERE -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
      	el: '#app'
      });
    </script>
  </body>
</html>

This is a normal HTML file, in which we simply include Vue.js via CDN and create an instance for Vue.js in JavaScript. This means that our Vue.js application runs inside the #app container and we run our additional code there.

Now we come to the three different practice examples. Once you have reprogrammed and understood these, you are familiar with the basics of Vue.js. You can open the source code of the respective applications by clicking on “HTML”, “JS” and “CSS”. I realized a small styling with bootstrap.

Example #1 – Search function

Live search functions are a very chic feature. This means that as soon as you enter a search term, the results are displayed in real time. The first exercise is such a search. We have a list of entries and when you type a term in the search bar, the results are displayed. This is what it could look like:

In HTML we have a search field which has a v-model attribute. This allows us to access and modify it in the JS code. We also have an ul, which contains our unfiltered entries. The il element has a Vue.js for loop. This iterates all entries from filteredList and outputs them.

In the JS we have a list with all list entries and an empty search string searchterm. With the computed property we have the possibility to create a variable, which will recalculate itself permanently. We take advantage of this and say that the variable should consist of all list entries of entries in which searchstring occurs. When comparing we set it to lowercase with toLowerCase() to ensure the comparison.

Example #2 – ToDo List

I know, ToDo Lists are boring and already exist a thousand times, yes! But I find you still every time a nice exercise to familiarize yourself with a new framework.

Therefore the task is to program a ToDo list. We want to add new entries and delete old ones. Here is my example code:

In this example we have again an input to add a new ToDo and again a loop to output our existing ToDos. The peculiarity here is that we make a function call deleteToDo(todo.id) at each todo, which should delete the todo.

In the JS we have again a list with already initialized ToDos. The function addToDo() is executed as soon as you press “Enter” in the input field. It gets a new ID and is added to the todos array.

The function deleteToDo(id) sets the same array as before, with the small difference that the ToDo is filtered out with the same ID as the passed id.

Example #3 – Form

Forms are often indispensable, but often difficult and have security gaps. Therefore (also in my example) a server-side validation should take place in addition to the client-side validation of the data.

In this example, we have some form fields that we check for completeness and issue an error message if necessary. In the code I have a comment line in which a RestAPI request can be made. This should validate the data again and can then send it by mail or write it into a database. This is my example:

In HTML we have the various inputs, all of which get a v-model attribute with the corresponding name. Furthermore we have a container for error messages formError and a formSuccess container for the successful submit of the form. These are hidden by default via v-if. Clicking “Send” calls the submitForm() function.

In the JS, the submitForm() function checks all attributes individually for emptiness. A boolean that is set to false by default can be used to detect such an error. If this is true, the variable formError is filled with text and automatically displayed to the user (thanks to v-if) and the function returns false. If the variable is false, the statement will be ignored and it could go to server-side validation. Also, formSuccess is set to true to display a success message to the user.

Everything else is in your hands now. Vue.js has a great documentation. There are also many more practical examples and you will find a solution for every problem.

Here you can find more exciting articles and tutorials about web development and webserver administration. Have a look if there is something else for you:

What did you think of this post?