[웹] Vue.js

Vue.js

• Evan you에 의해서 만들어졌습니다.
• Vue 탄생은 Google 에서 Angular로 개발하다가 가벼운 걸 만들어 보고 싶은 생각으로 시작한 개인 프로젝트입니다.
• 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework

 

Vue.js 특징

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

 

MVVM Pattern(Model + View + ViewModel)

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

※ 지금까지 프로그래밍 해 왔던 방식은 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library를 사용했었는데 Vue 는 view 와 Model을 연결하고 자동으로 바인딩해주므로 양방향 통신이 가능합니다.

 

Vue Instance 생성

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

 

실행순서

1. 뷰 라이브러리 파일 로딩합니다.
2. 인스턴스 객체 생성(옵션 속성 포함)합니다.
3. 특정 화면 요소에 인스턴스를 붙입니다.
4. 인스턴스 내용이 화면 요소로 변환합니다.
5. 변환된 화면 요소를 사용자가 최종적으로 확인합니다.