Vue Js

Vue Js

As the Web matures and the versatility of online space rapidly grows, the way of building feature-rich application gets considerably more complicated. Nowadays it’s not that easy to satisfy customers with a basic online presence as everyone wants to see you updated as per the latest technological trends. However, the burden can be reduced largely if your web developers are well-versed with the latest web development frameworks.

Vue.js (commonly referred to as Vue; pronounced /vjuː/, like view) is an open-source JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is simplified with Vue because it is designed to be incrementally adoptable.

Vue is a simple and minimal progressive JavaScript framework that can be used to build powerful web applications incrementally.

Vue is a simple and minimal progressive JavaScript framework that can be used to build powerful web applications incrementally.

Vue is a lightweight alternative to other JavaScript frameworks like AngularJS. With an intermediate understanding of HTML, CSS and JS, you should be ready to get up and running with Vue

Component structure

Every Vue app, needs to have a top level component that serves as the framework for the entire application. Fo our application, we will have a main component and nested within shall be a TodoList Component. Within this there will be todo sub-components.

Main App Component

Let's dive into building our application. First, we'll start with the main top level component. The Vue CLI already generates a main component that can be found in src/App.vue. We will build out the other necessary components.

Creating a Component

The Vue CLI creates a component Hello during set up that can be found in src/components/Hello.vue. We will create our own component called TodoList.vue and won't be needing this anymore.

Importing Components

To utilize the component we just created, we need to import it in our main component. Inside of src/App.vue make the following changes just above the script section and below the template closing tag.

Adding Component Data

We will need to supply data to the main component that will be used to display the list of todos. Our todos will have three properties; The title, project and done(to indicate if the todo is complete or not). Components avail data to their respective templates using a data function. This function returns an object with the properties intended for the template. Let's add some data to our component.

Looping and Rendering Data

Inside our TodoList template lets loop over the list of Todos and also show the the number of completed and uncompleted tasks. To render a list of items, we use the v-for directive. The syntax for doing this is represented as v-for="item in items" where items is the array with our data and item is a representation of the array element being iterated on

Editing a Todo

Let's extract the todo template into it's own component for cleaner code. Create a new component file Todo.vue in src/components and transfer the todo template.

Adding A New Todo

To create a new todo, we'll start by creating a new component CreateTodo in src/components. This will display a button with a plus sign that will turn into a form when clicked. It should look something like this.

Completing A Todo

Finally, we'll add a method completeTodo to the Todo Component that emits an event complete-todo to the parent component when the pending button is clicked and sets the done status of the todo to true.