Single File Component

Vue Single File Component

 

• 싱글 파일 컴포넌튼 체계란 .vue 파일로 프로젝트 구조를 구성하는 방식
• 확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일

<template>
  <button @click="count++">{{count}}번 클릭되었습니다.</button>
</template>

<script>
export default {
  data(){
    return{
      count:0
    }
  }
}
</script>

<style>
  button{background:#000;color:#fff;border:none;padding:10px 20px;border-radius:5px;}
</style>

 

 

생성 방법 (Build Tools)

 

1. cmd 창을 통해 원하는 작업을 원하는 폴더 경로 설정

2. build-tool-enabled Vue project를 만들기 위해, 아래의 명령어를 실행해야 된다.

npm init vue@latest

3. 위의 명령어를 실행 후, create-vue를 만들고 실행하며, 이후 다양한 속성을 설정할 수 있다.
  (모르면 그냥 다 No를 입력하자)

4. 프로젝트가 생성이 되었으면, 아래의 과정을 통해 dev server을 실행하자

5. 모든 준비가 완료되면, 다음 명령어를 통해 실행하자

 

 

provide / inject

 

• Vue3 에서는 기본적으로 자식에게 데이터를 전달하려면 props를 사용하게 된다.
• 하지만 계층 구조가 깊어지게 되면 불필요하게 중간에 끼인 자식 컴포넌트들이 원하는 컴포넌트까지 모두 props로 데이터를 중계해야 한다.
• 이런 엄청난 비효율을 없애고 꼭 필요한 곳에서 데이터를 전달이 이루어지도록 해주는 것이 provide와 inject이다.
• 데이터를 제공할 곳에서 provide를 사용하고, 이 데이터를 사용하고 싶은 곳에서 inject를 사용하면 된다.