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.
Top comments (10)
From all four frameworks, I like Vue most.
Once you dive deeper, you might want to give Vite a shot. It's a young, but blazing fast dev environment for Vue (and React) apps.
vitejs.dev/
Looking forward to read more from you as well.
I like Vue because of the templating and because it's code is the easier to understand when looking at it.
Even better - once you got the hang of it, learning React also is much easier.
I don't like react, it doesn't has a proper separation between html, css and js, besides the lack of custom directives and templating system
I'm not fond of it either tbh, but understanding how technologies inspire one another really helps to get a better grasp on both of them. React hooks basically taught me what the heck happens inside Vue3's composition API's setup function
May your journey lead you to places you've never vued before.
🤣
I tried learning react and originally hated it, I learned Vue and fell in love with it, and then learning react was very easy after getting competent with Vue.
My favorite thing about Vue is that you can simply create a single file component using a CDN in an html document with something like five lines of code and it gives you great reactivity.
The downside to Vue is that it isn't just ultimately JavaScript under the hood like React is but the upside is that I need JavaScript developer can pick it up in a day or two.
Vue 3, Vite, Vitesse (third party), Petite Vue, and Vue Web Components... It's got so many awesome projects surrounding it. I'm convinced that Evan You doesn't sleep.
I'm just happy to see more people playing with it. Vue is amazing.
great mini starting tutorial, thanks, only thing: the individual checkboxes seem that are'nt working on demo
I like Vue to, nice job.