[vue3] import / export

 

import / export 문법 쓰는법

1. export default 변수명

   export {변수명1, 변수명2}

2. import 변수명 from 해당파일 경로  

   import 할때 변수명은 작명가능

  import {변수명1, 변수명2} from 해당파일 경로  

 

<template>
  <div class="black-bg" v-if="isOpen == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>설명설명설명</p>
      <button @click="closeModal">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="a in menus" :key="a">{{a}}</a>
  </div>

  <div v-for="(a, i) in 6" :key="i">
    <img :src="rooms[i].image" class="room-img">
    <h4>{{rooms[i].title}}</h4>
    <P>{{rooms[i].price}}원</P>
  </div>
</template>

<script>

import data from './assets/oneroom.js'

export default {
  name: 'App',
  data() {
    return {
      rooms : data,
      isOpen: false,
      price1 : 60,
      price2 : 70,
      스타일 : 'color : blue',
      menus :['Home', 'Shop', 'About'],
      cnt : [0, 0, 0]
    }
  },
  methods : {
    increase(arr) {
        this.cnt[arr]++
    },
    openModal() {
      this.isOpen = true
    },
    closeModal() {
      this.isOpen = false
    }
  },

  components: {
  }
}
</script>