진스

출처 vue-awesome-swiper를 이용해 vue에서 swiper(Carousel)를 사용해보자 negabaro.github.io vue-awesome-swiper란? Swiper라는 인기 라이브러리를 vue에서 간단히 사용할 수 있게 만들어진 wrapper이다. Swiper를 이용하면 아래와 같은 컴퍼넌트를 구현할 수 있다. swiper설치 방법 패키지 설치 yarn add swiper vue-awesome-swiper ※주의 swiper의 버전은 최신(6)이 아닌 5.3.7에서 동작확인했다. 6에서는 여러가지 버그가 있다고함. Pagination is not working on Swiper6관련 이슈 로드 import Vue from "vue"; import { Swiper, SwiperSlid..

출처 [Vue.js] Vue 애니메이션(Animate) #2 - Javascript Hooks, Velocity 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버 상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 hasudoki.tistory.com 목차 Transition Page Transition Transition Group Javascript Hooks + Velocity(이번 포스팅) GSAP 2021.04.11 - [개발일기/Vue.js] - [Vue.js] Vue 애니메이션(Animate) #1 - Transition [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이..

출처 [Vue.js] Vue 애니메이션(Animate) #1 - Transition 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 hasudoki.tistory.com 이번 포스팅은 Vue 애니메이션에 대해 알아보자. 애니메이션을 이용해 사용자 경험을 향상할 수 있다. 버튼 같은 곳에 마우스 호버상태 일 때 클릭률을 높이거나 강조해야 되는 문구, 영역 등에 애니메이션을 적용해 집중력을 높일 수 있다. 목차 Transition(이번 포스팅) Page Transition Transition Group Javascript Hooks + Velocity GSAP Tra..

vue js에서 클릭 이벤트에 대한 속성 값을 가져와야하는 경우 vuejs에서 데이터 속성 값을 가져 오는 데 도움이 될 수 있습니다. 버튼 클릭 이벤트를 작성하고 vue.js에서 사용자 정의 속성 값을 가져옵니다. 이 예제에서는 "data-id"와 같은 사용자 지정 속성이있는 버튼을 사용하고 버튼을 클릭하면 콘솔에서 사용자 지정 데이터 속성 값의 해당 값을 가져옵니다. event.target.getAttribute ()를 사용하여 데이터 속성 값을 얻습니다. event.target.getAttribute (attribute_name); 클릭하기 data : { message : "환영합니다, 잠시만 기다려주세요 ...." }, methods:{ callFunction : function (event) ..

번외? let scrollTop = window.scrollY||document.documentElement.scrollTop ; ie는 window.scrollY없으므로 document.documentElement.scrollTop 로 쓸수있게 자바스크립트 현재의 스크롤바 위치 가져오는 방법 자바스크립트를 사용하여 현재의 스크롤바 위치값을 가져오는 방법입니다. webisfree.com 출처 [Vue.js/Nuxt.js] Element 높이 값 받아오기 노란색 동그라미 부분이 내용에 따라 높이가 변화한다그렇기 때문에 노란색 동그라미 부분이 변함에 따라 빨간 박스도 높이값이 변화알고 싶은 것:빨간색 상자 높이 값을 구한 다음, 파란 부분 velog.io 노란색 동그라미 부분이 내용에 따라 높이가 변화한다 ..

LoginForm.vue username password 로그인하기 {{ message }} 포커스로 이동하는 함수실행을 이유는 모르지만 created훅에 넣으면 에러가 발생 mounted 안에서는 제대로 작동됨을 확인했다.

탭을 스와이프해서 넘기는 것을 구현하고자 한다. vuetify 라이브러리를 사용 할수도 있지만 세부 커스터 마이징이 어려워서 라이브러리를 쓰진 않았다. 방법1. HTML - 이벤트 캐치할 div - 탭의 개수만큼 Transition 생성 - 선택된 탭만 보이도록 하위 div에서 v-if 조건으로 설정한다. JS /* TAB 관련 Method */ switchtab (n) { if (this.activetab > n) { this.transition = 'slide-prev' } else if (this.activetab < n) { this.transition = 'slide-next' } }, start (e) { this.settouchpos(e, 'start') }, move (e) { this.s..

mousemove // js new Vue({ el : '#canvas', data : { x : 0, y : 0 }, method : { eventXY : function(event) { this.x = event.offsetX; this.y = event.offsetY; } } }) // html {{x}}, {{y}} keyup // keyup의 경우 keyupEvent 실행 // keyup중 enter키일 경우 keyupEvent 실행 // keyup중 alt+enter키일 경우 keyupEvent 실행