Dynamic Styling 이제까지 Vue의 Interpolation, v-bind를 이용한 데이터 바인딩, Computed Property나 Watch 같은 기능을 이용한 Vue의 반응성과 이벤트 바인딩에 대해 배웠습니다. 이번엔 스타일링 중에서도 동적 스타일링에 대해 배워보겠습니다. Vue에서 Dynamic Styling을 사용하면 이벤트에 따른 반응으로써 페이지 항목의 스타일을 동적으로 바꿀 수 있습니다. 예를 들어 클릭이나 사용자가 어딘가로 이동하는 경우에요. 위의 HTML div 를 클릭할 수 있고, 활성화된 div를 강조 표시해 보겠습니다. 저번에 배웠던 데이터 프로퍼티 또는 데이터 객체를 만들고 div 태그를 추적하겠습니다. Vue.createApp({ data() { return { bo..
Methods & Computed & Watch 정리 Methods Computed Watch 템플릿에서 데이터를 바인딩 하는 용도, 예를 들어 Interpolation을 위한 {{ }}을 사용하기 위함 데이터 바인딩에만 쓰임 템플릿에 직접 사용하지 않습니다. 데이터,연산 등 어떤 프로퍼티든 Watch로 감시할 수 있습니다. 이벤트 바인딩 용도 다른 데이터를 기반으로 하는 데이터를 가져오는데 유용하며 의존하는 데이터가 바뀔때만 Vue에 의해 재평가 하거나 재실행되는 장점이 있음 데이터 변경에 대한 반응을 코드로 실행할 수 있습니다. (ex: HTTP Request 보내기, Timer 설정, Local Storage에 데이터를 저장하는 작업 등 데이터 바인딩을 위한 사용에서 템플릿 -> Vue 인스턴스로 ..
Watcher 저번에 동적 값을 출력하는데 핵심 기능을 하는 Computed Property에 대해 배웠습니다. Vue에 내장된 따 다른 Advanced Reactivity가 있는데 바로 Watcher 입니다. Watcher는 기본적으로 의존성 중 하나가 변경될 때 Vue에 실행하도록 지시하는 함수입니다. Computed Property와 비슷하며, 실제로 대체해서 사용도 가능합니다. 하지만 왜 그러지 않고 분리된 건지 동작 방식을 설명하겠습니다. Watcher의 선언방법은 data나 method, computed 처럼 watch 라는 고유한 이름을 사용합니다. const app = Vue.createApp({ data() { name: '' }, methods: { ... }, watch..
Computed(연산) Property const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, resetInput() { // document.querySelector('input').vlaue = ''; this.name = ''; ..
양방향 바인딩 : v-model Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ name }} const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, rese..
Event Modifier Events in Action Add 5 Reduce 5 Result: {{ counter }} Your Name: {{ name }} Sign Up 만약 위 코드의 마지막 p태그 밑에 form 태그를 넣고 input과 button 태그를 넣고 버튼을 누르면 어떻게 될까요? 페이지가 새로고침 됩니다. 그 이유는 브라우저의 기본값이 버튼이 있는 form 양식을 제출하면서 앱을 제공하는 서버에 HTTP 요청을 보냅니다. 여기선 그런 서버없이 로컬 환경인데도 불구하고 여전히 브라우저가 로컬로 요청을 보내기 때문입니다. 일반적으로 Vue같은 프레임워크를 사용할 때는 이번 브라우저 기본값을 방지하고, 수동으로 Vue 앱에서 Javasript로 처리합니다. 거기서 사용자의 입력값을 읽고 ..
Native Event Object 이번엔 기존의 HTML코드에 사용자의 이름을 input으로 입력받아 바인딩된 데이터의 값을 변경해보겠습니다. Your Name: {{ name }} methods: { ... ... setName() { } } 위 코드의 이벤트 리스너인 v-on의 input의 값으로 Vue의 실행 함수명을 넣어주면, 그 함수는 자동으로 인수를 하나 얻게 됩니다. (브라우저에서 제공하는 인수) 그 인수는 발생한 이벤트를 설명하는 객체가 될겁니다. 위 HTML에서 함수명에 ()를여서 실행시키는 것이 아닌 함수명만 넣어서 포인터를 지정해 줬기 때문에 브라우저에서 기본으로 제공하는 이벤트 객체를 하나 받게 됩니다. 이 방법이 왜 유용할까요? 이 기본 이벤트 객체는 이벤트 정보로 가득하기 때문..