초보자를 위한 VueJs VueJs 파트 생성, 가져오기 및 구성 요소 사용

첫 번째 구성 요소 만들기

컴포넌트란 무엇인가요?
컴포넌트는 Vue 애플리케이션의 구성 요소입니다. 각 구성 요소에는 고유한 기능과 보기가 있으며, 구성 요소는 애플리케이션 전체에서 재사용될 수 있습니다. 구성 요소의 한 가지 예는 다양한 페이지에서 액세스할 수 있는 탐색 모음입니다.

기본 구성요소 생성

• 컴포넌트 폴더에 HelloWorld.vue(원하는 경우 파일 이름 변경 가능)라는 새 컴포넌트 파일을 생성합니다(아직 존재하지 않는 경우 새 컴포넌트 폴더 생성).

• HelloWorld 구성 요소:
  

<template>
  <div>
    <h1>Hello, World!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: blue;
}
</style>

• App.vue에서 HelloWord 구성 요소 가져오기 및 사용

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

<script>
import HelloWorld from './components/HelloWorld.vue'; //adjust according to the path to your component

export default {
  components: {
    HelloWorld
  }
}
</script>

이제 App.vue 구성 요소에 렌더링된 HelloWorld 구성 요소를 볼 수 있습니다.

위 내용은 초보자를 위한 VueJs VueJs 파트 생성, 가져오기 및 구성 요소 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!