To Do: Learn Vue
Tags: vue, javascript
Published: 2021-09-10 03:23:50

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](https://vuejs.org/v2/guide/) 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](https://vuejs.org/v2/guide/instance.html), "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](https://vuejs.org/v2/guide/instance.html#Data-and-Methods), "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](https://github.com/taylorsieling/to-do-vue) on my [Github](https://github.com/taylorsieling), as well as a [demo of the app here.](https://taylorsieling.dev/to-do-vue/)