vue18 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. computed getter, setter js의 computed에 보면 reversedMsg가 있다. get, set 함수가 존재하는 것을 의미한다. get은 reversedMsg라는 이름을 썼을 때 사용할 값을 리턴해주면 된다. 즉, get의 리턴값이 reversedMsg라는 이름을 통해 사용할 값이다. 이 값은 msg가 변경될 때 최초 1회만 계산한다. msg가 변경되고 나서 여러 번의 reversedMsg를 사용해도 reversedMsg 값은 msg 변경 후 계산된 그 값을 계속 사용한다. set은 reversedMsg = "" 와 같이 값을 변경할 때를 위해 정의해야 한다. 2020. 7. 8. 이전 1 2 3 4 5 다음
