[Vue.js] 싱글 파일 컴포넌트

[Vue.js] 컴포넌트란?, 뷰와 컴포넌트

이어서)

 

싱글 파일 컴포넌트(Single File Component)

• HTML, CSS, JS 코드를 한 파일에서 관리하는 방법으로 vue 확장자를 가진 파일
• .vue 파일은 컴파일 되면 자바 코드로 변환되기 때문에 하나의 모듈임

 

• 공통 요소 컴포넌트: src/components/....vue
• 화면 컴포넌트: src/views/....vue

 

싱글 파일 컴포넌트 구조

<template>

• 컴포넌트가 렌더링될 때 화면에 보여줄 HTML 태그 부분
• 데이터 바인딩을 위한 표현식으로 {{...}} 사용
• 디렉티브(v-*)를 이용해서 데이터 바인딩, 이벤트 처리 및 동적 화면 제어

 

<script>

• name: 컴포넌트 이름 선언
• data: 컴포넌트 데이터 선언
• methods: 컴포넌트 이벤트 처리를 위한 메소드 선언
• beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed: 컴포넌트 라이프사이클 훅(Lifecycle Hook) 선언
• 데이터 바인딩을 위한 선언
• watch: 데이터 및 상태 감시를 위한 선언

 

<style>

• <style> 태그: 전역 style
• <style scoped> 지역 style
• App.vue를 제외하고 나머지 .vue는 모두 지역 style 적용, 아니면 싱글 파일 컴포넌트 위반

 

* 컴포넌트 <template> 태그 내의 태그들의 속성 중 id 속성 사용 하지 말 것,

  컴포넌트는 재사용되기 때문에 중복되는 id가 생기게 되는 것