Vue Basic

차례 - How to define a component template    - Single file component    - Using string    - Without template

How to define a component template

Vue에서 어떤 특정한 작업을 할 때, 코드는 다르지만 같은 결과를 얻을 수 있는 여러 방법이 있습니다. 이 중 template을 정의하는 몇가지 방법에 대해 알아보도록 하겠습니다. vue template 작업을 할 때 html 태그를 사용할 수 있습니다. 또한, interpolation, directives 방법등을 사용할 수도 있습니다.

Single file component

Single file component를 Vue에서 널리 사용되는 방법입니다. vue 파일 하나에 markup과 style, data 및 method를 정의할 수 있습니다.

// exampleComponent.vue
<template>
  <div>{{ greeting }}this is single file component.</div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hi!, ',
    };
  }
}
</script>

<style>
// some css styles here..
</style>

Using string

자바스크립트 파일에서 Vue component를 생성하고 template을 아래와 같이 string으로 선언할 수 있습니다. string으로 template을 선언할 수 있지만, 조금 구조가 복잡해지면, 한 눈에 tag들의 구조를 파악하기가 쉽지 않을 수 있습니다.

Vue.component('sampleComponent', {
  template: `<div>{{ greeting }}this is single file component.</div>`,
  data() {
    return {
      greeting: 'Hi!, '
    };
  }
});