Vue를 사용하여 생성...잠깐만...퀘스트 리스트!

Operation Spark 과정을 공부하는 과정에서 우리는 모델-시도-컨트롤러 모델(또는 유사한 모델), 예를 들어 주간, 각도와 반응을 실현하는 데 사용할 수 있는 몇 가지 프레임워크를 배웠다.MVC 프레임을 연구하면서 우리가 다루지 않은 또 다른 프레임, Vue를 계속 들었다.나는 이 구조에 대해 독립적인 연구를 한 다음에 이 블로그를 쓰기로 결정했다. 이 블로그에서 나는 Vue를 이용하여 처리해야 할 사항 목록을 구축하는 시도를 상세하게 소개할 것이다.

Vue란 무엇입니까?
앞에서 말한 바와 같이 Vue는 사용자 인터페이스를 구축하는 데 사용할 수 있는 프레임워크일 뿐이다.이것은 전문적으로 응용 프로그램 보기를 처리하고 특정한 HTML 요소를 귀속시키고 제어함으로써 이를 실현한다.이러한 바인딩은 바인딩 객체가 변경되면 HTML 요소도 변경된다는 것을 의미합니다.이것이 무엇을 볼 수 있는지 알아보기 위해 HTML을 살펴보자.

<div id="todoList">
  <h1>To Do List</h1>
</div>

그리고 Vue 객체:

const newTodoList = new Vue({
  el: '#todoList',
})

새 Vue를 만든 다음 #todoList 의 el 키를 할당합니다.이것은 HTML 파일에 id가 'todoList' 인 요소에 자신을 추가하기를 원하는 보기 대상을 알려 줍니다.분명히 더 많은 정보가 없다면 이런 귀속은 아무런 의미가 없다.우리는 Vue에 데이터 속성을 할당하여 정보를 전달할 수 있습니다.이제 HTML 파일 및 JS 파일이 다음과 같이 보일 수 있습니다.

<div id="todoList">
  <h1>{{title}}</h1>
</div>

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
  },
})

데이터 대상을 설명하고 'title' 속성을 만들었습니다.HTML 파일의 h1 태그가 업데이트되었습니다.Angular와 마찬가지로 Vue는 괄호를 사용하여 Vue 객체에서 속성에 액세스합니다.이 예에서, 우리는 데이터 대상에서 타이틀 속성에 접근합니다.이것은 매우 멋있지만, 이것은 결코 업무 명세서가 아니다!이를 실현하기 위해 데이터 속성에 뭔가를 추가하면 우리가 완성해야 할 모든 것을 저장할 수 있다.우리가 할 때, 목록의 내용을 추적할 수 있도록 id 속성을 계속 만듭니다.

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
  },
})

그래서 우리는 어떤 것들이 우리의 임무를 통제할 수 있지만, 우리는 어떻게 해야만 어떤 것들을 추가할 수 있습니까?우리 html 파일로 돌아가서 이 점을 실현하기 위해 몇 가지 기능을 구축합시다.아마도 입력 요소와 작업을 그룹에 추가하는 단추일 것입니다.이 가능하다, ~할 수 있다,...

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input>
    <button>Add Task</button>
  </ul>
</div>

여기에 우리의 목록, 입력 폼, 단추를 저장할 l 요소를 추가했습니다.그러나 우리는 아직 거기에 도착하지 않았다. 그렇지?양식과 버튼을 Vue 객체의 일부 컨텐트에 링크해야 합니다.우리는 아직 어딘가에 우리의 목록을 표시해야 하지만, 우리는 잠시 후에 이 문제를 토론할 것이다.이제 HTML 및 코드를 변경합니다.

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>

const newTodoList = new Vue({
  el: '#todoList',
  data: {
    title: 'To-do List',
    id: 0,
    taskList: [],
    newTask: '',
  },
  methods: {
    addTask() {
      const newTaskItem = {
        id: this.id,
        text: this.newTask,
      };
      this.taskList.push(newTaskItem);
      this.id++;
      this.newTask = '';
    }
  }
})

여기서 우리는 목록의 대부분 기능을 구축했다.데이터 객체에 newTask 속성을 추가했습니다.그리고 "v-model="newTask를 사용하여 입력 폼에 이 대상과 양방향 데이터 연결을 만들었습니다"directive.V-model은 사용자 이벤트에 대한 데이터만 업데이트하는 문법 사탕입니다. 이 경우, 폼에 입력할 때 newTask 속성은 사용자가 입력하고 있는 모든 문자열에 다시 분배됩니다. 이 문자열이 비어 있을 때 표시됩니다. button 요소에서는 V-on:click="addTask"를 사용합니다."dom의 버튼 클릭을 감지하고, 클릭을 들을 때addTask 방법을 실행합니다. Vue 대상에 돌아가면methods 대상을 설명하고, 그 중에서 우리의 방법을 정의하기 시작합니다. 우리에게는ddTask 방법이 있습니다. 간단히 말해서, 이 방법은 우리의 보기에 있는 newTask와 id 속성을 사용하여 대상을 만들고, 이 대상을 우리의 Task로 전송합니다.skList 배열, id 증가 및 newTask 문자열 비움현재 우리는 임무를 작업 목록에 추가하는 방법이 생겼지만, 아직 그것들을 표시하기 시작하지 않았다.우리는 기본적으로 모든 작업을 더 큰 todoList 요소 중의 단독 요소로 볼 수 있기 때문에 이 두 구성 요소를 Vue로 분리합니다.구성 요소이것은 새 vue를 사용하여 만든 루트 vue 실례에서 사용할 수 있는 다시 사용할 vue 실례를 만들 수 있도록 합니다. 이 예는 newToDoList입니다.다음 두 개의 HTML 및 JS 인스턴스가 대기사항 목록을 완성합니다.

<div id="todoList">
  <h1>{{title}}</h1>
  <ul>
    <todo-item
      v-for="task in taskList"
      v-bind:task="task"
      ></todo-item>
    <input v-model="newTask" placeholder='Task description'>
    <button v-on:click = "addTask">Add Task</button>
  </ul>
</div>

Vue.component('todo-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

와, 많은 일이 일어난 것 같아!걸어가자.HTML에서 todo item 요소를 선언했습니다.Vue도 만들었습니다.구성 요소를 '대기사항' 이라고 명명합니다.사실 이 두 사람은 같은 이름을 가지고 있어서 서로 이야기를 나눌 수 있다.기본적으로, 우리는 우리의 업무 목록을 완성하기 위해 가능한 한 많은 vu 구성 요소의 실례를 삽입하고 있습니다.HTML 파일에서 v-for 명령을 사용하여 여러 구성 요소를 보여 줍니다.그것은 거의 하나로 여겨질 수 있다.우리가taskList 수조에서 순환할 때 (다시 한 번 주의하지만, HTML과 JS 파일에서 이 링크를 만들기 위해 "taskList"라는 짧은 단어를 사용했고, 모든 요소를 "task"라고 부른다.'작업 목록' 의 모든 '작업' 에 새 구성 요소를 보여 줍니다.다음에, 우리는 v-bind:task="task"를 사용하여 구성 요소에 전달할 값을 연결합니다.구성 요소 렌더링에서 모든 작업 대상의 속성을 인용할 수 있도록 props: ['task'] 줄과 결합합니다.v-bind:task에서task를 사용하는 것은 완전히 임의입니다.우리는 HTML에서 v-bind: 코끼리 = '작업' 을 사용할 수 있습니다. 도구를 설정하고 코끼리를 사용해서 인용하기만 하면 됩니다.우리 JS에서 우리는 같은 결과를 얻을 것이다.마지막으로, 우리 구성 요소에는 템플릿 속성이 있습니다.이것은 HTML로 해석되며 작업 목록의 각 요소를 DOM에 한 번 표시합니다.이게 있으면 우리는 반드시 업무 명세서가 있어야 한다.

결론
Vue는 애플리케이션 뷰를 제어하는 프레임워크입니다.그것은 반응에 있어서 약간의 유사점이 있고, 각도에서도 약간의 유사점이 있지만, 둘 다 완전히 같지 않다.