Vus.js 시작하기

Vue.js 란 무엇인가요?

사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

시작하기

<!-- 도움되는 콘솔 경고를 포함한 개발 버전, 일반적으로 사용함-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

혹은

<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

를 사용하여 사용하고자 하는 페이지에 추가시키면 된다. 첫번째 script를 일반적으로 사용함

선언적 렌더링

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.**

v-bind 속성은 디렉티브 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다.

조건문과 반복문

Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다.

트랜지션 효과에 대해서는 이후에 배워보도록 하겠다

사용자 입력 핸들링

사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있습니다

모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다.

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model디렉티브를 제공합니다.

컴포넌트를 사용한 작성방법(중요)

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스 입니다.

Vue.component("todo-item", (template: "<li>할일 항목 하나입니다.</li>"));

이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할수 있습니다.

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
  <todo-item></todo-item>
</ol>

그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 렌더링할 것입니다. 이래서는 무언가가 부족합니다. 부모 영역의 데이터를 자식 컴포넌트에 집어넣을 수 있어야겠습니다. prop을 전달받을 수 있도록 할 일 컴포넌트의 정의를 수정해봅시다.

Vue.component("todo-item", {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ["todo"],
  template: "<li></li>"
});

이제 이 todo를 v-bind를 사용하여 각각의 반복되는 컴포넌트에 전달할 수 있습니다.

<div id="app-7">
  <ol>
    <!-- 
      이제 각 todo-item 에 todo 객체를 제공합니다.
      화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 
      또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
     -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    >
    </todo-item>
  </ol>
</div>

Vue.component("todo-item", {
  props: ["todo"],
  template: "<li></li>"
});

var app7 = new Vue({
  el: "#app-7",
  data: {
    groceryList: [
      { id: 0, text: "Vegetables" },
      { id: 1, text: "Cheese" },
      { id: 2, text: "Whatever else humans are supposed to eat" }
    ]
  }
});

이것은 인위적으로 만든 예시이지만(이 예시와 for문의 예시가 어떠한 차이점은 지금 예시의 경우 컴포넌트로만 앱을 구성하였다.), 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.

대규모 응용 프로그램에서는 개발 과정을 관리할 수 있는 수준 하에 두기 위해 전체 앱을 컴포넌트로 나누는 것이 필수적입니다. 예를들어

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>