IT/Font-end

[Vue.js] 선언적 렌더링

omaeng 2020. 3. 30. 16:02

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다.

 

그전에 앞서 전 포스팅에서 Vue.js의 스크립트가 JSBin에서 작동하지 않아, 해결법을 찾아보던 중 https://unpkg.com/vue/dist/vue.js 주소로 적어야 동작했습니다. 원인은 잘 모르겠으나 JS Bin에서 작동하는 버전이 따로 있는듯 합니다. 

 

먼저 탬플릿을 작성해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
  {{ message }}
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>

그리고 불러올 메세지를 스크립트에 작성해 보겠습니다.

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

작성을 올바르게 하셨다면 다음과 같은 Output을 보실 수 있습니다.

지금 만드신 앱이 정적으로 보일 수 있겠지만 Vue 내부에서 많은 task를 거칩니다. 데이터와 DOM이 연결되었으며 이 앱은 반응형으로 제작되었습니다. 이제 message를 바꿔 반응형인지 확인해 봅시다.

 

중앙 상단에 console을 활성화 하여 app.message = "오맹"(자신의 이름이나 뭐 아무거나)를 작성하여 엔터를 누릅니다.

 

html 탬플릿의 값과 JavaScript의 값을 바꾸지 않아도 반응형으로 랜더링 되었습니다.