Vue.js?

Vue.js ?

웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크

Vue.js는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

Model + View + ViewModel

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

Vue 인스턴스

뷰 인스턴스는 Vue로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위.

new Vue({
  el: "#app",
  data: {
    message: "Vue.js 앱입니다~~",
  },
});

el : Vue가 적용될 요소 지정.
data :Vue에서 사용되는 정보 저장. 객체 or 함수 형태
template : 화면에 표시할 HTML,CSS등 마크업 요소를 정의하는 속성
methods : 화면 로직 제어와 관련된 method를 정의하는 속성
created : 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의.

\

Vue Instance Life Cycle

Life Cycle을 크게 나누면 인스턴스의 생성, 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸 4단계로 나뉨.

• beforeCreate : Vue 인스턴스가 생성되고 각 정보의 설정 전에 호출. DOM과 같은 화면요소에 접근 불가
• created : Vue 인스턴스가 생성된 후 데이터들의 설정이 완료된 후 호출. 인스턴스가 화면에 부착하기 전이라서 template 속성에 정의된 DOM 요소는 접근 불가
• mounted : 지정된 element에 Vue 인스턴스 데이터가 마운트 된 후에 호출.
• beforeUpdate : 데이터가 변경될 때 virtual DOM이 렌더링, 패치 되기 전에 호출.
• updated : Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태.
• beforeDestroy : Vue 인스턴스가 제거되기 전에 호출
• destroyed : Vue 인스턴스가 제거된 후에 호출

<div id="app">
  <h2></h2>
</div>
<script>
  new Vue({
    el: "#app",
    data:{
      message: "life cycle."
    },
    beforeCreate(){
      console.log("beforeCreate!");
    },
    created(){
      console.log("created!");
    },
    mounted(){
      console.log("mounted!");
    },
    updated(){
      console.log("updated!");
    }
  })
</script>

콘솔에 어떻게 나올까요~ ㅎㅁㅎ