Vue.js로 간단한 할일 목록 작성하기 - 1부

7678 단어 vuecsshtmljavascript

이 기사는 무엇에 관한 것입니까?



이 기사는 멋진 자바스크립트 프레임워크인 Vue를 사용하여 간단한 할일 목록 웹 앱을 만드는 방법에 관한 것입니다. Vue.js는 단순성과 개발자 친화적인 구문으로 인해 개발자들 사이에서 큰 인기를 얻었습니다.

오늘은 할일 목록 앱을 만드는 방법과 프레임워크의 핵심 기능을 설명하겠습니다. 이 기사는 프로그래밍 초보자이거나 최근에 Vue.js를 배우기 시작한 경우에 특히 유용합니다. 많은 이야기 없이 시작하겠습니다!

환경 설정



프로젝트에 Vue를 추가하는 방법은 두 가지가 있습니다: 빌드 단계 포함 및 빌드 단계 없음. 연결하기가 더 쉽기 때문에 후자를 사용하겠습니다. Vue 추가에 대한 자세한 정보를 찾을 수 있습니다here.
처음에는 vue-todo-list 폴더를 만들고 해당 폴더 안에 index.html 파일을 추가합니다. index.html의 초기 코드는 다음과 같아야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue todo list app</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {};
        },
      }).mount("#app");
    </script>
  </body>
</html>


그 다음에는 코드 내용이 렌더링될 템플릿이 됩니다. createApp 내부의 데이터 메소드는 항상 해당 속성이 애플리케이션의 반응 상태가 되는 객체를 반환해야 합니다.

애플리케이션의 html 구조를 추가해 보겠습니다.

<div id="app">
  <input type="text" />
  <button>Add</button>
  <br />
  <br />
  <ul></ul>
</div>

할일 목록 내용을 입력하기 위한 입력 필드, 입력된 텍스트를 추가하기 위한 버튼 및 모든 할일 목록 항목을 표시하기 위한 정렬되지 않은 목록 요소가 있습니다.

이제 앱을 대화형으로 만들기 위한 Vue 코드를 추가해 보겠습니다.

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        todolist: [],
        todo: "",
      };
    },
    methods: {
      add() {
        this.todo = this.todo.trim();

        if (!this.todo.length) return;

        this.todolist.push(this.todo);
        this.todo = "";
      },
    },
  }).mount("#app");
</script>

데이터 속성 내의 todolist는 할일 목록 항목을 저장할 배열이며 todo는 사용자가 입력 필드에 입력하는 todo의 현재 값입니다. 메서드 내부에서 일부 이벤트가 발생하면 모든 기능을 작성할 수 있습니다.

이제 Vue 로직을 템플릿에 바인딩하겠습니다.

<div id="app">
  <input type="text" v-model="todo" />
  <button @click="add">Add</button>
  <br />
  <br />
  <ul>
    <li v-for="item in todolist" :key="item">{{item}}</li>
  </ul>
</div>

여기서 v-model은 입력 요소와 반응 데이터가 바인딩되는 Vue 지시문입니다. 요소에 이벤트 리스너를 추가하려면 이벤트 이름 앞에 @를 추가해야 합니다. v-for 지시문은 소스 데이터를 기반으로 콘텐츠를 여러 번 렌더링하는 데 사용됩니다. 키 속성은 항목의 ID와 같습니다. v-for의 기본 동작은 요소를 이동하지 않고 제자리에서 패치하려고 시도합니다. 강제로 요소를 재정렬하려면 키 특수 속성과 함께 순서 지정 힌트를 제공해야 합니다. 그리고 템플릿 내에서 데이터 속성을 렌더링하려면 이중 중괄호로 묶어야 합니다{{}} .

이 기사에서는 프로젝트에 Vue.js를 추가하는 방법, 반응성 데이터를 렌더링하는 방법, 이벤트 리스너 및 몇 가지 기본 Vue 지시문을 추가하는 방법을 배웠습니다. 다음 부분에서는 스타일을 추가하고 새로 고침 후 데이터를 유지하기 위해 localStorage로 작업하는 방법을 보여줍니다.

이 기사를 즐겼기를 바랍니다. 읽어 주셔서 감사합니다.
하이어+플러스! 직원을 위해 내가 구축한 방법은 다음과 같습니다(Redux - 회사).
Azure Logic App의 액체 템플릿이 있는 For 루프

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage