VUEJS) v-for, v-bind
v-for 사용법 js const vm = new Vue({ el: '#app', data: { items: [ { id:'1', message: 'Hello World' }, { id:'2', message: 'Good Job' }, { id:'3', message: 'My first Vue' } ] } }) itmes라는 데이터 배열에는 동일한 형식의 3개의 객체가 들어간다. 고유한 (id) 값이 있어야 한다. html {{ item.message }} v-for을 통해서 items를 모두 돌며 item에 객체를 저장하고 그 값들을 사용한다. v-for에는 v-bind:key가 필수적으로 사용된다. 여기서는 없어도 실행은 되지만, 실무에서는 오류가 발생할 수 있기 때문에 꼭 고유 값을 설정해주어야 한..
VUEJS) 조건문과 반복문
조건문 v-if를 활용한 예제 html 보이나요 js const vm = new Vue({ el: '#app', data: { seen: true } }) 실행화면 v-if를 이용하면 js에서 html을 껏다 켰다 제어할 수 있다. 위의 예제에서는 html내의 div태그 내의 v-if="seen" 의 seen은 js에서 정의한 seen의 값에 따라 제어 된다. 만약 js내의 seen이 true이면 텍스트가 출력되고, false이면 출력되지 않는다. 트랜지션 효과 -> 애니메이션하는 개념을 정용한다. 배열과 반복문 v-for을 이용한 예제 html {{ todo.text}} js const vm = new Vue({ el: '#app', data: { todos: [ { text: '1111'}, { te..