어코링 어코링

beforeCreate()created()beforeMount() : mount 되기 전에 실행 함수mounted() : mount 된 이후beforeUpdate()updated()beforeUnmount()unmounted()등등 lifecycle hook 종류 다양하다 *자바스크립트 문법 setTimeoutsetTimeout(function() { 실행할 코드}, 2000); 여기서 2000는 2초 뒤   // mount된 이후 mounted() { setTimeout(() => { this.showDiscount = false; }, 2000)arrow ()=>{} 를 사용하면 this 값을 가져올수있음 서버에서 데이터 가져올때도 lifecycle hook 안에 코드 작성 cre..

컴포넌트의 lifecycle  create 단계 ➯mount 단계 ➯ 컴포넌트 생성 ➯ update 단계 ➯ unmount 단계  update 단계 : 컴포넌트 안의 data가 변하면unmount 단계 : 컴포넌트가 삭제되면 중간 중간에 hook을 걸수 있다. 이것을 lifecycle hook

쌩 자바스크립트이 정렬은1. 데이터를 정렬하고2. HTML에 반영 Vue는 1. 데이터 정렬하고 끝-> {{데이터바인딩}} 해두면 HTML에 데이터가 실시간으로 반영  sort() 함수array.sort() 어레이 뒤에 sort하면 오름차순으로 정렬됨사실은 문자 정렬을 하고 있음 (가나다순)> 숫자 정렬은 sort() 함수 안에 funtion(a,b){a-b} 해줘야함array.sort(function(a,b){return a-b}) 이렇게 해야 1,2,3 숫자순 정렬return값이 음수면 a를 왼쪽으로 보내줌  *참고로 sort()하면 원본이 변형됨map() filter()등은 원본을 보존해줌 요즘은 원본데이터를 보호하는것이 유행data() { return { // originRooms ..

자료의 사본을 만드는 방법은 쉽게 등호 사용var a = 'hi';var b = a; 하지만 array,object 자료 형태는 아래처럼 등호로 복사하면 안된다var a = [1,2,3];var b = a;이유는 b를 수정하면 a에도 변경사항이 반영이 된다(object도 마찬가지)var a = [1,2,3];var b = [...a]; ... 의 기호는 spread operator array나 object 앞에 붙일수 있으며array, object의 괄호를 제거해주는 문법이다[1,2,3] 이런식으로 쓰면 1,2,3만 남는다 약간의 트릭으로 array를 복사 할 때 spread operator 이걸로 괄호를 벗겼다가 다시 씌우면 값 공유 현상이 일어나지 않게 복사 할 수 있다

watch 데이터 감시, 함수식으로 작성위 코드에서 a는 파라미터, 작명두개의 파라미터 가능예를 들어 a,b라 하면 a는 변경 전 데이터 b는 변경 후 데이터month라는 코드가 변경될 때마다 변경(렌더링) -> 감시자의 역할감시할 데이터() {} => 렌더링이 필요한 데이터 ..?

CSS로 애니메이션 주려면1. 시작전 class명2. 애니메이션 끝난 후 class명3. 그리고 원할 때 2번 class명 부착 class명 오브젝트 형태로 넣을 수 있다 vue의 태그 활용 isOpen 가 true가되면 모달창 부착 --> 클래스명을 조건부로 넣을려면 오브젝트 형식으로 작성{ 클래스명 : 조건 } .start { opacity: 0; transition: all 1s; }.end { opacity: 2;}vue에서는 이용하면 위 에 CSS코드를 애니메이션 쉽게 줄 수 있음 등장 애니메이션애니메이션 주고 싶은 요소를 으로 감싸기class명 3개 CSS 작성.작명-enter-from {시작스타일}.작명-enter-active {transition}.작명-en..

import / export 문법 쓰는법1. export default 변수명   export {변수명1, 변수명2}2. import 변수명 from 해당파일 경로     import 할때 변수명은 작명가능  import {변수명1, 변수명2} from 해당파일 경로    상세페이지 설명설명설명 닫기 {{a}} {{rooms[i].title}} {{rooms[i].price}}원

동적인 UI 만드는 법1. UI의 현재 상태를 데이터로 저장해둠     모달창이 현재 상태 열렸는지, 닫혔는지    탭이 보일지 (햄버거 메뉴)2. 데이터에 따라 UI가 어떻게 보일지 작성 v-if="조건식"조건식이 참일경우에면 HTML을 보여준다 3. 현재 상태를 변경할수 있는 스위치(함수)를 만든다   상세페이지 설명설명설명 상품1