VueJS 1. Vue.js란, 그리고 인스턴스

Vue.js란 무엇인가

---

Vue.js 는 사용자 UI를 만들기 위한 자바스크립트 프레임워크이다. Vue는 라이브러리처럼 사용할 수 있도록 설계된, Progressive(진보적인) 프레임워크로써 일반 프레임워크보다 자유도가 높다고 할 수 있다. Vue는 기본적으로 자바스크립트 객체를 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환한다. 이는 ES5에서 새로 등장한 기능으로 하위호환이 불가능하기 때문에 IE8 이하를 지원하지 않는다.

실제로 UI 개발을 위한 React 라이브러리가 출시되고 1년 후 나왔기 때문에 React에 비해 작고 가벼우며, React보다 사용하기 쉽고 진입장벽이 낮아서 이 두 가지를 많이 비교하는 듯 하다. 하지만 뷰가 코드를 작성하기 쉽고 생산성도 잘 나온다는 장점에도 불구하고, 리액트가 개발자들의 강한 인기를 얻고 있는 이유는 함수형 프로그래밍을 활용하기 쉽기 때문이다.

Vue.js CDN 설치하기

---

타이틀 아래에 다음과 같이 링크를 연결해주면, 간단한 CDN 방식으로 사용준비 끝!

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

Vue 인스턴스(Instance)

---

Vue 인스턴스는 하나의 오브젝트이며, 템플릿 렌더링부터 데이터 바인딩 등 많은 동작을 수행한다. script 태그 안에 new Vue로 선언하여 만들어진 객체를 Vue 인스턴스라고 하며, 인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다. 인스턴스 안에서 사용할 수 있는 속성은 다음과 같다.

• el(element) : Dom의 id, class, tag명을 입력하여 Vue 인스턴스와 연결하는 옵션
• data : 데이터를 객체형식으로 입력하는 옵션
• components : 컴포넌트 지정
• methods : 함수 작성
• computed : getter/setter를 지정하는 옵션

<div id="app">
    <P v-text="name"><p>  //Vue.js 출력
    <p>{{age}}</p>        //7 출력 
</div>

<script>
    new Vue({
    	el : '#app',
        data : {
            name: 'Vue.js',
            age: 7
        }
    });
</script>