혼자정리하는 vue 공부

KHW·2021년 10월 4일

vue

프레임워크

목록 보기

13/43

vue 사용하는 방법

페이지에 CDN package로 import하기

npm 사용하여 import하기

공식 CLI를 사용

CDN 사용하기

간편하면서 쉽게 다루기 좋다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="counter">
    Counter: {{ counter }}
</div>
<script type="module">
  const Counter = {
    data() {
      return {
        counter: 0
      }
    }
  }

  Vue.createApp(Counter).mount('#counter')
</script>
</body>
</html>

npm과 webpack 사용하기

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<div id="counter">
</div>
</body>
</html>

main.js

import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#counter')

App.vue

<template>
    Counter: {{ counter }}
    <Btn></Btn>
</template>

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

주로 sfc를 가진 webpack과 vue를 같이 쓰길 추천

전역등록과 지역등록

전역등록

main.js

import {createApp} from 'vue'
import App from './App.vue'
import Btn from  './component/Btn.vue'

const app = createApp(App)

app.component('Btn',Btn)

app.mount('#counter')

App.vue

<template>
    <h1>{{ count }}</h1>
    <Btn
            :count="count"
            @click="increseCount"
    />
</template>

<script>
  export default{
    data(){
      return {
        count : 0
      }
    },
    methods : {
      increseCount(){
        this.count++
      }
    }
  }
</script>

Btn.vue

<template>
    <button>increase Btn</button>
</template>

<script>
</script>

지역등록

main.js

import {createApp} from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#counter')

App.vue

<template>
    <h1>{{ count }}</h1>
    <Btn
            :count="count"
            @click="increseCount"
    />
</template>

<script>
    import Btn from './component/Btn.vue'
  export default{
      components : {
        Btn
      },
    data(){
      return {
        count : 0
      }
    },
    methods : {
      increseCount(){
        this.count++
      }
    }
  }
</script>

Btn.vue

<template>
    <button>increase Btn</button>
</template>

<script>
</script>

두 결과 차이

전역등록은 main.js에서 app.component('Btn',Btn)로 Btn을 등록하였으나
지역등록은 App.vue에서 import Btn from './component/Btn.vue'를 통해 가져와서 components : { Btn } 이렇게 컴포넌트를 등록하였다.

전역등록에서 Btn이 하나 더 추가될경우

Btn.vue

<template>
    <button>increase Btn</button>
    <button>decrease Btn</button>
</template>

<script>
</script>

button 태그가 하나더 생길경우 정상적으로 App.vue의 increase가 동작하지않는다.

해결방법 : $emit을 통해 정확한 대상을 지칭

App.vue

<template>
    <h1>{{ count }}</h1>
    <Btn
            @increase="increseCount"
            @decrease="decreseCount"
    />
</template>

<script>
    import Btn from './component/Btn.vue'
  export default{
      components : {
        Btn
      },
    data(){
      return {
        count : 0
      }
    },
    methods : {
      increseCount(){
        this.count++
      },
      decreseCount(){
        this.count--
      }
    }
  }
</script>

Btn.vue

<template>
    <button @click="$emit('increase')">increase Btn</button>
    <button @click="$emit('decrease')">decrease Btn</button>
</template>

<script>
    export default{
      emits : ['increase','decrease']
    }
</script>