> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/cdn-vue3/jquery-vs-vue.md).
# jQuery vs VueJS
## jQuery vs VueJS
이 문서에서는 jQuery와 VueJS를 비교하여 추구하는 방향의 차이점을 분석한다.
### jQuery 특징
jQuery는 태그를 선택하여 대부분의 작업을 시작한다. 따라서 태그를 제어하는 것에 기능의 초점이 맞춰져 있다. 별도의 추가 데이터 없이 태그의 정보 만으로 해결 가능한 상황일 경우 유용하게 사용할 수 있다.
### VueJS 특징
VueJS는 백그라운드 데이터를 선언하고 상황에 맞게 단방향 또는 양방향으로 화면과 바인딩하여 사용한다. 따라서 데이터에 기반으로 한 화면 구성이 가능하다.
다양한 화면에 바인딩할 수 있는 데이터를 설정하는 영역을 제공하여 데이터를 기반으로 한 화면을 쉽게 구현할 수 있다.
VueJS에서는 대화식 웹 인터페이스를 구축하기 위하여 MVVM 패턴을 사용한다.
**MVVM(Model-View-ViewModel)** 구조는 `Model`과 `View`를 단방향 또는 양방향으로 연결하기 위한 구조이다. 어떠한 방식으로 연결하느냐에 따라 다양한 변화를 처리할 수 있다.
### 동일 프로그램 비교
`input` 태그에서 작성한 내용을 `div` 태그에 출력하는 프로그램을 각각 `jQuery`와 `VueJS`로 작성하여 비교해본다.
#### jQuery
```markup
jQuery 샘플
```
jQuery에서는 페이지를 만들기 위해 다음과 같은 순서로 로직을 수행한다.
1. input 태그를 선택하고 이벤트를 설정한다
2. 이벤트가 발생할 때마다 input 태그의 값을 불러온다
3. div 태그를 선택하여 불러온 값을 출력한다.
#### VueJS
```markup
VueJS 샘플
{{text}}
```
VueJS에서는 페이지를 만들기 위해 다음과 같은 순서로 로직을 수행한다.
1. 제어할 영역을 설정한다.
2. text라는 model을 정의한다
3. input에 v-model설정을 이용하여 양방향 연결한다.
4. div에 출력 구문을 이용하여 단방향 연결한다.
