Vue.js와 jQuery에서 사용하는 Ajax 처리

Vue.js에서 Ajax처리를 구현해서 유용하게 사용하여 남긴다.

이번에는 jQuery를 사용하고 있지만, axios등의 XHR플러그인을 변경해도 문제가 없다고 본다. 오히려 jQuery를 사용하지 않는 쪽이 동작 부분에서는 가볍다. 아래 내용은 독자가 Vue.js 공식사이트에서 제공하는 기본적인 사용법을 이해하고 있다는 가정하에 진행한다.

예제

app.js

app.html

데이터바인딩

vue.js는 data객체의 모든 속성을 프록싱한다. 따라서 data객체값이 변경되었을 때 이를 감지하고 값이 의존하고 있는 부분 전체에 자동으로 업데이트된다. 이번처럼 data객체에 통신상태 및 오류상태를 관리하는 변수를 준비하고 있으면 종료시나 오류시 동기화를 쉽게 구현할 수 있다.

템플릿 구문

vue.js HTML기반 템플릿 구문이 사용되고 있기 때문에,  html구현 예처럼 기술하는 것만으로 직관적으로 구현이 가능하다. pug및 EJS같은 템플릿 엔진을 사용할 수 있는 독자라면 이해하기 쉬울 것이다. Ajax로 보면 지금까지 같이 for변수에 html코드를 넣고 처리할 필요가 없어지기 때문에 가독성도 좋아진다.

믹스인

vue.js의 유용한 기능인 믹스인을 사용한다. 따라서 Ajax의 기능이 필요한 인스턴스에서 호출하는 것만으로 사용할 수 있다. 즉 복잡한 Ajax용함수를 사용할 필요가 없다. 믹스인 메소드와 변수는 호출된 인스턴스에 완결하기 때문에 인스턴스 확장에 유용하다.

개발자도구

Chrome확장욜으로 나온 Vue.js devtools가 편리하다. 이 도구를 이용하면 data개체 값이나 계산속성의 상태를 바로 확인할 수 있다.

 

이전까지 Ajax로 복잡하게 처리하던 것이 간결하고 빠르게 진행할 수 있었다.

Site Footer