[Vue] Vue.js

1. Vue.js

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

특징

1.  Approachable (접근성)

2.  Versatile (유연성)

3.  Performant (고성능)

 

2. MVVM Pattern

-  Model + View + ViewModel

-  Model : 순수 자바스크립트 객체

-  View : 웹페이지 DOM

-  ViewModel : Vue 역할. view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다.

3. 사용방법

방법은 간단하다. html header에 이 script를 추가하고 뷰 인스턴스를 생성하면 된다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

4. Vue Instance

뷰 인스턴스는 HTML의 특정 범위 안(el 속성)에서만 옵션 속성들이 적용된다.

자세한 사항은 [이 글]에 있다.

속성	설명
el	Vue가 적용될 요소 지정. CSS Selector 또는 HTML Element를 사용한다.
data	Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태이지만, 함수 형태를 권장한다.
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
methods	화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가한다.
computed	특정 데이터의 변경사항을 실시간으로 처리한다. 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터를 반환한다.
watch	뷰 인스턴스의 특정 property가 변경될 때 실행할 콜백 함수를 설정한다.
filter	화면에 표시되는 텍스트의 형식을 쉽게 변환해 표현식에 새로운 결과 형식을 적용한다.
lifecycle 관련 훅들	뷰 인스턴스가 생성되고 el에 연결될때, 수정될때 등 실행할 로직을 정의한다.

<script>
    new Vue({
        el:"",
        data(){
            return {
            	//...
            }
        },
        template:"",
        methods:{
        	//...
        },
        created(){
        },
        updated(){
        }
    });
</script>

 

5. Life Cycle

life cycle 속성	Vue Instance	DOM 접근	설명
beforeCreate	O	X	각 정보 설정 전 호출. this.데이터이름 해도 undefined 된 상태.
created	O	X	데이터의 설정 완료된 후 호출. 서버에 데이터를 요청해 받아오는 로직을 수행하기 좋다.
beforeMount	O	O	뷰 인스턴스와 dom이 연결되기 전(마운트 전) 호출. DOM 접근도 가능하고 뷰 인스턴스의 데이터 접근도 가능하지만 아직 DOM이 뷰 데이터에 따라 변경되지는 않은 상태.
mounted	O	O	지정된 element에 뷰 인스턴스 데이터가 마운트 된 후 호출. template 속성에 정의한 화면요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행한다.
beforeUpdate	O	O	데이터가 변경될 때 virtual DOM이 랜더링, 패치되기 전 호출.
updated	O	O	vue에서 관리하는 데이터가 변경되어 DOM이 업데이트된 상태. 데이터 변경 후 화면 요소 제어와 관련된 로직을 수행한다.
beforeDestroy	O	O	뷰 인스턴스가 제거되기 전 호출.
detroyed	X	X	뷰 인스턴스가 제거된 후 호출.