To Do: Learn Vue

To dip my toes into the ocean of Vue, I created a super simple, backend-less application. Here is a bit about my journey:

Setting Up Vue

I started by creating an index.html file and added the Vue.js script provided in the Getting Started documentation. I decided to stick with this quick and easy "installation" as I was just starting out with the framework. However, I look forward to using NPM and CLI in the future.

Creating a Vue Instance

As stated in the documentation, "every Vue application starts by creating a new Vue instance with the Vue function". Mine looked like this:

const app = new Vue({

});

In order to tell Vue where to live on the page, I added an 'el' property to my Vue object and assigned it to the ID #app. In my index.html file, I created a main tag with an ID of app - and I was ready to roll!

app.js

const app = new Vue({
 el: '#app'
});

index.html

<!DOCTYPE html>
<html>
 <head>
    //head stuff
 </head>
 <body class="bg-black">
    <main id="app">
    </main>
    <script src="https://cdn.jsdelivr.net/npm/vue@2". 
    </script>
    <script src="app.js" charset="utf-8"></script>
 </body>
</html>

The To Do Form

To start on my To Do App, I needed a To Do form. I won't get too into the HTML of it all, but I really enjoyed how Vue let me write more straight-forward HTML rather than JSX. I created a form, with a To Do input field and a Submit button.

To call a Vue function when the form is submitted, I used the v-on shorthand @submit.prevent and set it equal to a function called addTodo. .prevent is a handy Vue modifier that tells the v-on directive to call event.preventDefault() on the triggered event.

index.html

<form @submit.prevent="addTodo">
   <div class="subtitle"><label for="newTodo">Add Task</label></div>
   <input v-model="newTodo" class="input" type="type" name="newTodo" id="newTodo">
   <button type="submit" name="button">+</button>
</form>

To create the function, I added a methods object to my Vue instance and wrote a function called addTodo. To use the function, I needed to store the user input into a Vue data object. I created an attribute called newTodo and set it equal to an empty string, as well as an attribute called todos set to an empty array.

Now, I could store the title of my To Do input and push it to my Todos array.

const app = new Vue({
    el: '#app',
    data: {
        title: 'Getting Stuff Done',
        newTodo: '',
        todos: [],
    },
    methods: {
        addTodo() {
            console.log(this.newTodo);
            this.todos.push({
                title: this.newTodo,
            });
            this.newTodo = '';
        },
    }
});

The v-model attribute on my input tag allowed me to link the user input to the Vue data object. As stated in the documentation, "When a Vue instance is created, it adds all the properties found in its data object to Vue’s reactivity system. When the values of those properties change, the view will “react”, updating to match the new values."

Displaying the To Do List

Of course, after submitting a To Do item, you want the item to display on the page. With the use of "Mustache" syntax, I did some simple text interpolation to create my list. The v-for directive on the list item is used to render the element or template block multiple times based on the source data. So, for each todo in my todos array, a new list item is created.

index.html

<ul>
  <li v-for="todo in todos">
    <input type="checkbox" v-model="todo.done">
    <span :class="{ done: todo.done }">{{todo.title}}</span>
    <button @click="removeTodo(todo)" type="button" 
     name="remove">Remove</button>
  </li>
</ul>

I also went ahead and added a checkbox to indicate when a task has been completed. This process involved giving my newTodo a 'done' attribute initially set to false, creating a checkbox with a v-model of 'todo.done', and setting my CSS to strikeout items when todo.done is true.

Removing Todo Items

I wanted my app to have the option to remove Todo items. I started by adding a 'Remove' button to each Todo list item, as seen above. I used the v-on shorthand @click and set it equal to a function called removeTodo.

Just like with addTodo, I created a removeTodo function in my Vue methods object and removed individual Todos using the .splice method.

Completing All Todo Items

Lastly, I wanted the ability to mark all Todos from the list as complete at once. I mean, everyone loves that feeling, right?

Just like with my removeTodo function, I created a button, set it equal to an allDone function, and wrote the function in my Vue methods object. With a simple forEach loop, I set todo.done to true for all of my todos.

Reflection

Although this app is really simple, I really enjoyed playing around in Vue. I was surprised at just how easy it was to catch on to its syntaxes and functionality. I have a lot more research to do and many more apps to build, but I can definitely see myself falling in love with Vue as a framework.

Thanks for following on my journey into the world of Vue! You can find the Repo on my Github, as well as a demo of the app here.

Blog

Taylor Sieling