🖥 dev-ruby

1. router 설치하기 npm install vue-router@4 2. router 폴더 생성 src/router.js 생성 후 import { createWebHistory, createRouter } from "vue-router"; // import 컴포넌트 const routes = [ { path : "/list", // 이 경로로 접속하면 component : List, // 이 컴포넌트로 넘어가게 해주세요 }, { path : "/home", component : Home, }, { path : "/detail/:id", //detail/:아무문자 component : Detail, }, ]; const router = createRouter({ history: createWebHist..

1. 왜 배울까? -> 훅을 쓰기위해 훅이란? 다음 단계로 가기 전에 이걸 실행해주고 가세요~라고 후크를 거는 것 1. create 단계 데이터만 존재하는 단계 2. mount 단계 사이에 있던걸 실제 html로 바꿔주는 단계 mounted함수를 사용하면 코드가 실제 html로 변환이 된 후에, 함수가 실행이 된다. 3. 컴포넌트 생성 inde.html에 장착하는 단계 4. update 단계 5. unmount 단계 2. hook 종류 create단계 전 : beforeCreate() create단계 후 : created() mount단계 전 : beforeMount() mount단계 후 : mounted() update단계 전 : beforeUpdate() update단계 후 : u..

1. 받아온 데이터를 두 변수에 저장 후, 한 변수만 sort시키면 다른 변수는 원본 그대로일까? 아니다. 같은 array를 할당받은거기 때문에 그 변수도 같이 정렬된다. => 별개의 데이터로 저장하기a= [...data], //data와는 완전히 다른 카피본을 만들어 주세요~ b= data 2. array를 별개의 데이터로 저장 후, 다시 원본으로 돌리기 위해 대입을 한다면? array는 '=' 등호로 대입하면 왼쪽 오른쪽 값을 공유한다는 뜻이 되기 때문에, 같은 메모리 주소를 갖게 된다. 따라서 this.b = [...this.a]; //또 다른 카피본으로 대입해줘야 함

1. :class="" CSS로 애니메이션주기 - 모달창이 서서히 열리는 애니메이션 .start{ opacity: 0; transition: all 1s; } .end{ opacity: 1; } '모달창열렸니'가 true가 될 때만 end클래스가 적용이 된다는 뜻 transition: all 1s 는 클래스의 모든요소의 변화가 생길 때 1초가 걸린다는 뜻 2. - Vue제공 태그 사용 애니메이션 주고싶은 요소를 감싼다 3. 창 열릴 때 enter-from, enter-active, enter-to : 에 class 작성 name지정 css에 3개의 클래스 선언 .fade-enter-from{ opacity: 0; // 시작 시 스타일 } .fade-enter-active{ tr..

1. watcher란? 사용자가 input에 입력한 자료의 유형이 일치하는지 검사해주는 2. 사용법 export default에 watch라는 이름으로 등록 watch(){ } 그 안에 감시할 데이터 이름으로 함수형식으로 작성 watch : { 감시할데이터(){ // 동작 작성 } } 그럼 month라는 데이터가 변할 때마다 month안에 있는 코드가 실행된다 watch : { month(a){ if(a >= 13) alert('13개월은 안팔아요~!'); }, }, 2-1. month(a){} a는 month의 값이다 2-2. month(a,b){} b는 변경 전 데이터가 된다

1. input에 입력한 값 알아내기 사용자가 input에 값을 입력할 때마다 실행됨 @input="$event.target.value" //e.target.value랑 같은거임 2. input에 입력한 값을 데이터에 저장하기 데이터에 등록 data(){ return{ month : 1, } }, 저장하기 사용하기 - {{ }}안에 있으므로 중복해서 {} 안써줘도 됨 {{원룸들[clicked].price * month }} 3. 축약버전 유저가 입력한 값이 month로 저장됨 , 등등에도 적용 가능 4. input값을 숫자로 저장하기 ❗ input에 입력한 값은 전부 문자자료형으로 저장된다 ❗ {{원룸들[clicked].price month }} 여기서 대신 +로 쓰면 input은 문자형으로 저장되기 때..