[Vue] Vue 사용법

Vue.js 사용 이유 : Web-app 만들 때 쓴다.

1. 쉬워서 쓴다. ㅋㅋㅋㅋ
   React Angular <-> 문법만 다름
2. 개발할 때 방법이 정해져있다.
   v-for, v-if v-else
   특히 초보일수록 좋다
   Vue 문법 몇 개 외워주면 초보도 output 쉽게 냄
3. HTML 렌더링 빠름
4. 업데이트 잘됨. Vue 3버전 쓸 거다.

---

Setting

1. Nodejs 다운로드
2. VScode 에디터 설치
   터미널 : npa install -g @vue/cli (vue 개발환경)
3. 에디터 부가기능 설치 (Vetur, HTML CSS support, Vue3 Snippets)
4. yam 1.xx 설치

---

기초

• App.vue : 메인 페이지
• template = html, script=javaScript, style=css
• npm run serve : 코드 미리보기
• node_modules : 프로젝트에 쓰는 라이브러리들
• src : 소스코드 다 담는 곳
• public : html파일, 기타파일 보관
• package.json : 라이브러리 버젼, 프로젝트 설정 기록

---

실습하기

• script 안에 data 저장소 만들기 data() { return { price1 : 60,} }
• {{데이터 바인딩}} 하는 이유
  1. HTML에 하드코딩 해놓으면 나중에 변경 어려움
  2. Vue의 실시간 자동 렌더링 쓰려면 하셈
• HTML 속성 데이터바인딩 -> :속성="데이터이름"
• Array 자료형 = products : ['A', 'B', 'C']
  = {{products[0]}}
  
• 반복문
  1. <태그 v-for="작명 in 3" :key="작명">
  2. 자료형 집어넣기 가능
  <태그 v-for="a in products" :key="a">{{a}}</태그>
  <태그 v-for="(a,i) in products" :key="i">{{a}}</태그>
• 이벤트 핸들러 (HTML 클릭시 코드실행하는 법)
  1.
  v-on 의 약자 = @ -> @click
  2. 함수 만들기
  - data(){} 밑에 methods : { 함수(){} } 안에 만드삼
  - 함수안에서 데이터 쓸 땐 this.데이터명
  3. 이미지
  
  .room-img {
  width: 100%;
  margin-top: 40px;
  }
• Vue에서 모달창 만들기
• 동적인 UI 만드는 법 :
  0. HTML, CSS로 디자인해두셈(기본)
  1. UI의 현재 상태를 데이터로 저장해둠
  v-if="조건식" = 조건식이 참일 때만 HTML 보여줌

  		<div class="black" v-if="모달창열렸니 == true">
  2. 데이터에 따라 UI가 어떻게 보일지 작성

• 실제 상품데이터를 서버에서 가져와서 HTML에 꽂아보기
  - import, export
  1. export default 변수명
  export {변수1, 변수2}
  export default [{},{},{}]
  2. import 변수명 from './경로';
  data() { return { 원룸들 : 변수명} }
  {{원룸들[0].데이터이름}}
  3. HTML 태그안의 속성 데이터바인딩 -> :어쩌구
  

---