진스

출처: computed와 watch, vue, vuex computed와 watch, vue, vuex kyounghwan01.github.io computed 속성 computed는 어떠한 값(props, this.data)을 변화하여 손쉽게 사용하기 위한 메소드 이며, computed를 통해 나온 값을 바꾸고 싶을 때도 있습니다. 이럴 때는 getter, setter를 이용하여, 값을 다룸 템플릿 내에 들어가는 값이 변환이 되어야 하는 경우 filter (opens new window)를 사용하면 원하는 방향으로 변환 할 수 있습니다. 그런데 많은 연산을 해야 할 경우 위와 같이 할 경우 템플릿이 간단하지 않고, 함수도 매번 정의해야 하기에 절대 좋은 방향이 아닙니다. 또한 store의 값을 gett..

#사용법 자바스크립트 내 Audio 객체를 사용하여 이펙트를 작동합니다.

Life Cycle Hook in Vue Vue 인스턴스가 생성되고 소멸되기까지의 과정 속에서 콜백 함수를 걸어줌으로써 DOM 조작을 할 수 있다. 다시말해 인스턴스가 생성(Create), HTML 노드와 연결되고(Mount) 변화되는(Update) 되는 순간을 JS로 탐지하고(Hook) 적절한 function을 통해 조작할 수 있다. Vue의 라이프사이클 Hook을 이해하고 적절한 타이밍에 DOM 조작을 함으로써 무한스크롤이 구현된 간단한 APP을 만들어 보았다. vue 인스턴스 생성하기 다음과 같은 사진과 문구 5000개가 쏟아지는데 이를 무한스크롤로 구현하려 한다. 준비 과정은 평소와 크게 다르지 않다. 다만 비동기처리를 위한 라이브러리와 무한스크롤을 위한 scrollmonitor CDN을 추가로 ..

무한 스크롤 출처 vue 무한 스크롤 vue 무한 스크롤 kyounghwan01.github.io 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 ... export default { computed: { notifications() { return this.$store.getters["notification/notifications"]; } }, methods: { // 무한 스크롤 정의 h..

props로 받을 자료형 지정하기 자료형 특정 생성자의 인스턴스인지 확인할 수 있습니다. String 문자열 '1' Number 숫자 1 Boolean 불 true, false Function 함수 function() {} Object 객체 { name: 'foo' } Array 배열 [1, 2, 3], [{ id: 1 }, { id: 2 }] 생성자 함수 인스턴스 new Cat() null 모든 자료형 1, '1', [1] 옵션 옵션자료형설명 type 자료형, 배열 허가할 자료형, 배열로 여러 개를 지정할 수 있습니다. default 데이터, 함수 디폴트 값 required Boolean 필수인지 validator 함수 사용자 정의 유효성 검사 함수, 확인한 뒤 불을 리턴하면 됩니다.

VueJS의 입력폼엔 사용되는 v-model에는 modifier(수식어)가 사용될 수 있습니다. 사용 가능한 수식어는 아래와 같습니다. v-model.lazy v-model.number v-model.trim 위 수식어를 v-model 프로퍼티와 함께 사용하면 좀 더 편리한 기능을 간단하게 제공합니다. 그럼 위 수식어 들을 하나씩 알아봅니다. ! v-model.lazy 입력된 값이 바로 data에 반영되지 않고 엔터를 누르거나 포커스가 벗어나는 등의 이벤트가 발생할 경우에만 값이 반영되어 나타납니다. lazy는 debounce와는 다르니 참고하세요. ! v-model.number 알아보기 input 폼을 사용하여 입력값을 받는 경우 숫자 또는 문자 무엇을 입력해도 타입이 문자로 나타나게됩니다. 이 경우 ..

참고 사이트 고양이도 할 수 있는 Vue.js isActive 변경하기 동적 클래스 동적 스타일 ※ 알기 쉽게 .is-active 는 배경색을 변경하게 했습니다. rintiantta.github.io 산출 속성 사용 방법 산출 속성을 조합해서 사용하기 게터와 세터 산출 속성 캐시 기능 리스트 필터링 See the Pen 리스트 필터링 by 배정민 (@baejm) on CodePen. 정렬 기능 추가하기 현재 샘플 코드에서는 Lodash를 사용하고 있습니다. 실제 운용할 때는 "lodash.min.js"을 사용해주세요. 와치watch 사용 방법 한 번만 동작하는 워처 실행 빈도 제어하기 사용자 정의 디렉티브로 데이터를 감시하면서 DOM 조작하기 사용자 정의 디렉티브 사용 방법 사용할 수 있는 훅 nextT..

메소드설명 push URL 이동. 히스토리 스택에 추가되므로 뒤로가기 버튼 동작시 이전 URL 로 이동 replace URL 이동. 현재 URL 을 대체하기 때문에 히스토리 스택 쌓지 않음 go 숫자만큼 뒤로가기 또는 앞으로 가기 (음수:backward, 양수: forward) 👉🏻 Vue.js 2.2.0 이후로 push, replace 에서 onComplete, onAbort 콜백 함수를 제공합니다. onComplete : 탐색 성공 onAbort: 중단(현재 탐색이 완료되기 전 동일한 경로로 이동하거나 다른 경로 이동) 1.router.push(location, onComplete?, onAbort?) Vue 인스턴스 내부의$router를 사용하여this.$router.push와 같이 사용할 수도 있..