TodoList 앱 만들기 Vue.js

TodoList 다음은 다음을 사용하여 애플리케이션을 빌드하기 위한 특정 코드 예제가 포함된 자세한 단계별 가이드입니다 Vue.js.

1단계: 프로젝트 설정

Vue.js Vue CLI를 사용하여 새 프로젝트를 생성하여 시작합니다. 터미널을 열고 다음 명령을 실행합니다.

vue create todo-list-app

todo-list-app 이렇게 하면 기본 프로젝트 구조 및 종속성으로 호출되는 새 디렉터리가 생성됩니다 .

 

2단계: 만들기 TodoList Component

폴더 안에 src 이라는 새 파일을 만듭니다 TodoList.vue. 이것은 응용 프로그램의 주요 구성 요소가 됩니다 TodoList.

에서 TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <!-- Render TodoItems here -->  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoList',  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ]  
    };  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

3단계: 만들기 TodoItem Component

폴더 안에 src 이라는 새 파일을 만듭니다 TodoItem.vue. 이것은 개별 할 일 항목 렌더링을 담당하는 하위 구성 요소입니다.

에서 TodoItem.vue:

<template>  
  <div:class="{ 'completed': todo.completed }">  
    <input type="checkbox" v-model="todo.completed">  
    <span>{{ todo.text }}</span>  
    <button @click="deleteTodo">Delete</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'TodoItem',  
  props: ['todo'],  
  methods: {  
    deleteTodo() {  
      // Emit a custom event to notify the parent component(TodoList) to delete this todo item  
      this.$emit('delete', this.todo.id);  
    }  
  }  
};  
</script>  
  
<style scoped>  
.completed {  
  text-decoration: line-through;  
}  
</style>

 

4단계: 업데이트 TodoList Component

.vue 내에서 TodoList 템플릿 섹션을 업데이트하여 TodoItem v-for 지시문을 사용하여 s를 렌더링합니다.

에서 TodoList.vue:

<template>  
  <div>  
    <h1>TodoList</h1>  
    <div v-for="todo in todos":key="todo.id">  
      <TodoItem:todo="todo" @delete="deleteTodo"></TodoItem>  
    </div>  
    <!-- Add a form to add new todo items -->  
    <form @submit.prevent="addTodo">  
      <input type="text" v-model="newTodoText">  
      <button type="submit">Add Todo</button>  
    </form>  
  </div>  
</template>  
  
<script>  
import TodoItem from './TodoItem.vue';  
  
export default {  
  name: 'TodoList',  
  components: {  
    TodoItem  
  },  
  data() {  
    return {  
      todos: [  
        { id: 1, text: 'Learn Vue.js', completed: false },  
        { id: 2, text: 'Build a TodoList app', completed: false },  
        // Add more todo items here  
      ],  
      newTodoText: ''  
    };  
  },  
  methods: {  
    deleteTodo(id) {  
      // Find the index of the todo item in the array  
      const index = this.todos.findIndex(todo => todo.id === id);  
      // Remove the item from the array  
      this.todos.splice(index, 1);  
    },  
    addTodo() {  
      if(this.newTodoText) {  
        // Generate a unique ID for the new todo item  
        const newTodoId = this.todos.length + 1;  
        // Create a new todo item object and add it to the array  
        this.todos.push({  
          id: newTodoId,  
          text: this.newTodoText,  
          completed: false  
        });  
        // Clear the input field  
        this.newTodoText = '';  
      }  
    }  
  }  
};  
</script>  
  
<style>  
/* Add your custom styles here */  
</style>

 

5단계: TodoList 애플리케이션 테스트

애플리케이션을 테스트하려면 TodoList "src/App.vue" 파일을 열고 기존 콘텐츠를 다음 코드로 바꿉니다.

<template>  
  <div id="app">  
    <TodoList></TodoList>  
  </div>  
</template>  
  
<script>  
import TodoList from './TodoList.vue';  
  
export default {  
  name: 'App',  
  components: {  
    TodoList  
  }  
};  
</script>  
  
<style>  
/* Add your global styles here */  
</style>

 

6단계: 애플리케이션 실행

터미널에서 다음 명령을 실행하여 모든 변경 사항을 저장하고 개발 서버를 시작합니다.

npm run serve

http://localhost:8080 작동 중인 응용 프로그램을 보려면 웹 브라우저를 방문하십시오 TodoList.

이 예는 a의 기본 기능을 보여줍니다.

TodoList 를 사용하는 응용 프로그램입니다 Vue.js. 사용자는 제공된 양식을 사용하여 할 일 목록을 보고, 완료로 표시하고, 삭제하고, 새 항목을 추가할 수 있습니다. 할 일 항목의 상태는 TodoList 구성 요소에서 관리되며 각 개별 할 일 항목은 TodoItem 구성 요소를 사용하여 렌더링됩니다.

이것은 단순화된 구현이며 특정 요구 사항에 따라 응용 프로그램을 추가로 사용자 정의하고 향상시킬 수 있습니다.