본문 바로가기
반응형

Vue.js/실습11

[vuejs] 부트스트랩 설치방법(2가지) 방법1. CDN ../public/index.html 에 붙여넣기 1) index.html 방법2. 터미널 npm 설치 : npm install bootstrap@5.3.0-alpha1 main.js 에 import : import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 1) npm 설치 화면 2) main.js 내용 import { createApp } from 'vue' import App from './App.vue' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' createApp(App).mount('#app') 부트스트랩 홈페이지 https://getbootstr.. 2023. 1. 22.
[vuejs] mounted (feat. lifecycle hook) 1. 아직 이해는 못했지만 나중에 하나씩 해보기(html파일의 인생인가 보다) 2. mouted는 html 창이 보이면 시작하는 듯하다. 3. App.vue / Discount.vue 가격높은순 가격낮은순 되돌리기 지금 결제하면 {{ 할인률 }}% 할인 4. mouted 부분 mounted(){ let saletimer = setInterval(()=>{ this.할인률 = this.할인률 - 10; if (this.할인률 == 0){ clearInterval(saletimer); setTimeout(()=>{ this.할인창사라졋 = false; }, 1000) } else { return } }, 1000) }, 5. 출력창 2023. 1. 18.
[vuejs] 게시물 or 데이터 정렬버튼 만들기 1. 가지고 오는 데이터의 형태 확인 export default [{ id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000, fakeReport: 0 }, { id : 1, title: "Changdong Aurora Bedroom(Queen-size)", image: "https://codingapple1.github.io/vue/room1.jpg", content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능", price: 450000, fakeReport: .. 2023. 1. 13.
[vuejs] 애니메이션(animate) transition ※ 모달창에 애니메이션을 추가 ※ vue에서 제공하는 transition으로 구현 1. App.vue 2. 출력화면 2023. 1. 7.
[vuejs] v-model, input, select, watch 1. v-model은 데이터의 양방향 바인딩을 지원한다고 한다. 2. 한글, 일본어, 중국어는 한 글자를 완전히 타이핑해야 인식을 한다. 3. 한글을 지원하는 v-model을 사용하고 싶으면 v-on과 v-bind을 조합한 컴포넌트를 사용하는 것이 대안이 될 수 있다. 4. input v-model 예시 5. watch로 인풋값을 제어한다. 6. select v-model 예시 1. v-model은 데이터의 양방향 바인딩을 지원한다고 한다. 2. 한글, 일본어, 중국어는 한 글자를 완전히 타이핑해야 인식을 한다. 3. 한글을 지원하는 v-model을 사용하고 싶으면 v-on과 v-bind을 조합한 컴포넌트를 사용하는 것이 대안이 될 수 있다. 4. input v-model 예시 5. watch로 인풋값을.. 2022. 12. 26.
[vuejs] 컴포넌트(component), Props, Custom Event 1. 데이터를 가져와서 출력하는 법 2. 이미지와 일치하는 모달창(modal screen)을 띄우기 3. 모달창 컴포넌트 사용 4. 상품 복록 반복문과 컴포넌트 사용 5. app.vue의 템플릿이 매우 짧아짐 6. 반복되어 사용되는 부분을 컴포넌트로 사용하면 좋다고 한다. import 해오면 내가 원하는 장소 아무 데나 사용가능. 1. 데이터를 가져와서 출력하는 법 2. 이미지와 일치하는 모달창(modal screen)을 띄우기 3. 모달창 컴포넌트 사용 데이터를 받는 자식 쪽에서는 데이터를 바꿀 수 없습니다. $emit('메시지')를 통해서 부모에게 요청을 하면 부모는 @메시지="함수 or 이벤트"를 통해서 데이터를 변환시키고 :변수="데이터" , props를 통해서 다시 데이터를 전달합니다. 닫기 버.. 2022. 12. 24.
반응형

티스토리툴바