Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

jquery로 노가다 뛰고 있는데, Vue.js라는 녀석이 나와서 해볼려고 한다. 과연 이녀석은 어떨지. 여기에 있는 모든 예제들은 페이지에서 실제 작동하는 예제들이다.

Vue.js 에 대해서

Vue는 유저 인터페이스를 만들기 위한 프로그래시브 프레임워크(progressive framework)다. 다른 모놀리틱 프레임워크와는 다르게 Vue는 점진적으로 채택이 가능하게 만들어졌다. 빠르게 진입해서 작게 시작 할 수 있다는 이야긴데, 그래서 인기인 것 같다. 요즘엔 단순한 것들이 인기를 얻는 흐름(Golang도 그렇고)이다. 핵심 라이브러리는 뷰 계층에만 초점을 맞추고 있어서 다른 프레임워크들과 쉽게 통합하여 사용 할 수 있다.

Vue.js는 React와 자주 비교하는 것(왠지 경쟁자 느낌) 같다. 지금껏 자바스크립트 프레임워크는 사용해 본 적이 없어서, 다른 프레임워크와 비교 할 수는 없다. 대신 다른 프레임워크와의 비교문서를 참고해 보자.

Vue.js

Vue.js를 사용하기 위해서 스크립트를 포함했다.
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

예제를 따라해봤다.
<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: "#app",
  data: {
    message: "안녕하세요 Vue!"
  }
})
</script>

음.. 잘 나오는 것 같다.

{{ message }}

jQuery라면 아래와 같이 했을 것이다.
<div class="panel callout radius">
    <div id="myapp">
    </div>
</div>
<script>
$("#myapp").html("안녕하세요 jQuery!")
</script>

리스트

리스트를 출력해보자. Vue에서 제공하는 기본 디렉티브인 v-for 를 이용해서 데이터를 순환 할 수 있다. 태그를 출력하는 TagApp을 만들었다.
<div id="tagging">
    <ul>
      <li v-for="item in items">
         {{ item.name }}
      </li>
    </ul>
</div>

<script>
var tagging = new Vue({
  el: "#tagging",
  data: {
    items: [
      {name: "AWS"},
      {name: "Cloud"},
      {name: "EC2"},
      {name: "ELB"},
      {name: "S3"},
      {name: "GoLang"},
      {name: "Python"},
      {name: "System Admin"}
    ]
  }
})
</script>
data.items 목록을 읽어서 출력한다.

  • {{ item.name }}

Vue 애플리케이션 구조

Vue 애플리케이션 구조는 아래와 같다.

 Vue Application 구조

vue.js 라이브러리를 로딩해서 Vue 인스턴스를 만든다. Vue 인스턴스는 HTML 문서와 독립되는 애플리케이션이다. HTML 문서에 배치를 위한 키로 사용하는게 엘리먼트 이름(el) 이다. 표현할 데이터는 data영역에 정의하고, HTML 문서에서는 {{ }}를 이용해서 연결(바인딩)하면 된다. 아래는 실행 결과다.

{{ product }} is in stock