beecomci / vuedongsan Goto Github PK

1. 개발 환경 세팅

• npm install -g @vue/cli : vue 프로젝트를 빠르게 생성할 수 있도록 도와주는 cli
• vue create 프로젝트명 으로 작업폴더 생성
  • vue3로 생성
• 프로젝트명 저장소로 새로 에디터 오픈
• app.vue(메인 파일) 에서 작업 , npm run serve로 실행
  • 브라우저는 vue를 해석할 수 없음. app.vue를 html로 컴파일해서 main.js가 html로 보여주고 있기 때문에 브라우저에서 확인 가능
  • public : html 파일, 기타 파일 보관

2. 데이터 바인딩

• 데이터 바인딩 이유
  1. html에 데이터를 하드코딩 해두면 변경 어려움
  2. vue의 실시간 자동 렌더링을 사용하기 위해
  • vue는 데이터를 변경하면 data와 관련된 html 자동 렌더링 -> 부드러운 웹앱 개발 가능, 자주 변하는 데이터들은 아래 데이터 보관함에 저장
  • 자주 변경하지 않는 데이터는 데이터 보관함에 넣지 X 넣으면 자동 렌더링이 계속
  • html 속성도 데이터 바인딩 가능 (style, class 등) -> 사용시 왼쪽에 ':' 붙이기
  • html 속성 데이터 바인딩은 : 붙이기, 나머지는 {{ }}

3. 반복문

• v-for: "작명 in 몇회" :key="작명"
• key 필수 : 반복문 돌린 요소를 컴터가 구분하기 위해 사용
• 배열, object 넣기 가능, 데이터 갯수만큼 반복해줌
• 그럼 작명한 변수는 데이터의 자료가 됨
• 변수 작명 2개까지 가능 : 첫번째는 자료, 두번째는 index

4. 이벤트 핸들러

• v-on:click="" or @click=""
• 바닐라 : 버튼 누르면 숫자 찾아서 +1, +1된걸 html에 반영
• vue : 버튼 누르면 관련된 데이터만 +1, 관련된 html은 알아서 재렌더링됨
• 함수 생성 : methods: { 함수(){} )
• 함수 사용시 @click="함수명", js처럼 함수명()으로 호출 아님
• 함수 안에서 데이터 사용시에는 this.데이터명 // this : 내 object, 큰 object

5. 모달

• 동적인 UI 만드는 법
  • UI의 현재 상태를 데이터로 저장해줌
  • 데이터에 따라 UI가 어떻게 보일지 작성
• 조건식 : v-if="" -> 조건식이 참일때만 보여줌

6. 데이터 import, export

• HTML 태그 안의 속성에 데이터바인딩은 :xx
• HTML 태그 안의 내용에 데이터바인딩은 {{ xx }}