Vue.js 구성 요소 시작

구성 요소란?

페이지를 구성하는 UI 부품

재사용 가능한 Vue 인스턴스

HTML 템플릿과 JavaScript 로직이있는

Vue.js의 구성 요소 특징

재사용 가능

유지 보수성이 높아진다

템플릿과 JavaScript가 하나의 세트로되어 관리하기 쉽습니다

구성요소 정의(글로벌)

Vue.component 메소드로 생성된 컴퍼넌트는 모든 Vue 인스턴스로부터 이용할 수 있다

첫 번째 인수는 コンポーネント名 , 두 번째 인수는 template에 표시 할 템플릿을 설명합니다.

또한 구성 요소는 Vue 인스턴스 생성 이전에 정의합니다.

js

Vue.component('hello-component', {
  template: '<p>Hello</p>'
  })

// インスタンス生成より上に記述

var app = new Vue({
  el: '#app',
})

HTML에 태그를 삽입하여 구성 요소를 볼 수 있습니다.

html

<!-- <p>Hello</p> -->
<hello-component></hello-component>

구성요소 정의(로컬)

특정 Vue 인스턴스 아래에서만 사용할 수 있도록 ローカル定義
정의한 구성 요소는 components 옵션에 정의하여 사용할 수 있습니다.

또한 전역 정의와 마찬가지로 Vue 인스턴스 생성 이전에 정의합니다.

js

var helloComponentLocal = {
  template: '<p>Hello</p>'
}

var app = new Vue({
  el: '#app',
  components: { // 利用するタグ : 定義した変数
    'hello-component-local': helloComponentLocal
  }
})

html

<!-- <p>Hello</p> -->
<hello-component-local></hello-component-local>

구성 요소 이름 규칙

하나 이상의 하이픈을 포함하는 ケバブケース

<vue-component></vue-component> <!-- OK -->

<component></component>       <!-- NG -->
<vueComponent></vueComponent> <!-- NG -->

향후 추가 될 HTML 태그와 충돌하지 않도록 ケバブケース를 채택한 것 같습니다.

구성 요소 옵션

다음과 같은 버튼을 클릭하면 클릭 수를 계산하는 구성 요소가 있다고 가정합니다.

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">{{ count }}</button>'
})

<!-- クリック数のカウントは、各コンポーネントが独自に保有できる -->
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>

각 인스턴스가 자체 데이터를 사용할 수 있음

구성 요소를 만들 때마다 새 인스턴스가 만들어지므로 각 인스턴스에서 자체 데이터 개체를 사용할 수 있습니다.

같은 컴퍼넌트에서도, 각 인스턴스가 독자적인 데이터를 이용할 수 있도록 data 는 함수일 필요가 있다

다양한 옵션을 사용할 수 있습니다.

그 외에도 new Vue() 할 때와 같은 옵션을 이용할 수 있다
※ el 와 같은 루트 보유 옵션을 제외하다

보충

템플릿의 루트 요소는 単一 여야합니다.

복수의 요소를 사용하고 싶을 때는 div 태그등으로 둘러쌀 필요가 있다

여러 요소로 구성 요소를 정의하려면 템플릿 리터럴을 사용하면 유용합니다.

template:
  `<div> <!-- テンプレートリテラルも使える -->
    <span>count: </span><button v-on:click="count++">{{ count }}</button>
  </div>`

요약

구성 요소 재미