[Vue.js] Vue 시작하기

jQuery만 써보다가 Vue.js를 경험해볼 수 있는 기회가 생겼다.

빠르게 적응하기 위해 온라인 강의를 선택했고

기본적인 내용은 간단히 정리해보기로 했다.

 

jQuery와 Vue의 차이점은 무엇일까?

 

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

 

var str = "Hello";
$("#app").text(str);
	
str = "Vue";
$("#app").text(str);

 

스크립트에서 id가 app인 요소를 찾아서 text를 삽입해주는 jQuery 예제이다.

텍스트가 한 번만 삽입되면 가장 깔끔하고 좋겠지만, 텍스트가 변경될 수도 있고 추가될 수도 있다.

 

텍스트를 변경하려면 다시 id가 app인 요소를 찾아서 텍스트를 바꿔준다.

똑같은 코드가 중복되고 비용이 높은 DOM 참조를 반복하는 비효율적인 상황이 만들어진다!

 

Vue.js에서는 이런 부분을 효율적이고 깔끔하게 만들어준다.

 

<div id="app"> {{ message }} </div>

 

var vm = new Vue({
    el: '#app',
    data: {
    	message: 'Hello'
    }
});

 

vue를 이용한 문구 표시 예제이다.

message로 설정한 문구가 정상 출력되는 걸 확인할 수 있었다.

 

문구를 변경하려면 어떻게 해야할까?

 

vm.message = "Hello Vue";

 

message에 대입하는 것만으로도 화면이 바로 변경되는 걸 볼 수 있다.

중복된 코드는 없어졌고 data가 변경됨에 따라 연결된 DOM의 내용도 같이 변하게 된다.

 

이와 같이 data와 DOM이 연결되어서 반응형(reactive) 웹을 만들 수 있는 것이

Vue.js의 장점이자 jQuery와의 큰 차이점이다.