Vue.js란?

Vue.js란?

• Front-End Web Application을 만들기 위한 컴포넌트 기반의 프레임워크
  • 화면을 컴포넌트 단위로 쪼개서 구현
  • 코드 재사용 쉬움
• Angular(데이터 바인딩)와 React(가상 DOM)의 장점 차용

• Angular, React 보다 비교적 배우기 쉽고 성능이 빠름

  
  

특징

• MVVM(Model-View-ViewModel) 패턴 사용
  • 로직과 UI의 분리를 위해 설계된 패턴
  • DOM이 View 역할, 자바스크립트가 Model 역할
  • ViewModel(Vue)이 중간에서 연결해주는 것
• 가상 DOM 사용
  • 변경될 때마다 진짜 돔과 비교해서 달라진 부분만 수정

  
  

Vue 인스턴스

• new Vue 로 선언하여 만들어진 객체
• el 속성 : 태그와 vue 인스턴스를 연결하는 속성
• data 속성 : key-value 형태의 데이터 입력하는 속성
• template 속성 : vue instance가 표현할 HTML 내용을 입력하는 속성

• methods 속성 : vue instance가 가진 함수를 입력하는 속성

  
  

생명주기

• beforCreate : DOM 접근 불가, data 속성과 methods 속성 사용 불가
• created : DOM 접근 불가, data 속성과 methods 속성 사용 가능
• beforeMount : DOM 접근 불가
• mounted : DOM 접근 가능, 수행 시점에 따라 불가능할 수도
• beforeUpdate : 데이터가 변경되면 화면을 다시 그려야 하는데 화면 그리기 전 호출
• updated : 데이터가 변경되고 가상 돔으로 화면을 그리고 난 후 호출

출처

WikiDocs