Vue.js란 ?

Vue.js

 

1. Vue.js 란?

• Vue.js는 Evan You에 의해 만들어졌다.
• 사용자 인터페이스를 만들기 위한 progressive framework이다.
• 현대적 도구 및 지원하는 라이브러리와 함께 사용하면 정교한 SPA(Single Page Application)을 완벽하게 지원한다.
• Vue는 구글에서 Angular로 개발하다가 가벼운 것을 만들고 싶은 생각으로 시작한 개인 프로젝트에서 탄생했다.
• Vue.js의 특징에는 Approachable(접근성), Versatile(유연성), Performant(고성능)이 있다.

 

2. MVVM Pattern

• Model + View + ViewModel
• MVVM Pattern이란 애플리케이션 로직을 UI로부터 분리하기 위해 설계한 디자인 패턴이다.

• Model : 순수 자바스크립 객체 (데이터를 담기 위해 사용)
• View : 웹 페이지의 DOM (HTML)
• ViewModel : Vue의 역할로 View와 Model 사이에서 Data와 DOM에 관련된 일을 처리

 

3. Vue Instance

1) Vue Instance 

• Vue 인스턴스는 생성된 Vue 오브젝트 하나의 오브젝트이다.
• 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작한다.
• Vue를 시작하기 위해 필수적이며, 앱의 진입점이 된다.
• Vue에서는 간단한 템플릿 렌더링부터 바인딩, 컴포넌트 등 많은 동작들이 수행된다.
• Vue 인스턴스를 생성할 때는 Options 객체를 전달해야 한다.

// vue instance 생성
<script>
const app = new Vue({
    	// 옵션
    })
</script>

 

2) Options : el

• Vue 인스턴스에 마운트(연결)할 기존 DOM 엘리먼트 지정
• CSS selctor or HTML Elemnet 작성
• new를 이용한 인스턴스 생성할 때만 사용한다.

<div id="app">
</div>

// CSS selector 방식
<script>
	const app = new Vue({
    	el : '#app'
    })
</script>

// HTML Element 방식
<script>
	const div = documnet.querySelector("#app");
    	const app = new Vue({
    		el : div
    	})
</script>

 

 

2) Options : el

• Vue 인스턴스의 데이터 객체
• 객체 또는 함수의 형태로 작성이 가능
• 컴포넌트를 정의할 때 data 데이터를 반환하는 함수로 선언해줘야 함. 일반 객체 사용시 생성된 모든 인스턴스에서 동일 객체 참조 공유, 함수로 생성시 새 복사본을 반환함
• 화살표 함수를 사용하지 않음. 화살표 함수가 부모 컨텍스트를 바인딩하기 때문에 'this'는 예상과 달리 Vue 인스턴스가 아님

<div id="app">
	<h2>{{msg}}</h2>
</div>
<script>
	const app = new Vue({
	el : "#app",
    	data : {
    	msg : 'Hello',
    	},
    	data() {
    		return {
        		msg: 'Hello'
        }
 	})
</script>

 

3) Options : methods

• Vue 인스턴스에 추가할 메소드
• VM 인스턴스를 통해 직접 접근하거나 Directive 표현식에서 사용 가능
• 모든 메소드는 자동으로 this 컨텍스트를 Vue 인스턴스에 바인딩
• 화살표 함수를 메소드 정의에 사용하면 안됨

<div id="app">
	<h2> {{ count }} </h2>
</div>

<script>
	const app = new Vue({
    	el : '#app',
        data : {
        	count : 1
        },
        methods : {
        	plus : function() {
            	this.count++;
            }
       }
  })
</script>

 

4) Options : template

• Vue 인스턴스의 마크업으로 사용할 문자열 템플릿
• template은 마운트(연결)된 엘리먼트를 대체함
• Vue 옵션에 render 함수가 있으면 템플릿 속성은 무시됨