[Vue.js] Vue.js

Vue.js

사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework

특징

• Approachable 접근성
• Versatile 유연성
• Performant 고성능

MVVM Pattern

• Model : 순수 자바 스크립트 객체
• View : 웹페이지의 DOM
• ViewModel : Vue의 역할

-> 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리 이용

Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함.

 

• el : Vue가 적용될 요소 지정. CSS Selector or HTML Element
• data : Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태
• template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
• methods : 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가
• created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의

Vue Instance의 유효범위

Vue()로 인스턴스가 생성됨.

el속성에 지정한 화면 용소(돔)에 인스턴스가 부착됨.

el속성에 인스턴스가 부착된 후 data 속성이 el속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환

Vue Intance Life Cycle

Instance의 생성 -> 생성된 Instance를 화면에 부착 -> 화면에 부착된 Instance의 내용이 갱신 -> Instance가 제거되며 소멸