Vue.js 소개

Inseok Park·2022년 6월 15일
0

Vue Lv1

목록 보기
2/11
post-thumbnail

Vue 소개

Vue는 무엇인가?

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리

기존의 개발 방식 (html/js)

<div id="app"></div>
<script>
  const div = document.querySelector('#app');
  let str = 'Hello World!'
  div.innerHTML = str

  str = 'hello world!!!'
  div.innerHTML = str  // 다시 호출 해야 변경됨
</script>

Reactivity 구현

<div id="app"></div>
<script>
  const div = document.querySelector('#app')
  const viewModel = {};
  // Object.defineProperty : 객체의 동작을 재정의하는 api

  // Object.defineProperty(대상 객체, 객체의 속성, {
  //   // 정의할 내용
  // });  

  Object.defineProperty(viewModel, 'str', {
      // 속성에 접근했을 때의 동작을 정의
      get: function(){
        console.log('접근');
      },
      // 속성에 값을 할당했을 때의 동작을 정의
      set: function(newValue){
        console.log('할당', newValue);
        div.innerHTML = 'newValue';
      }
  });
</script>

Reactivity 코드 라이브러리화 하기

<div id="app"></div>
<script>
  const div = document.querySelector('#app')
  const viewModel = {};
  // IIFE (즉시실행함수)
  (function(){
    function init(){
      Object.defineProperty(viewModel, 'str', {
          // 속성에 접근했을 때의 동작을 정의
          get: function(){
            console.log('접근');
          },
          // 속성에 값을 할당했을 때의 동작을 정의
          set: function(newValue){
            console.log('할당', newValue);
            render(newValue)
          }
        });
      }
      function render(value) {
        div.innerHTML = value;
      }
      init();
  })();
</script>

즉시 실행 함수 MDN 문서 링크

Hello Vue.js와 뷰 개발자 도구

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</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: 'Hello Vue.js'
        }
      })
    </script>
  </body>
</html>

0개의 댓글