바바

📌componet1을 자식 컴포넌트로 등록한 App.vue 📌componet1은 componet2를 componet2는 componet3을 자식 컴포넌트로 등록 → 마지막 자식 컴포넌트인 componet3에서 상위 부모컴포넌트인 App.vue의 prop을 받는 방법으로 , App.vue부터componet3.vue 까지 한 단계씩 prop을 전달하는 방법이 있지만, 이 방법은 번거로움으로 provide & inject 을 사용해서 prop을 보낸다. Provide & Inject 를 사용하여 prop 넘겨주기 ✔ provide : 데이터를 넘겨주는 쪽에서 사용(부모컴포넌트) ✔ inject : 데이터를 넘겨 받을 곳에서 사용(자식컴포넌트) 📌 App 컴포넌트에서 provide에 prop으로 보낼 변수명과 ..

📌 DetailView.vue 컴포넌트에 모달창 만들기 📌 App.vue 에 DetailView등록 후 사용하기 → 상세보기 버튼을 클릭했을 때만 모달 창이 보여지게 설정하기 (1) displayDetail : false 로 변수 선언 (2) 등록한 DeatailView 에 v-if를 사용하여 displayDetail 사용 (3) 상세버튼 클릭 시 displayDetail 값이 true로 변경되게 설정 📌 화면 출력 → 닫기 버튼을 클릭했을 때 모달을 닫기 위해서 displayDetail 값을 false로 만들면 될거 같지만, displayDetail 는 부모 컴포넌트에서 받아온 prop이기 때문에 값을 변경하지 못한다. 받아온 prop은 읽기 전용이기 때문에 값을 변경하고자 한다면 부모 컴포넌트에게 메..

배열을 props 로 보낸 후 출력하기 📌 App.vue 에서 product 배열 안에 Object 생성 → 자식 컴포넌트인 ProductList.vue를 components에 등록 해주고 products 배열을 prop으로 보내기 📌 ProductList.vue에서 props로 받아올 product의 type 은 Array로 지정하고, default 값을 반환 할 수 있게 작성 📌 출력 화면 2 . products 아이템들 꺼내서 상품 목록 만들기 📌ProductList.vue에서 ProductItem.vue 등록 → v-for를 사용하여 product를 출력하는 반복문 작성, ProductItem.vue 에 prop 넘기기 📌 ProductList에서 넘어온 props 타입 설정 → 머스타치 문법을 ..

Object type을 prop로 보내기 📌부모 컴포넌트에서 Object 만들기 → 부모 컴포넌트인 App.vue에서 info 라는 Object를 만들어 key : value 작성 📌 자식 컴포넌트에 Object prop 넘겨주기 📌 자식 컴포넌트에서 props 등록 → info 에 타입을 Object로 설정한다. 📌 받아온 데이터를 오브젝트의 프로퍼티에 접근하여 출력한다. 📌화면 출력 Object prop의 기본값 설정 방법 📌 Object가 undefinde 일때 에러 발생하지 않게 defuault 값을 설정해준다. 📌자식 컴포넌트에서 default 를 사용하여 기본값을 지정해준다. → default: 화살표 함수를 사용하여 값을 retrun 해주는 형태로 작성하면 된다. → 화살표 함수가 아닌 메소..

1 . 컴포넌트 만들기 ✔ components 폴더에 .vue 파일 생성 ✔ template, script 작성하기 → 디버깅할 때 name 속성을 통해 확인할 수 있으므로 name을 정해주는 것이 좋다 2 . 컴포넌트 사용하기 ✔ impor → App.vue 에서 만들어 놓은 HelloUser 컴포넌트를 import 해준다. ✔ 컴포넌트 등록 → 컴포넌트를 사용하기 위해서는 컴포넌트 등록이 필요하기 때문에 components 오브젝트 안에 key: value 형태롤 컴포넌트를 등록해 준다. (key와 value 값이 같은 경우 하나로 생략해서 작성하면 된다.(ES6 문법)) ✔ 컴포넌트 사용 → template 태그 안에 사용할 컴포넌트 태그를 작성한다. ✔ 화면 출력 → HelloUser에 작성한 '..

1. Vue 인스턴스 만들기 new Vue 블럭안에 el, data, method 등 옵션을 설정할 수 있다. new Vue({ el: "#app", data: { text: 'hellp world' }, }) 2. new Vue()에 사용가능한 옵션(속성) 옵션 설명 el 인스턴스가 그려지는 화면의 시작점 template 화면에 표시할 요소 data 뷰의 반응성 Reactivity 반영 속성 method 화면의 동작과 이벤트 로직 제어 메소드 watch data에 정의한 속성이 변화했을때 추가동작 수행하게 해주는 속성 computed 데이터의 문자열 순서를 역으로 변화해주는 속성 기타 LifeCycle Hook(created, mounted..) 뷰 라이프 사이클과 관련된 속성 3. 데이터 출력 방법 ..

Vue 라이프 사이클(lifecycle) - 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 - 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 한다. - 크게 생성(create), DOM에 부착(mount), 업데이트(update), 소멸(distory) 4가지 과정을 거친다. beforeCreate Vue 인스턴스가 초기화 된 직후에 발생 컴포넌트가 DOM에 추가되기 전이여서 this.$el 사용할 수 없음 데이터와 이벤트가 설정되기 전이여서 data, methods에 접근할 수 없음 created 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근 불가 data, methods 등이 활성화되어 접근 가능 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅하거나,..

Ajax (Asynchronous JavaScript and XML) 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. 백그라운드 영역에서 서버와 데이터를 교환하여 웹페이지에 표시해 준다. jQuery와 Ajax - 제이쿼리에서는 Ajax 기능을 손쉽게 사용할 수 있도록 여러 메소드를 제공하고 있다. - 이러한 메소드를 사용하면 HTTP 요청(request)을 손쉽게 보낼 수 있고, 데이터의 종류에 따라 그에 알맞는 메소드를 사용하여 서버에 데이터를 요청할 수도 있다. $.ajax()메소드 - 모든 제이쿼리 Ajax 메소드의 핵심 - HTTP 요청을 직관적으로 구성 ▷ 기본 문법 $.ajax(URL주소[,옵션]) => URL : 클라이언트가 HTTP 요청을 보낼 서..

기존 요소를 포함하는 새로운 요소를 추가해주는 메소드 메소드 설명 .wrap() 선택한 요소를 포함하는 새로운 요소를 추가함. .wrapAll() 선택한 모든 요소를 포함하는 새로운 요소를 추가함. .wrapInner() 선택한 요소에 포함되는 새로운 요소를 추가함. 1. .wrap() 메소드 '선택한 요소'를 포함하는 새로운 요소를 추가 .wrap() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! div 요소 추가 ▼result 2. .wrapAll() 메소드 '선택한 모든 요소' 를 포함하는 새로운 요소를 추가 .wrapAll() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! div 요소 추가 ▼result 3. .wraplnner() 메소드 '선택한 요소에 포함되는' 새로운 요소를 추가 .w..

기존 요소의 외부에 새로운 요소나 콘텐츠를 추가해주는 메소드 메소드 설명 .before() 선택한 요소의 바로 앞에 새로운 요소나 콘텐츠를 추가함. .after() 선택한 요소의 바로 뒤에 새로운 요소나 콘텐츠를 추가함. .insertBefore() 선택한 요소를 해당 요소의 앞에 삽입함. .insertAfter() 선택한 요소를 해당 요소의 뒤에 삽입함. 1. .before() 메소드 선택한 요소의 '바로 앞에' 새로운 요소나 콘텐츠를 추가 .before() 메소드 햄버거 피자 김치찌개 아이템 추가 ▼ result 2. after() 메소드 선택한 요소의 '바로 뒤에' 새로운 요소나 콘텐츠를 추가 .after() 메소드 햄버거 피자 김치찌개 아이템 추가 ▼ result 3. insertAfuer() 메..