루로그

모달창 내에 상세페이지 제작하기 내가 클릭한 상품의 데이터를 불러와 상세페이지 모달에 바인딩 클릭한 상품이 몇번째 상품인지 순서를 저장할 data 생성 모달창 노출 이벤트 작동시 순서 data에 현재 상품이 몇번째 상품인지 순서 값 할당 저장된 순서 값 기반으로 모달창에 데이터 바인딩 export default { name: 'App', data(){ return { 누른거 : 0, //여기에 클릭한 상품 순서를 값으를 저장하여 배열 속 정보를 꺼내올 때 사용 원룸들 : data, 모달창상태 : 0, } }, components: { } } {{room.title}} {{room.price}} 원 {{원룸들[누른거].title}} {{원룸들[누른거].price}}원 {{원룸들[누른거].content}} ..

import, export와 데이터바인딩 연습 [export default 변수] 로 데이터 내보내기(변수명 생략 가능) [imfort 변수 from '경로';]로 데이터 받아오기 //새 파일(oneroom.js) 만들어서 데이터 저장 export default [{ //export default로 데이터 내보내기, 내보낸 데이터는 import로 받는다 id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000 }, { id : 1, title: "Changdong Aurora Bed..

v-if로 모달창 제어하기 v-if="조건식" 조건식이 참일 때만 보여줌 data에 모달창 상태를 값으로 저장, 값을 제어하며 v-if로 보일지 말지 결정 //데이터 export default { name: 'App', data(){ return { 모달창상태 : 0, //data에 모달창 상태를 값으로 저장(0/1 또는 false/true) } }, components: { } } 상세페이지 상세페이지 내용 닫기 역삼동원룸 60 만원 허위매물신고 신고수 : 0 /*모달창 스타일*/ body {margin:0} div {box-sizing:border-box} .black-bg {width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;paddi..

Vue 이벤트 핸들러로 click 감지하기 태그에 v-on:click="실행코드" 또는 @click="실행코드"로 이밴트 생성 click 외에 여러가지 동작 감지 가능 실행코드는 태그에 바로 작성 또는 함수로 연결 가능 // 데이터와 함수 export default { name: 'App', data(){ return { price : [60,70,80], fweight : "font-weight:bold", products : ['역삼동원룸', '천호동원룸', '마포구원룸'], 신고수 : [0,0,0], //신고수 버튼이 3개라 각각 수를 저장하기 위해 배열로 구조 } }, methods : { //함수 만드는 공간 countbtn0(){ this.신고수[0] ++ //오브젝트 안의 데이터를 끌어오려면..

v-for를 활용한 반복문 만들기 [ v-for="(변수, 순서) in 반복횟수" :key="변수 또는 순서" ]의 구조 (변수, 순서)부분에 순서 없이 변수만 넣을 수 있음 ex) v-for="변수 in 반복횟수" :key="변수" 변수, 순서는 임의로 설정 가능, key값엔 변수나 순서 값 중 할당, 일반적으로 순서 값 할당 key값 지정은 필수라 안적으면 오류 발생 순서 값은 0으로 시작해서 반복될수록 1씩 오름 (배열 데이터 불러올 때 용이) 반복 횟수에 배열 data를 넣으면 변수에 배열값이 하나씩 할당되며 배열 개수만큼 반복 반복 횟수에 data 말고 숫자로 지정도 가능 🎮 예제 1 //데이터값 export default { name: 'App', data(){ return { 메뉴들 : ['..

Vue.js 데이터바인딩 문법 스크립트 영역 export default에 data() - return에 가변적인 데이터 저장 html 태그 안에 내용은 {{데이터이름}}로 데이터바인딩 태그 속성(src, style, href 등)은 :속성="데이터이름" 으로 데이터바인딩 export default { name: 'App', data(){ return { price1 : 60, price2 : 70, price3 : 80, fweight : "font-weight:bold", products : ['역삼동원룸', '천호동원룸', '마포구원룸'] } }, components: { } } export default 부분에 data 저장 {{products[0]}} {{price1}} 만원 {{products[..

새로운 뷰 프로젝트 생성하기 node.js와 VS code 설치 필요> node.js 설치 → https://nodejs.org/ko/ 새로운 프로젝트를 만들 폴더 생성 후 VS code로 오픈 상단 메뉴에서 터미널 > 새터미널 열기 [ npm install -g @vue/cli ] 입력 (뷰 작업환경 셋팅) 4번 설치가 완료되면 [ vue create 프로젝트명 ] 입력 프로젝트명으로 생성된 폴더를 에디터로 오픈 후 코딩 시작 src 폴더 안의 App.vue 가 메인페이지 작업 화면 미리보기 원하면 터미널에 [ npm run serve ] 입력> http://localhost:8080/ 링크로 접속해도 확인 가능 VSC 뷰 관련 에디터 부가기능 Vetur Vue 3 Snippets 코딩애플 강의로 실습..