VueJS를 사용하여 대기사항 목록 작성 응용 프로그램

11505 단어 vuetutorialhtmljavascript
VueJS는 HTML 태그에 속성만 포함하면 데이터 흐름을 쉽게 처리할 수 있는 현대 Javascript 프레임워크입니다.
이 설명서에서는 VueJS를 시작하고 실행하기 위한 간단한 업무 목록 응용 프로그램을 구축합니다.

설정 및 설치
Vue를 설정하는 방법에는 NodeJS 프로젝트를 사용하거나 HTML 파일에 스크립트를 포함하는 두 가지가 있습니다.이제 막 시작했기 때문에, 색인에 스크립트를 사용할 것입니다.html 파일.
우리는 색인을 만들 수 있다.이런 html 파일.
<!DOCTYPE  html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todooey - A Simple Todo List App</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
</html>
응용 프로그램에서 Vue를 사용하려면 새 Vue 인스턴스를 만들어야 합니다.script 표시를 끝내기 전에 우리는 다른 body 표시를 사용하여 이 작업을 완성할 수 있습니다.
<script>
  new Vue( {
    el: '#app',
  });
</script>
이제 애플리케이션에서 Vue를 사용할 수 있습니다!

응용 프로그램 만들기
Vue를 사용하여 응용 프로그램에 기능을 추가하기 전에 정적 컨텐트를 사용하여 기본 HTML/CSS 구조를 만듭니다.
HTML 파일에서 AddTodo 입력과 Todo 목록 및 각 항목을 작성합니다.
<div class="container">
  <h1 class="">My Todo List</h1>
  <div class="card">
    <div class="flex">
      <input placeholder="Add new todo" />
        <button>Add</button>
    </div>
  </div>
  <div class="card">
    <div class="card-inner">
      <h2>Todo</h2>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-toggle"></div><span>Wash the car</span>
          <div class="list-item-delete">X</div>
        </li>
      </ul>
    </div>
  </div>
</div>
그리고 style.css 파일에 응용 프로그램에 기본 스타일을 추가할 것입니다.
html,
body {
  margin: 0;
  padding: 0;
  background: #faffff;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #3d4855;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

.container {
  padding: 24px 0;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.card {
  border-radius: 4px;
  box-shadow: 1px 1px 40px -10px #31505f30, 0px 1px 2px 0px #31505f30;
  background: white;
  margin-bottom: 24px;
}

.card-inner {
  padding: 16px 24px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input {
  border-radius: 4px;
  background: transparent;
  border: none;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: 1px solid transparent;
  height: 100%;
  display: block;
  outline: none;
}

button {
  background: #4fc08d;
  padding: 10px 22px;
  border: none;
  color: white;
  border-radius: 4px;
  margin: 8px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 1px 1px 15px -2px #212c4430;
  transition: 0.15s;
}

button:hover {
  background: #42aa7b;
}

button:disabled {
  background: #e8e8e8;
  color: #555;
  box-shadow: none;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  padding: 12px 16px 12px 16px;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
  border-radius: 4px;
}

.list-item:first-child {
  border-top: 1px solid #e8e8e8;
}

.list-item-toggle {
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  height: 21px;
  width: 21px;
  margin-right: 16px;
}

.list-item-delete {
  margin-left: auto;
  color: tomato;
  margin-top: -2px;
  font-weight: bold;
  text-decoration: none !important;
}

.list-item.completed {
  border: 1px solid #4fc08d;
}

.list-item.completed span {
  text-decoration: line-through;
}

.list-item.completed .list-item-toggle {
  background: #4fc08d;
  border: #4fc08d;
}

Vue를 사용하여 기능 추가
위대하다현재 저희 프로그램은 설계가 끝났습니다. Vue를 사용하여 동적 대기사항 목록을 만들 수 있습니다.

업무 목록 보이기
업무 목록을 표시하려면 Vue의 양방향 데이터 스트림을 사용합니다.script 표기 내부에서, 우리는 Vue의 data 대상을 사용하여 모든 업무 사항을 포함하는 그룹을 만들 것입니다.
<script>
  new Vue( {
    el: '#app',
    data: {
      items: [
         {
           id: 1,
           name: 'Clean the fridge'
         },
         {
           id: 2,
           name: 'Walk the dogs'
         },
      ]
    }
  });
</script>
모든 업무 항목에는 이름과 ID가 있습니다. 나중에 목록에서 항목을 삭제하는 데 사용할 것입니다.
이제 데이터가 생겼습니다. v-for 속성을 사용하여 목록에 표시할 수 있습니다. 이것은 기본적으로 Vue가 사용하는 forEach 순환입니다.
<ul class="list">
  <li class="list-item" v-for="item in reversedItems">
    ...
    <span>{{ item.name }}</span>
    ...
  </li>
</ul>
v-for 속성을 사용하면 item 속성에 접근할 수 있습니다.우리는 쌍손잡이 문법으로 명칭을 표시할 수 있다. {{ item.name }}.

업무 추가
기왕 우리의 항목이 정확하게 표시된 이상, 우리는 목록에 새로운 항목을 추가할 수 있다.Vue의 methods 속성을 사용하면 목록에 새 todo를 추가하는 방법을 만들 수 있습니다.
우선 data 대상에 newItem이라는 새로운 속성을 만듭니다.
<script>
  new Vue( {
    el: '#app',
    data: {
      newItem: '',
      items: [...]
    }
  });
</script>
이것은 Add Todo 입력에 입력한 값입니다.
입력한 내용이 newItem 값을 업데이트했는지 확인하기 위해 우리는 Vue의 양방향 데이터 흐름을 이용하여 v-model 속성을 사용할 수 있다.이것은 우리가 입력에 입력한 모든 값이 data 대상까지 지속된다는 것을 의미한다.
<input v-model="newItem" placeholder="Add new todo"  />
현재 newItem 값을 저장하고 있기 때문에 목록에 추가할 수 있는 방법을 만들 수 있습니다.data 대상 아래에서 우리는 새로운 methods 대상을 만들 것이다. 그 중에서 함수 addItem을 포함한다.
<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {
        this.items.push({
          id: this.items.length + 1,
          name: this.newItem,
          completed: false,
        });
        this.newItem = '';
      },
    },
  });
</script>
기본적으로, 이 함수를 호출할 때, 우리는 newItem값을 얻어 items수조로 전송한다.Add Todo 입력을 지우는 newItem 값을 지우고 있습니다.
이제 Add 버튼을 클릭할 때만 함수를 호출할 수 있습니다.우리는 v-on 속성 또는 약칭 @ 기호를 사용할 수 있다.
<button @click="addItem">Add</button>
이제 이 버튼을 클릭하면 Vue에서 addItem 함수를 호출하는 방법을 알게 됩니다.
또한 입력에 값이 없으면 :disabled 속성 비활성화 단추를 사용할 수 있습니다.이것은 qoutes의 표현식이 true일 때만 disabled 속성을 적용하는 것을 알려 줍니다.
<button @click="addItem" :disabled="newItem.length === 0">Add</button>

항목을 전체로 표시
우리가 해야 할 마지막 일은 항목을 완전하게 표시하는 기능을 추가하는 것이다.
이를 위해, 우리는 수조의 모든 항목에 새로운 속성을 추가할 것입니다: completed 속성.
<script>
new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'Clean the fridge',
      completed: true,
    },
    {
      id: 2,
      name: 'Walk the dogs',
      completed: false,
    }]
  }
});
</script>
Vue는 Vue 인스턴스의 데이터에 따라 요소의 클래스를 동적으로 변경할 수 있는 속성을 다시 제공합니다.
따라서 목록 항목으로 이동하여 :class 속성을 추가할 수 있습니다.
<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  ...
</li>
이것은 Vue에 따르면 프로젝트가 완성될 때만 completed 클래스를 <li>에 적용해야 한다(우리는 item.completed 속성을 방문하여 판단할 수 있다).
지금 우리가 완성한 프로젝트는 반드시 녹색의 윤곽이 있어야 한다.그러나 만약 그것들이 완성되지 않았다면, 우리는 그것들을 표시할 수 있어야 한다.
이를 위해 toggleComplete이라는 또 다른 방법을 만들 것입니다.
<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {...},
      toggleComplete: function (item) {
        item.completed = !item.completed;
      }
    },
  });
</script>
일단 방법이 생기면, 우리는 Vue가 제공하는 @click 속성을 사용하여 그것을 호출할 수 있다.
<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  <div class="list-item-toggle" @click="toggleComplete(item)"></div>
  ...
</li>
마찬가지로 item 대상을 도구로 함수에 전달할 수 있습니다. 왜냐하면 Vue는 v-for 속성을 통해 접근할 수 있기 때문입니다.
이제 우리는 완성과 미완성 사이에서 모든 업무 항목을 전환할 수 있다.

업무 삭제
우리가 해야 할 마지막 일은 우리가 해야 할 일을 삭제하는 것을 허락하는 것이다.다시 한 번, 우리는 이 점을 실현하기 위해 한 가지 방법을 사용할 것이다.
<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {...},
      toggleComplete: function (item) {...},
      removeItem: function (itemID) {
        this.items = this.items.filter((item) => newItem.id!== itemID);
      } 
    },
  });
</script>
이 함수에서, 우리는 itemID 속성 (delete 요소에서 전달된 것) 을 방문하고, items 속성을 우리가 방금 삭제한 항목을 포함하지 않고 새 그룹으로 설정합니다.
현재, 우리는 delete 요소에서 함수를 호출할 수 있다.
<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  ...
  <div class="list-item-delete" @click="removeItem(item.id)">X</div>
</li>
타다!지금, 우리는 성공적으로 우리의 처리해야 할 사항을 삭제할 수 있습니다!

마지막 생각
이렇게!이제 Vue를 사용하여 정상적으로 작동하는 todo 애플리케이션을 구축했습니다.우리는 어떻게 호출 방법, 접근 데이터, 업데이트 데이터를 사용하는지 배웠는데, 이 모든 것은 JS DOM 작업이 필요하지 않다.
너는 Github에서 이 응용 프로그램의 전체 코드를 찾을 수 있다.
만약 당신이 이 강좌를 좋아한다면, 만약 당신이 buy me a coffee을 제공할 수 있다면, 나는 감격해 마지 않을 것입니다.아니면, 따라와.✌.
심 플 한 백 팩 변형 HDU 1203, HDU 2955
제2 장 부분 연습 문제 에 관 한 지식 정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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