Vue 구성 요소 자습서 - Vue.js 응용 프로그램의 기본 구성 요소

Vue 구성 요소 구조

Vue CLI를 사용하여 프로젝트를 만들었을 때 우리에게 몇 가지 구성 요소가 생성되었습니다. 

/src/App.vue  파일을 엽니 다 . 이 파일은 우리의 루트 구성 요소 입니다.

<template>
  ...
</template>

<script>
  ...
</script>

<style>
 ...
</style>

3 가지 섹션으로 구성되어 있습니다.

• 템플릿  - 여기에 HTML이 배치됩니다. 여기에 HTML이 아닌 요소를 정의 할 수도 있지만 나중에 이해할 것입니다.
• 스크립트  - 앱의 로직이있는 곳입니다.
• 스타일  - 여기에 CSS가 있습니다.

.vue  로 끝나는이 구성 요소 파일 은 단일 파일 구성 요소 입니다. 즉, 각 vue 파일은 자체 구성 요소입니다.

다른 구성 요소 가져 오기

/src/App.vue  구성 요소 내에 다음과 같은 내용이 있습니다.

<template>
  <!-- Other HTML removed for brevity -->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  <!-- Other HTML removed for brevity -->
</template>

그리고 논리 섹션에서 :

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

여기서 CLI  는 / components  폴더 내에 HelloWorld.vue 라는 두 번째 구성 요소를 생성했습니다 . 그런 다음 HelloWorld 구성 요소의 이름을  HTML 요소로 참조하여이 구성 요소를 템플릿에 포함합니다 . 

그런 다음 스크립트  섹션 내에서 HelloWorld  가 파일에서 가져오고 구성 요소  객체 내에 추가됩니다 .

당신이 열 경우 /src/components/HelloWorld.vue  당신은 같은 구조가 알 수 App.vue  템플릿, 스크립트와 스타일 섹션을. 이 구성 요소의 이름  은 스크립트 섹션 의 name 속성에 의해 정의됩니다 .

HelloWorld 구성 요소 수정하기

우리는 당신의 기술을 지정할 수있는 간단한 앱을 만들 예정입니다.

HelloWorld.vue 의 이름  을 Skills.vue로 변경  하고 HelloWorld  에서 Skills로 이름 속성을  조정 합시다 :

<script>
export default {
  name: 'Skills',
  props: {

  }
}
</script>

또한 템플릿 HTML 섹션을 다음과 같이 조정하십시오.

<template>
  <div class="skills">
    Skills
  </div>
</template>

파일을 저장 한 다음 App.vue  파일 로 돌아가서 다음 과 같이 조정하십시오.

<template>
  <div id="app">
    <Skills />
  </div>
</template>

<script>
import Skills from './components/Skills.vue'

export default {
  name: 'app',
  components: {
    Skills
  }
}
</script>