Vue 컴포넌트 기본구조

1. 개인 공부 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

1. Vue 컴포넌트가 갖는 기본 형태

1. 컴포넌트를 화면에서 보려면 라우터에 추가해야 합니다.

<template>
    // html 코드는 여기에
</template>
<script>
export default {
    // javascript 코드는 여기에
}
</script>
<style scoped>
    // 이 컴포넌트에만 쓰이는 css는 여기에 작성
</style>

---

2. Vue가 가지고 있는 가장 기본적인 스크립트 구조

1. name
   • 이 컴포넌트의 이름 지정 가능 (선택 사항)
2. components
   • 특정 컴포넌트를 다른 컴포넌트에 import 해서 재사용 가능
3. data
   • 데이터 바인딩
4. setup()
   • 향후 수정할 예정입니다.
5. created()
   • 이 컴포넌트가 실행되는 순간에 자동으로 created() 안에 정의된 코드가 바로 실행이 됩니다.
6. mounted()
   • template 태그 안에 지정된 html DOM이 실제 화면에 로딩(mount)이 되는 순간 mounted에 정의된 코드가 바로 실행이 됩니다.
7. unmounted()
   • 이 컴포넌트에서 다른 컴포넌트로 이동을 하게 될 때(unmount) unmounted에 정의된 코드가 바로 실행됩니다.
8. methods()
   • 함수를 정의해서 이 컴포넌트 안에서 사용할 수 있습니다.

<script>
export default {
    name: '',   
    components: {},   
    data() {  
        return {
            title: 'Hello world'
        };
    },
    setup() {},
    created() {},   
    mounted() {},   
    unmounted() {}, 
    methods: {  
    }
}
</script>

---

3. 데이터 바인딩 예시

1. 스크립트 태그 부분 내 data()에서 정의한 데이터는 template 태그에서 {{}} 표현식을 통해 사용할 수 있습니다.

<template>
    <h1>{{title}}</h1>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            title: 'Hello world'
        }
    }
}
</script>
<style scoped>

</style>

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)