vue.js 하면서 배운 것

vue.js에서 이미지 태그 바인딩

<template>
  <img :src="require(`@/assets/images/${src}`)"/>
</template>

<script>
  data: () => ({
    src: '파일이름.png',
  })
</script>

세자리 수마다 ,(콤마) 찍는 정규 표현식

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

int 받았으면 string으로 바꿔준다

swiper.js 페이지네이션 옵션

<template>
 <swiper :options="swiperOption">
   <swiper-slide v-for="(item, i) in List" :key="`list-${i}`">
   <div class="progress-bar">
</template>

<script>
data: () => ({
  swiperOption: {
      slidesPerColumn: 2,
      spaceBetween: 25,
      pagination: {
        clickable: true,
      },
      scrollbar: {
        el: '.progress-bar',
        hide: false,
      },
    },
})
</script>

slidesPerColumn

컬럼 한 개당 보여줄 슬라이드 수

spaceBetween

슬라이드 간 간격 ( slidesPerColumn을 사용하고 있을 때, 슬라이드의 간격을 띄울 수 있다!)

el: '.progress-bar'

스와이퍼의 프로그레스-바를 사용하기 위해 class요소 지정

debugger

1. debugger를 걸고 싶은 곳에 debugger 넣고 실행

   <script>
   methods: {
      onChangeImages(e) {
          console.log(e.target.files)
          debugger
          const file = e.target.files[0]
          this.imgUrl = URL.createObjectURL(file)
      },
   },
   }
   </script>

2. debugger가 걸려있는 곳 까지 실행시키면 자동으로 걸림
   

3. 한 칸씩 넘어가면서 함수 실행
   

4. 스크립트 실행을 다시 시작
   

5. 원하는 지점에서 콘솔에서 데이터 확인