Vue! 뷰! 보라! Hello World!

장점

• 문서가 빵빵하다. ( 18년도에 처음 사용했을 때도, 한글문서가 잘 정리 되어 있었다. 그때 React는 문서가 누락된게 많았었다. )
• 사용하기 쉽다.
• 이해하기 쉽다.

단점

• React와 비교했을 때, 보안이 취약할 라나?
  • ( 잘 모름... 요즘은 이런 거 보고 신기하는 것 보다 앱을 잘 만들고 싶다. )
• Vue 2.x 버전은 CLI로 vue 프로젝트를 생성하는 기능이 없어 보인다.
  • 3.x 베타 버전 지원 해주기는 하지만... React는 예전 부터 지원하는 데?!
  • 아무래도 React는 페이스북이라는 공룡 기업의 빵빵한 지원이 있어서 그런 거고 Vue는 컨트리뷰트가 개발하기 때문에 속도가 느린 것으로 보인다. 근데 정도면 겁나 빠른 거다. Vue 개발자들의 노고에 고마움을 전합니다.
  • 기회가 되면 컨트리뷰터로 참여해야겠다!

 

Vue Hello World

C를 빡세게 공부 했었고 프로그래밍 패턴을 마스터 하지 못한 사람이 보는 Vue Hello World

 

<div id="app">
  {{ message }}
</div>

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

 

• <div></div>
  • 브라우저가 HTML 해석하여 객체를 생성한다.
  • div 라는 객체인데, 다른 객체를 담는 컨테이너 역할을 한다.
• {{ message }}
  • 이 부분을 보고 파서는 app 객체의 data가 들어갈 곳이라는 걸 안다.
  • ( 파서 개발 해보고 싶다. 우선 쓰는 거 부터 잘 하자. 이건 대학생 때 했어야 했는데... 그땐 생각 못 했다... )
• var app = new Vue ( { ... } )
  • Vue의 인스턴스는 특정 DOM 객체를 참조할 수 있겠다.
  • 정직인 값은 객체로 만들어서 파라미터 보내는 것이 일반적이다.
  • #app 이라는 걸 보니, 뭔기 Document.getElementById 메소드를 쓸 수 있겠다.
  • 추가
    • 옵저버 패턴으로 app 객체와 dom 객체의 변화를 감지한다.

 

위 정보를 기반으로 메모리에 있는 객체 간의 작용과 서로 어떻게 연결되어 있는지 상상해보자. 음... 좋아 좋아. 이거 정말 좋아 정말 좋아!

v-bind:title

• 잠시 마우스를 올려놓으면 title을 볼 수 있다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

 

v-if

• 엘리먼트 표시 여부를 제어한다

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})