🖥 dev-ruby

1. 동적인 UI만드는 법 1-1. HTML, CSS로 디자인 해두기 모달창의 기본구조 상세페이지임 상세페이지 내용임 body{ margin: 0; } div { box-sizing: border-box; } .black-bg{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; padding: 20px; } .white-bg{ width: 100%; background: white; border-radius: 8px; padding: 20px; } 1-2. UI의 현재 상태를 데이터로 저장해두기 모달창열렸니 : false 1-3. 데이터에 따라 UI가 어떻게 보일지 작성 닫기

1. 이벤트 핸들러 1-1. 버튼 click => 축약방식 js함수명 대신 동작 자체를 넣어도됨 -> "신고수 += 1" 1-2. 버튼 mouseover 함수 안에서 데이터쓸 땐 this.데이터명1-3. 이미지 넣기 절대경로 - http:/ 그냥 넣는다 상대경로 - ./assets/room0.jpg 무조건 ./로 시작한다

1. v-for 반복문 모든 HTML태그에 적용가능하다 ex ) :key의 용도 -반복문쓸 때 꼭 써야한다 -반복문 돌린 요소를 구분하기 위해 씀 1-1. v-for를 활용해 템플릿에 변수출력 menus : [' ', ' ', ' '] 1번 {{ menu }} 2번 {{ menus[i] }} 1-2. 2개의 변수 가능 {{ menu }}​ menu는 배열의 데이터가 되고, i는 인덱스가 된다 -> 2개쓰려면 뒤에 꺼를 key에 넣어줘야함 예제 {{ product }} {{ price1 }}만원 허위매물신고 신고 수 : {{신고수}} {{ products[i] }} {{ price1 }}만원 허위매물신고 신고 수 : {{신고수}} 허위매물신고 신고 수 : {{신고수}}

1. vue 프로젝트 생성 명령 vue create 프로젝트명 App.vue가 메인페이지다. 2. 웹 브라우저로 실행하는 명령 npm run serve 3. 데이터 바인딩 - 자바스크립트 데이터를 HTML에 꽂아넣는 문법 vue의 데이터 보관하는 곳 export default{ name: 'App', data(){ return{ /* [여기에 데이터 보관] */ } }, methods : { 함수명(){ }, }, component: { } } 데이터는 object자료로 저장한다. ==> { 자료이름: 자료내용 } 4. 템플릿에 데이터 넣는법 {{ 데이터이름 }} -> {{ }} 자동 렌더링을 가능하게 해준다. 5. HTML속성도 데이터 바인딩이 가능하다. 1. 데이터 보관 styleColor: 'col..