반응형 Vue3 [Vue] watch 속성 / 예제 watch watch 속성은 데이터 변화를 감지하고 정해진 로직을 수행합니다. 아래는 v-model를 이용한 watch 예제입니다. 예제 결과 input 박스의 데이터를 변경할때마다 v-model이 message 데이터를 동기화해주고, watch 속성이 message 데이터의 변화를 감지하여 로직을 수행하고 있습니다. 2024. 3. 11. [Vue] computed 속성 / 특징, 예제 예제 {{reversedMessage}} 결과 vuejs에서는 복잡한 연산은 뷰 인스턴스 안에서, html에서는 데이터의 표현만 하는 것을 권고하고 있습니다. computed 속성은 데이터의 연산을 정의할때 사용할 수 있습니다. 만약 위 코드와 다르게 computed 속성을 사용하지 않는다면 아래와 처럼 표현해야하고 가독성에 좋지 않습니다. {{message.split('').reverse().join('')}} computed 특징 1. 반응성 data의 값에 따라 자동으로 다시 연산합니다. 2. 캐싱 만약 화면 여러곳에서 연산한 값을 보여줘야한다면 매번 연산하는 것이 아닌, 미리 연산한 값을 가지고 있다가 화면에 결과를 표시합니다. 2024. 3. 7. [Vue] 주로 쓰이는 디렉티브 정리 아래 디렉티브들은 주로 쓰이는 핵심 디렉티브입니다. v-in 지정한 뷰 데이터의 값에 따라 해당 부분을 보이게 할 수 있습니다. 이제 나를 볼 수 있어요! seen이 참이라면 p 태그를 출력한다. v-for 지정한 뷰 데이터의 개수만큼 html 태그를 반복 출력합니다. {{ item.text }} v-show v-if와 거의 같습니다. 다른 점은 v-if는 뷰데이터가 거짓이라면 태그를 완전히 삭제하지만, v-show는 css에서 display:none으로 바꿉니다. v-bind html 태그의 기본 속성과 뷰 데이터 속성을 연결합니다. Vue.js v-on 화면 요소의 이벤트를 감지, 처리할 때 사용됩니다. 클릭하세요 v-model 폼에 입력한 값을 Vue 인스턴트 데이터와 즉시 동기화합니다. 즉, 폼 .. 2024. 3. 4. 이전 1 다음 728x90 반응형
