[가이드] 시작하기 - Essentials | Vue

시작하기

index.html : 

<!-- 개발 버전, 유용한 콘솔 경고 포함 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

또는 

<!-- 크기 및 속도에 최적화된 프로덕션 버전 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 

※ 동영상 강의 : Scrimba 튜토리얼 시리즈

 

 

선언적 렌더링

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

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

더 이상 HTML과 직접 상호 작용할 필요가 없습니다. Vue 앱은 단일 DOM 요소 ( #app이 경우)에 자신을 연결 한 다음 이를 완전히 제어합니다. HTML은 우리의 진입점이지만 다른 모든 것은 새로 생성 된 Vue 인스턴스 내에서 발생합니다.

 

다음과 같이 요소 속성을 바인딩 할 수 있습니다.

<div id="app-2">
  <!-- Vue 인스턴스의 title 속성을 사용, message는 이 속성의 값 -->
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

<script>
  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: 'You loaded this page on ' + new Date().toLocaleString()
    }
  })
</script>

※ v- (지시문) : Vue에서 제공하는 특수 속성임을 나타 내기 위해 접두사가 붙으며, 렌더링 된 DOM에 특수 반응 동작을 적용

 

 

조건부 및 루프

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

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

데이터를 텍스트 및 속성뿐만 아니라 DOM의 구조에 바인딩 할 수 있습니다. 또한 Vue는 요소가 Vue에 의해 삽입/업데이트/제거 될 때 자동으로 전환 효과를 적용 할 수 있는 전환 효과 시스템을 제공합니다.

 

v-for 은 배열의 데이터를 사용하여 항목 목록을 표시하는 데 사용할 수 있습니다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

<script>
  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: 'Learn JavaScript' },
        { text: 'Learn Vue' },
        { text: 'Build something awesome' }
      ]
    }
  })
</script>

 

 

사용자 입력 처리

사용자가 앱과 상호 작용할 수 있도록 v-on지시문을 사용하여 Vue 인스턴스에서 메서드를 호출하는 이벤트 리스너를 연결할 수 있습니다 .

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })
</script>

v-model 양식 입력과 앱 상태 간의 양방향 바인딩을 쉽게 만드는 지시문을 제공합니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

 

 

컴포넌트로 작성

Vue에서 컴포넌트는 기본적으로 미리 정의된 옵션이있는 Vue 인스턴스입니다. 

// todo-item이라는 새 컴포넌트 정의
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

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

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 생성 -->
  <todo-item></todo-item>
</ol>

그러나 이것은 모든 todo에 대해 동일한 텍스트를 렌더링 할 것입니다. 

부모 범위의 데이터를 자식 구성 요소로 전달할 수 있어야합니다. prop을 받아들이도록 컴포넌트 정의를 수정합시다 .

Vue.component('todo-item', {
  // todo-item 컴포넌트는 사용자 정의 속성과 같은 "prop"을 허용합니다.
  // 이 "prop"은 todo 라고 불린다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

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

<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>

<script>
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</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' }
      ]
    }
  })
</script>

우리는 앱을 두 개의 작은 단위로 분리 할 수 ​​있었고 자식은 props 인터페이스를 통해 부모로부터 합리적으로 잘 분리됩니다. 이제 상위 앱에 영향을 주지 않고 보다 복잡한 템플릿과 로직으로 <todo-item> 구성요소를 더욱 개선할 수 있습니다.

 

대규모 애플리케이션에서는 전체 앱을 구성 요소로 분할하여 개발을 관리할 수 있어야 합니다. 가이드 뒷부분에서 구성요소에 대해 자세히 설명하겠지만, 다음은 구성 요소와 함께 앱의 템플릿이 어떻게 보이는지에 대한 (가상) 예입니다.

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

 

사용자 지정 요소와의 관계

Vue 컴포넌트가 Slot API 및 특수 속성을 구현합니다. 그러나 몇 가지 주요 차이점이 있습니다.

 

1.  웹 컴포넌트 사양은 마무리되었지만 모든 브라우저에서 기본적으로 구현되는 것은 아닙니다. Safari 10.1 이상, Chrome 54 이상 및 Firefox 63 이상은 기본적으로 웹 컴포넌트를 지원합니다. 이에 비해 Vue 컴포넌트는 폴리 필이 필요하지 않으며 지원되는 모든 브라우저 (IE9 이상)에서 일관되게 작동합니다. 필요한 경우 Vue 컴포넌트를 기본 사용자 지정 요소 안에 래핑 할 수도 있습니다.

2.  Vue 컴포넌트는 일반적인 사용자 지정 요소에서는 사용할 수 없는 중요한 기능(특히 구성 요소 간 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합)을 제공합니다.

 

Vue는 내부적으로 사용자 정의 요소를 사용하지 않지만 사용자 정의 요소로 소비하거나 배포할 때 상호 운용성이 뛰어납니다. Vue CLI는 자체적으로 기본 사용자 지정 요소로 등록하는 Vue 구성 요소 빌드도 지원합니다.