Vue 컴포넌트 기본 구조

 

컴포넌트 라이프 사이클 훅 

• beforeCreate
• created - 컴포넌트 생성
• beforeMount
• mounted - 템플릿에 작성한 html 코드 랜더링
  • beforeUpdate
  • updated
• beforeUnmount
• unmounted - 컴포넌트를 빠져나감

 

 

 

<template>
	//view에 해당하는 html 코드를 작성
	<div></div>
</template>
<script>
	export default {
    	name: '컴포넌트 이름', //컴포넌트 이름은 등록하지 않아도 사용에는 지장 없다.
        components: {},	//다른 컴포넌트 사용 시 컴포넌트를 import 하고 배열로 저장
        data() {
        	//html 코드와 자바스크립트 코드에서 전역 변수로 사용하기 위해 선언하는 데이터
            //데이터 바인딩을 통해 화면(html)과 자바스크립트 간 양방향 통신을 가능하게 한다.
            //여기에 정의된 변수는 this를 통해 접근해야 한다.
        	return {
            	sampleData: ''
            };
        },
        setup() {
        	//컴포지션 API를 구성
        },
        created() {
        	//컴포넌트가 실행되면 실행
        },
        mounted() {
        	//template에 정의된 html 코드가 랜더링 된 후 실행
        },
        unmounted() {
        	//unmounted가 완료된 후(=컴포넌트를 빠져다갈 때) 실행
        },
        methods: {
        	//컴포넌트 내에서 사용할 메소드 정의. this를 통해 접근해야 한다.
        }
    }
</script>