반복문(v-for)

Vue의 반복문사용은 의뢰로 단순합니다.

index.html파일에 아래와 같이 작성합니다.

<div id="app">
      <ul>
          <li v-for="todo in todos">
              {{todo.text}}
          </li>
      </ul>
    </div>

html 안의 div태그에 id 값이 app인 곳을 vue에서 작동을 합니다.

아래는 main.js에 아래와 같이 입력을 합니다.(main.js 파일이 아닌 index.html파일안에  <script></script> 태그로 작성해도 무방합니다.

var app = new Vue({
    el: '#app',
    data:{
        todos:[
            {text: 'Learn JavaScript'},
            {text: 'Learn Vue'},
            {text: 'Build sonething awesome'}
        ]
    }
})

 결과를 보면 다음과 같이 나타납니다.

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 전환 효과 시스템을 제공합니다.

몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for 디렉티브는 배열의 데이터를 바인딩하여 Todo 목록을 표시하는데 사용할 수 있습니다

 

자료출처 : https://kr.vuejs.org/v2/guide/index.html