반응형 DEVLOG/Vue.js17 Vue Instance 모든 Vue 앱은 Vue 함수로 새 Vue Instance를 만드는 것부터 시작합니다. {{ greeting }} new Vue({ el: '#root', data: { greeting: 'Hello Vue' } }) Green Red Orange new Vue({ el: '#root', data: { count: 0 } }) count = {{count}} Green new Vue({ el: '#root', data: { count: 1 } }) 2019. 7. 6. Vue 클래스와 스타일 바인딩 - #14 HTML 클래스 바인딩하기 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 일반적으로 사용됩니다. 이 두 속성은 v-bind를 사용하여 처리할 수 있습니다. 우리는 표현식으로 최종 문자열을 계산하면 됩니다. 그러나 문자열 연결에 간섭하는 것은 짜증나는 일이며 오류가 발생하기 쉽습니다. 이러한 이유로, Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 위 구문은 active 클래스의 존재 여부가 데이터 속성 isActive 의 참 속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토.. 2019. 5. 8. Vue computed와 watch - #13 watch 속성 대부분의 경우 computed 속성이 더 적합하지만 사용자가 만든 감시자가 필요한 경우가 있습니다. 그래서 Vue는 watch 옵션을 통해 데이터 변경에 반응하는 보다 일반적인 방법을 제공합니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용합니다. 예제 입니다. yes/no 질문을 물어보세요: {{ answer }} 이 경우 watch 옵션을 사용하면 비동기 연산 (API 엑세스)를 수행하고, 우리가 그 연산을 얼마나 자주 수행하는지 제한하고, 최종 응답을 얻을 때까지 중간 상태를 설정할 수 있습니다. 계산된 속성은 이러한 기능을 수행할 수 없습니다. watch 옵션 외에도 명령형 vm.$watch API를 사용할 수 있습니다. 2019. 5. 8. Vue computed와 watch - #12 computed 속성 템플릿 내에 표현식을 넣으면 편리합니다. 하지만 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 아래의 예를 봅시다. {{ message.split('').reverse().join('') }} 이 템플릿은 더 이상 간단하고 명료하지 않습니다. message를 역순으로 표시한다는 것을 알려면 찬찬히 살펴봐야 하겠죠. 템플릿에 메시지를 역순으로 표시할 일이 더 있으면 문제는 더 악화될 것입니다. 복잡한 로직이라면 반드시 computed 속성 을 사용해야 하는 이유입니다. 기본 예제 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: .. 2019. 5. 8. 이전 1 2 3 4 5 다음 반응형
