vue의 각 단일 파일 구성 요소는 무엇으로 구성되어 있나요?

Vue 단일 파일 구성 요소는 세 부분으로 구성됩니다. 템플릿: HTML 구문을 사용하여 시각적 표현을 정의합니다. 스크립트: JavaScript 구문을 사용하여 논리적 동작을 정의합니다. 스타일: CSS 구문을 사용하여 스타일을 정의합니다.

Vue 단일 파일 구성 요소의 구성

Vue 단일 파일 구성 요소는 세 부분으로 구성됩니다.

1 템플릿(템플릿)

템플릿 부분은 구성 요소의 시각적 표현을 정의합니다. HTML 구문을 사용하여 작성되었으며 Vue 지시문 및 보간을 사용하여 데이터를 동적으로 렌더링할 수 있습니다.

2. 스크립트

스크립트 부분은 구성 요소의 논리적 동작을 정의합니다. 이는 JavaScript로 작성되었으며 구성 요소의 데이터, 메서드 및 수명 주기 후크를 포함합니다.

3. 스타일

스타일 부분은 구성 요소의 스타일을 정의합니다. CSS 구문을 사용하여 작성할 수 있으며 클래스 선택기, ID 선택기 및 미디어 쿼리를 포함할 수 있습니다.

예:

<code class="html"><template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to the Vue world!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
p {
  color: red;
}
</style></code>

이 예에서는:

• 템플릿 섹션은 제목과 메시지가 있는 div 컨테이너를 정의합니다.
• script 섹션은 구성 요소의 제목과 메시지 데이터를 정의합니다.
• styles 섹션은 h1 및 p 요소의 스타일 속성을 정의합니다.

위 내용은 vue의 각 단일 파일 구성 요소는 무엇으로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!