분류 전체보기
vue.js - vue-awesome-swiper loop options 오류 및 해결 테스트
문제 지금 개발하는 고객 요청이 swiper에서 loop와 한화면에서 slide 개수 1.8개 노출이 있어서 지난번 글 hjh0827.tistory.com/59 에 추가로 해당 옵션을 적용하여 보았다. 그런데 해당 옵션을 적용하면서 vue.js의 특징과 swiper의 option이 문제가 생겼다. vue.js의 장점은 데이터 렌더링이다. 예전 jsp 시절 화면 진입전에 데이터를 controller에서 조회해서 html에 데이터 기반으로 그린후에 script 영역이 진행되는것이 아닌 html을 그린후에 axios등을 이용하여 데이터를 화면에 렌더링 하는 구조이다. 그런데 여기서 문제가 되는건 vue-awesome-swiper 에서 제공하는 loop option을 쓸때 해당 방식이 문제가 된다. swiper..
[vue.js] vue-awesome-swiper 라이브러리 설치 및 사용 예제
서론 구글링해도 vue.js 에서 swiper를 사용하는 내용이 별로 없어서 작성해봅니다. 설치 npm i swiper@5.3.7 npm i vue-awesome-swiper swiper는 6버전 문제가 있어서 5.3.7 버전으로 설치하였습니다. 해당 이슈는 github.com/surmon-china/vue-awesome-swiper/issues/684 로 가면 볼수있다. 소스 vue * 해당 소스는 github.com/surmon-china/surmon-china.github.io/blob/source/projects/vue-awesome-swiper/examples/20-infinite-loop.vue 에서 ex 소스를 사용하였다. Slide 1 Slide 2 Slide 3 Slide 4 Slide ..
vue.js 공식문서 따라하기 - List Rendering(리스트 렌더링)
v-for 엘리먼트에 배열 매핑 v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 입니다. 기본 예제 {{ item.message }} v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에 대한 두 번째 전달인자 옵션을 제공합니다. {{ parentMessage }} - {{ index }} - {{ item.message }} in 대신에 of를 구분자로 사용할 수 있습니다. 그래서 JavaScript의 이터레이터에 대한 자바스크립트 구문과 유사합니다. v-..