개발/Vue.js

Vue.js란 무엇인가? - Hello World

궁즉변 변즉통 통즉구 2022. 3. 16. 16:36
반응형

Vue.js

  • 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크
  • MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터제어 제어 로직을 분리
  • SPA(Single Page Application)를 구축하는데 이용 가능

  • View(html DOM): 사용자에게 보이는 화면. 
  • Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장
  • ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역

  • DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리
  • DOM Listener: DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치
  • Data Binding: View에 표시되는 내용과 모델의 데이터를 동기화
    - Vue에서는 기본적으로 단방향 데이터바인딩으로 컴포넌트간 통신은 상위 컴포넌트->하위컴포넌트로 전달

 

Vue.js 장점

  • React, Angular에 비해 배우기 쉽다
  • 가볍고 성능이 빠름
  • React(Virtual DOM), Angular(데이터 바인딩)의 장점을 취했음
  • 컴포넌트 기반 프레임워크로 레고 블록과 같이 컴포넌트 조합으로 뷰 구성, 코드 재사용 쉬움
Virtual DOM
화면에 변화가 있을 때마다 실시간으로 DOM Tree 를 수정하지 않고 변경사항이 반영된 Virtual DOM을 이용해 메모리에서 처리하고 한 번만 DOM 수정을 한다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄여 렌더링 성능을 높인다

 

 

Vue.js - Hello World

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          message: "Vue.js - Hello World ",
        },
      });
    </script>
  </body>
</html>

 

 

간단한 html코드로 vue.js HelloWorld 코드이다. 먼저 cdn을 통해 vue.js 스크립트 파일을 받아오고, new Vue();를 통해 vue.js 인스턴스를 생성해준다. 그리고 Vue의 옵션 중에 'el: "#app"' 선언을 통해 상단의 <div id="app"> html 엘리먼트와 vue인스턴스를 연결해 준다. 이렇게 연결이 되면 <div id="app"> html엘리먼트 내에서 vue의 기능을 사용할 수 있다. 여기에서는 data 옵션을 통해 message를 선언하고 화면에 출력하기 위해 <div id="app">내에 {{ message }}를 사용하여 message에 선언된 내용이 아래와 같이 브라우저에 출력된다.

 

반응형