Common features in a Vue component

In this section, we will use some of the common features in a Vue component while building our Todo app. There are many directives (custom HTML attributes), events, and interfaces that we can use in Vue.js, but most of them are rarely used, which you'll tend to forget over time. So, in this quick demo of the Vue.js Todo app, we will only use the most common events, directives, and APIs of a Vue component.

So let's get started.

Writing local states in a Vue component

Since we are using TypeScript in this project, the first thing that I usually do is write the models that I will need in the app. So let's create a folder inside the src directory and name it models. Then, create a TypeScript file inside the models folder (src | models | todoModel.ts) and add the following code:

export type TodoType = {
  id: string;
  done: boolean;
  content: string;
};
// OR
export interface TodoModel {
 ...