데브코스 36일차 TIL : Vue 컴포넌트 기초 및 npm

te-ing·2021년 9월 30일

컴포넌트 기초

<div id="app">
    <upper-name name="apple"></upper-name>
</div>

const app = Vue.createApp(App)
    app.component('upper-name', { // 전역 컴포넌트
      template: `<div>{{ name }}</div>`, // html
      props: ['name'] // 데이터를 받는 부분
    })

<div id="app">
    <upper-name v-for="fruit in fruits" 
                :key="fruit.id"
                :name="fruit.name"
                @to-upper="toUpper(fruit, $event)"></upper-name>
  <!-- $emit은 첫번째 인자만 받을 수 있기 때문에 $event를 넣어줌 -->
  </div>
  
  <script>
    const App = {
      data() {
        return {
          fruits: [
            { id: '1', name: 'apple'},
            { id: '2', name: 'banana'},
            { id: '3', name: 'cherry'},
          ]
        }
      },
      methods: {
        toUpper(fruit, upperName) {
          console.log(fruit, upperName);
          fruit.name = upperName
        }
      }
    }

    const app = Vue.createApp(App)
    app.component('upper-name', { // 전역 컴포넌트
      template: `<div @click="capitalize">{{ name }}</div>`, // html
      props: ['name'], // 데이터를 받는 부분
      methods: { // 데이터가 내려갈 땐 props, 올라갈 땐 $emit
        capitalize() {
          // this.name = this.name.toUpperCase() // 쓰기권한 없음
          this.$emit('to-upper', this.name.toUpperCase())
        }
      }
    })
    const vm = app.mount('#app')
  </script>

script의 defer속성

<script defer src="./main.js"></script> 내부에서 script를 작성할 때 defer 옵션을 통해 페이지로드 후 실행되도록 해줘야 함

Vue 설치

npm init 프로젝트 초기화 및 관리 npm init -y으로 생성 후 수정으로 편하게 할 수 있음

package name: (9.27) 아무것도 안쓰면 폴더명으로 작성됨, version: 0.1.0

vue 설치:npm i vue 기본적으로 2.xx 버전이 설치됨
vue 3.xx버전 설치:npm i vue@next or npm i vue@x.xx
vue 삭제: npm un

npm 명령어

npm init -y npm 설치

npm i serve -D serve 패키지 설치(-D: 개발할때만 사용되는 패키지)

package-lock.json은 package.json이 설치되었을 때의 환경을 저장해주는 것으로, package.json과 같은 위치에 있을 수 있도록 해줘야 함 package-lock.json이 있으면 node_modules같은 파일이 없어도 터미널에서npm i을 치면 필요한 파일 재설치 가능