별거 아냐, 뷰로 토도 리스트 만들어.

주의점

이론의 설명이 생략되다.
이번의 목적은 경을 써서 늘 깨닫는 상태로 바꾸는 것이다.
Vue의 튜토리얼을 읽고 좌절하신 분들은 이쪽 코드를 베껴 쓰세요. 피부의 느낌을 잡을 수 있을 것 같아요.

파일 구성

폴더를 어디서 만드는지 모르니 아래 구성으로 파일을 만들어 보세요.
아주 간단합니다.

.
├── index.html
└── index.js

STEP1 TODO 표시

파일을 만드는 초기 형태

먼저 고정된 모형을 하나 써라.
index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>는 Vue를 사용하기 위한 것입니다.
원래는 npm과 yarn 등 패키지 관리 도구를 사용하여 설치해야 하는데, 이것저것 해야 하는데, Vue는 초보자에게 매우 부드럽다...
이 행은 Vue를 사용할 수 있습니다.

Vue 인스턴스 정의

TODO를 표시할 인스턴스를 정의합니다.
index.js

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {name: "todo1", state: true},
      {name: "todo2", state: true},
      {name: "todo3", state: false},
    ],
  }
})

el: 섹션에 Vue 인스턴스를 반영할 요소를 지정합니다.
이번에 #app, 즉 <div id="app"></div>에 포위된 부분에 대해 Vue 실례를 반영해 보겠습니다.data: 부분에서 변수 이름과 초기 값을 정의합니다.
이번todos 변수에서 세 개의 사전을 수조로 정의했다.

Vue 인스턴스 그리기

방금 정의한 Vue 실례를 사용하여} 파일에서 그려 보십시오.index.html의 body 탭에서 다음과 같이 편집합니다.
index.html

<body>
  <div id="app">
    <div v-for="(item, index) in todos" v-bind:key="index">
      <input type="checkbox" v-bind:value="index" :checked="item.state"/>{{ item.name }}
      <br>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="index.js"></script>
</body>

브라우저에서 index.html 를 열면 이렇습니다.

제가 설명해 드릴게요.
Vue에서 특수 토큰 "지시성"을 정의할 수 있습니다.
} 파일의 v-for...와 v-bind...의 부분은 이에 해당한다.
이렇게 하면 디스플레이를 반복하거나 조건 브랜치를 통해 디스플레이를 제어할 수 있다.
자세한 내용은 이쪽 문서를 참조하세요.

먼저-Vue.js

STEP2 설치 TODO 목록의 기능

확인란의 상태도 Vue에 전달

확인란은 지금도 사용할 수 있지만 Vue 측에 상태를 반영하도록 하십시오.
method을 추가합니다.
index.js

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {name: "todo1", state: true},
      {name: "todo2", state: true},
      {name: "todo3", state: false},
    ],
  },
  methods: {
    changeState: function(index) {
      this.todos[index].state = !this.todos[index].state;
    }
  }
})

method에 기술된 것은 그 Vue 실례가 이용할 수 있는 함수입니다.changeState 클릭한 토도의 state 변수를 수정합니다.changeState를 이용하기 위해서는 index.html 파일의 체크박스 줄을 다음과 같이 수정하십시오.

<input type="checkbox" v-bind:value="index" :checked="item.state" v-on:click="changeState(index)"/>{{ item.name }}

이렇게 checkbox를 클릭하면 대응하는 todo의state가 변경됩니다.

삭제 기능 추가

index.js의method부분은 다음과 같이 변경되었습니다.
index.js

methods: {
  changeState: function(index) {
    this.todos[index].state = !this.todos[index].state;
  }
  deleteTodo: function(index) {
    this.todos.splice(index, 1);
  }
}

index.html에 삭제 버튼을 추가합니다.
index.html

<body>
  <div id="app">
    <div v-for="(item, index) in todos" v-bind:key="index">
      <input type="checkbox" v-bind:value="index" :checked="item.state" v-on:click="changeState(index)"/>{{ item.name }}
      <button v-on:click="deleteTodo(index)">削除する</button>
      <br>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="index.js"></script>
</body>

추가 기능 추가

삭제 기능이 추가된 것과 마찬가지로 편집index.html과index.js하세요.
마지막 추가니까 모든 소스 코드를 올려.
index.js

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {name: "todo1", state: true},
      {name: "todo2", state: true},
      {name: "todo3", state: false},
    ],
    message: '',
  },
  methods: {
    changeState: function(index) {
      this.todos[index].state = !this.todos[index].state;
    },
    addTodo: function() {
      this.todos.push({name: this.message, state: false});
      this.message = '';
    },
    deleteTodo: function(index) {
      this.todos.splice(index, 1);
    }
  }
})

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
  </head>
  <body>
    <div id="app">
      <form @submit.prevent="addTodo">
        <input v-model="message" type="text">
        <button type='submit'>追加</button>
      </form>
      <div v-for="(item, index) in todos" v-bind:key="index">
          <input type="checkbox" v-bind:value="index" :checked="item.state" v-on:click="changeState(index)"/>{{ item.name }}
          <button v-on:click="deleteTodo(index)">削除する</button>
        <br>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
  </body>
</html>

여기까지라면 기사의 최초 gif가 되어야 한다.

Reference

이 문제에 관하여(경을 써서 느낌을 잡아주는 Vue.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yutaro50/items/dcd70581fccdafbcb8cf

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

경을 써서 느낌을 잡아주는 Vue.

주의점