본문 바로가기
반응형

vueJS15

[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.
[toy project]업비트 open api 현재가 가져오기 (feat. axios) 1. 받아올 데이터는 현재가입니다. 2. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 탬플릿 캔 들 {{coin.korean_name}} {{coin.market}} {{coin.trade_price}} {{coin.acc_trade_price_24h}} {{coin.signed_change_price}} {{coin.signed_change_rate}} 3. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 4. 출력화면 2023. 1. 15.
[toy project]업비트 open api 데이터 받아오기 (feat. axios) 1. 받아올 데이터는 마켓명과 코인명입니다. 2. axios 설치 ( npm install axios) 3. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 탬플릿 캔 들 {{coin.korean_name}} {{coin.market}} 코인가격 코인거래대금 가격변동 가격변동률 4. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 5. 출력화면 2023. 1. 14.
[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.
[toy project]마켓 게시물 만들기(vuejs component, router-veiw) ※ 마켓과 랭킹은 같은 헤더를 사용한다. ( 나중에 컴포넌트 순서가 바뀔 수 있음) ※ router-view로 보여 줄 화면은 router에서 지정해 둔 /pacct/Rangking과 /pacct(마켓) 화면이다. ※ 마켓은 krw, btc, usdt 3개의 마켓으로 이루어져 있다. 각각 버튼을 만든다. ※ 몇 개의 자료를 받아올지 모르기 때문에 화면을 꽉 채울 정도의 같은 형식의 게시물을 반복문으로 작성 1. 마켓과 랭킹 목록의 헤더는 같기 때문에 전역으로 컴포넌트를 설정한다. (마켓 리스트 버튼도 전역설정) import { createApp } from 'vue' import App from './App.vue' import router from './router.js' import './regist.. 2023. 1. 10.
반응형

티스토리툴바