Vue에서 알아야 할 중요한 기본사항을 살펴보았다.
[ DOM & Templates ]
DOM과 상호작용하는 방법 및 Vue가 템플릿을 관리하여 특정 Vue 기능을 실제 페이지에 반영하는 방법을 배웠다.
1/ Vue can be used to define the goal instead of the steps (→ declarative approach )
Vue의 핵심개념은 개별단계를 정의하는게 아니라, 목표를 정의함으로써 선언형 접근 방식을 따르는 것.
즉, 페이지의 모습을 정의하고, 페이지에서 동적인 부분을 정하면 Vue가 그 목표에 도달하는 방법을 알아낸다.
2/ Connect Vue to HTML via "mount" : Vue then renders the real DOM based on the connected template
Vue가 작업을 수행하려면 Vue앱, 즉 Vue 인스턴스를 mount메서드로 실제 HTML 코드와 연결해야한다.
CSS 선택자를 통해 페이지 일부를 선택하고, 그 부분을 Vue앱 템플릿으로 전환해서 모든 Vue 기능을 사용할 수 있다.
ex: 데이터, 이벤트 바인딩 기능 등
[ Data & Event Bindings ]
1/ You can bind data via interpolation( {{ }} ) or the v-bind(":") directive
data는 해당 템플릿에서 출력값이 될 수 있다. 제어된 HTML 코드에서 이중 중괄호 구문인 보간법 구문을 이용하여 HTML 태그 사이에 data를 출력하거나, 혹은 v-bind 디렉티브를 통해 HTML 속성값에 data를 바인딩할 수 있다. 'v-bind:' 대신, ':'을 써서 바인딩해도 된다.
2023.06.25 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 15. 보간법 및 데이터바인딩
[Udemy Vue 완벽가이드 Section2] 15. 보간법 및 데이터바인딩
Vue가 제어하는 HTML코드에서 데이터를 출력하려면, 해당 영역에서만 사용 가능한 특수 구문이 존재. Vue앱은 보이지 않는 곳에서 해당 HTML 코드를 스캔해서 지원되는 기능과 구문을 감지한다. 데
lion284.tistory.com
2023.06.26 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기
[Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기
데이터 출력 시, 항상 보간법만 사용해야 하는건 아니다. # 속성 바인딩에 보간법 사용시 보간법 예시: link를 걸 때, Vue앱을 이용하여 data 프로퍼티에 link값(ex: https://vuejs.org/)을 저장하고, 구문(ex:
lion284.tistory.com
2/ You listen for events via v-on ('@')
데이터를 출력하는것 외에 event도 수신할 수 있다.
v-on 디렉티브나 @ 축약어 사용.
2023.06.29 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 21. 이벤트 바인딩 이해하기(v-on)
[Udemy Vue 완벽가이드 Section2] 21. 이벤트 바인딩 이해하기(v-on)
사용자 입력 데이터나 이벤트에도 반응하는 동적 페이지를 만들고 싶다. 이런 이유로 Vue같은 프레임워크를 사용한다. 이런 프레임워크로 높은 수준의 반응형이자 동적인 웹 애플리케이션을 쉽
lion284.tistory.com
[ Reactivitay ]
Vue updates the real DOM for you when bound data changes.
데이터가 변경될때마다 Vue가 DOM을 업데이트하는데, 이때의 data는 v-bind나 이중 중괄호로 출력된다.
Computed properties and watchers allow you to react to data changes.
Vue앱의 data옵션에 변경가능한 data를 등록했고, computed와 watch를 이용하여 결과를 동적으로 계산하거나, data변경 시 코드를 실행한다.
2023.07.05 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 29. 연산(Computed) 프로퍼티 소개
2023.07.05 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 30. 감시자(Watcher) 활용하기
[Udemy Vue 완벽가이드 Section2] 30. 감시자(Watcher) 활용하기
# computed 프로퍼티 복습 computed - 동적 값을 출력하는데 핵심 기능. ex: 복수의 입력값(의존성) 또는 지금처럼 입력값 한 개와 하드코딩된 값 한 개가 있는 경우. //HTML Your name: {{ fullname }} //JS computed:
lion284.tistory.com
[Udemy Vue 완벽가이드 Section2] 29. 연산(Computed) 프로퍼티 소개
method를 호출하여 반환값을 넣는 대신, 코드 자체를 넣는 방법도 있다. Your name: {{ outputFullname() }} Your name: {{ name + ' ' + 'Schwardud' }} 이렇게 코드 자체를 넣으면 화면에 변경이 생길 때마다 Vue에 의해
lion284.tistory.com
[ Styling ]
Dynamic CSS class and inline style bindings are supported by Vue.
Vue를 사용하여 동적 스타일링을 할 수 있다. CSS클래스 및 inline스타일을 v-bind를 통해 동적으로 설정.
2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링
[Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링
지금까지 보간법과 v-bind를 이용한 데이터바인딩, computed 프로퍼티나 감시자와 같은 기능을 이용한 Vue의 반응성, 이벤트 바인딩에 대해서 배웠다. 모두 꼭 알아야 할 핵심 기능들! 살펴봐야 할 기
lion284.tistory.com
2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 34. 동적으로 CSS 클래스 추가하기
[Udemy Vue 완벽가이드 Section2] 34. 동적으로 CSS 클래스 추가하기
인라인 스타일을 동적으로 바인딩 하는 방법을 알아보았다. 2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링 [Udemy Vue 완벽가이드 Section2] 33. 인라인 스타
lion284.tistory.com
2023.07.10 - [Vue.js] - [Udemy Vue 완벽가이드 Section2] 35. 클래스 및 연산(computed) 프로퍼티
[Udemy Vue 완벽가이드 Section2] 35. 클래스 및 연산(computed) 프로퍼티
원한다면 computed 프로퍼티를 동적으로 CSS 클래스를 추가할 때 활용할 수도 있다. HTML 코드에 로직이 있는 건 최적은 아니므로. 위와 같은 class바인딩도 괜찮지만, 로직을 HTML 외부로 옮기고 싶을
lion284.tistory.com
** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.
'Vue.js' 카테고리의 다른 글
| [Udemy Vue 완벽가이드 Section3] 41. 콘텐츠 조건부 렌더링 (0) | 2023.07.25 |
|---|---|
| [Udemy Vue 완벽가이드 Section3] 40. 문제 이해하기 (0) | 2023.07.25 |
| [Udemy Vue 완벽가이드 Section2] 36. 동적 클래스 : 배열구문 (0) | 2023.07.10 |
| [Udemy Vue 완벽가이드 Section2] 35. 클래스 및 연산(computed) 프로퍼티 (0) | 2023.07.10 |
| [Udemy Vue 완벽가이드 Section2] 34. 동적으로 CSS 클래스 추가하기 (0) | 2023.07.10 |
