웹(web)/프론트엔드-vue25 Vue reactivity 신기하게도 Vue에 있는 데이터가 변경될 때 이와 관련된 html에 자동으로 반영된다. 이는 Vue를 사용하는 큰 이유 중에 하나이다. 위의 반응성을 제공하기 위해서는 해당 데이터를 data에 등록해두어야 한다. 다음 예제를 보면서 비교해보고 반응성을 위해서 코딩을 어떻게 사용해야 하는지 주의하자. 위 코드를 적고 실행한 후에 Change 버튼을 누른다. 이후 개발자 도구 콘솔에서 vm.msgB= ""와 vm.msgA = ""를 실행한다. 그러면 msgB가 html 코드 상에 반영되지 않음을 파악할 수 있다. 다 실행 한 후의 화면은 다음과 같다. 2020. 7. 8. v-html Vue의 데이터를 사용할 때 스트링에 html 태그가 있을 수 있다. 디렉티브 v-html을 사용하면 된다. 2020. 7. 8. v-bind , v-on 약어 Vue의 데이터를 사용한다는 디렉티브인 v-bind와 이벤트를 감지하고 트리거 시키는 v-on은 자주 사용된다. 따라서, 약어가 있다. v-bind: 는 v-bind를 생략한 : v-on: 은 @를 사용하면 된다. 아래 예제를 통해 v-bind, v-on의 약어를 비교해보자. html 코드에서 같은 내용이 두개 있는데 표현만 약어로 바뀐 것이다. 2020. 7. 8. todo list - v-for, computed exercise 코드 설명 html 1. Vue에서 el: '#app'을 통해 등록할 태그 2. div 태그 3. v-for="todo in computedTodos" Vue에 있는 computedTodos 배열을 사용하여 하나씩 꺼내서 사용 :key="todo.id" 꺼내온 todo의 id를 반복문의 key로 사용. v-for에는 :key를 항상 사용해야 함. :key 는 v-bind:key와 같으며 key의 속성 값을 Vue의 데이터로 사용하기 위함. 4. 체크박스 타입의 인풋태그. v-model="todo.done" 체크여부를 todo의 done 데이터와 연동하여 사용. 사용자가 체크박스를 체크하고 해제하는 것이 todo.done의 값을 바꾸게 됨. 반대로 todo.done의 값을 바꾸면 체크박스의 체크여부가 변경.. 2020. 7. 8. 이전 1 2 3 4 5 6 7 다음
