«   2022/05   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        
Archives
Today
9
Total
83,905
관리 메뉴

차근차근

[Vue] Vue vs JavaScript/HTML 본문

Vue.js

[Vue] Vue vs JavaScript/HTML

SWKo 2020. 2. 6. 14:36

0. JavaScript/HTML

  • JavaScript/HTML 방식을 보기 위해 vue > old.html 파일을 만든 후 코드를 작성하였다.

  • str을 바꿀때마다 div.innerHTML = str; 을 써줘야 했다.
  • 참고로 JavaScript의 기능에 대해서 구글링 할 때는 검색어 뒤에 MDN(Mozilla Developer Network)을 붙여주자. 공식문서이기 때문에 보다 정확한 정보를 얻을 수 있다.
  • Obj를 추가하여 코드를 조금 더 작성해보고 결과를 확인해보았다.

  • Reactivity의 특성을 볼 수 있다.

  • event 로 JavaScript예시를 들어보자.


1. Vue

  • Vue의 특성을 보기위해 vue > vue.html 파일을 만든 후 코드를 작성하였다.


2. 비교

  • 참고로 Vue는 JavaScript의 프레임워크이다. 다른 범주에서 비교하는 것이 아니라 같은 범주에서 특징을 비교한 것이다.
  • Vue 와 JavaScript의 차이점을 보기 위해 다음과 같이 화면을 분할해 주었다.

  • vue.html의 태그가 좀 더 직관적으로 변한다.
  • vue의 동작원리를 공식문서에 나와있는 그림으로 보면 다음과 같다. 

  • DOM : 화면, Vue : View Library, Objects : 객체(JavaScript)
  • 화면에서 사용자가 키보드 입력을 하면 이벤트가 발생한다. 이벤트가 발생하면 View에서 DOM Listeners를 이용해서 코드를 실행시켜준다. 그 후 JavaScript 객체의 값이 바뀌면 Reactivity를 이용해서 데이터가 바뀌었을 때 Vue에서 Reactivity로 화면에 그려주는 것이 핵심이다.
  • 이 부분을 알고 있으면 Component를 보고 API를 살펴보면 된다.
  • "특정 이벤트에 대한 관리를 개발자가 하지않고 라이브러리가 하겠다." "화면에 데이터를 그려낼때 내가(Vue가) 해줄테니까 데이터만 잘 구현해라."

'Vue.js' 카테고리의 다른 글

[Vue] 웹 서비스 제작 및 배포  (0) 2020.02.07
[Vue] Vue.js 개념  (0) 2020.02.06
[Vue] Vue vs JavaScript/HTML  (0) 2020.02.06
[Vue] Angular vs React vs Vue  (0) 2020.02.04
0 Comments
댓글쓰기 폼