(✿^‿^)━☆ Vue 3 공부하기 (개발환경 셋팅 ~ 뷰 기초)

 

뷰 공부해야해서 코딩 애플 공부하면서 정리한거

 

먼저 개발환경을 셋팅해주자

 

Node.js랑 VSCode 설치 후 에디터(VSCode) 터미널에서

npm install -g @vue/cli

 

yarn은

yarn global add @vue/cli

 

• Nodejs : npm(웹 개발 라이브러리(ex. vue 프로젝트 생성 도와주는 @vue/cli) 설치 도구) 사용 위해

 

Extensions는

vetur

 

html css support

 

vue 3 snippets

 

---

 

작업 폴더 만들고 에디터에서 오픈

프로젝트 생성하려면

vue create 프로젝트명

(선택하는거에서 Vue 3 선택)

 

프로젝트 에디터로 열기

 

App.vue(메인 페이지)에서 코드 짜기

• <template> : HTML
• <script> : JS
• <style> : CSS

=> App.vue 코드가 HTML로 바뀌어 index.html 페이지에 가는(main.js가 해줌) 원리

 

미리보기 띄우려면,

npm run serve

 

 

 

---

 

{{데이터 바인딩}}

자바스크립트(JS)에서 생성하거나 처리한 데이터를 HTML 문서에 통합하고 동적으로 표시하는 과정

 

data() 함수는 컴포넌트의 '데이터 저장소(상태 저장소 State Store)'

데이터는 object 자료로 저장

 

데이터 상태 변경 -> Vue가 감지 -> 데이터 사용하는 HTML 요소 실시간 업데이트

=> 웹앱

 

HTML 속성도 바인딩 가능

v-bind:href="url" 을 :href="url" 로 축약 가능

 

 

---

 

HTML 반복문은

<태그 v-for="item in items"> 형태임

item은 반복되는 각 요소를 나타내는 것(작명)

items는 반복할 대상(array, object) or 반복할 횟수

 

반복문 사용 시 :key 안쓰면 에러남

각 반복되는 요소 고유하게 식별하고 이들의 순서 변경, 상태 업데이트 효율적으로 처리 가능하게 함

주로 배열 내 객체의 고유 식별자 or 반복되는 요소의 인덱스 사용 

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

 

v-for 최대 두 개 변수 사용 가능

(item, index) in items

이렇게 하면 item은 배열의 현재 요소, index는 현재 요소의 인덱스를 각각 참조

 

 

---

 

이벤트 핸들러

<button v-on:click="handleClick">Click me</button>

v-on: 대신 @ 써도 됨

@click="신고수++"

이런 식으로

 

함수는

methods: {} 안에 만들면 된다

함수 안에서 데이터 쓸 땐 this.데이터명

 

이미지를 넣고자 하였는데

웹팩 기반인 경우 require 함수를 사용해야한다고 챗GPT가 그래서

 

위와 같이 하였다

 

모달창 UI는 미리 만들어두고 숨겼다가 보여주는 동적 UI

1. 디자인

2. UI 현재 상태를 데이터(state)로 저장

3. 데이터에 따라 UI 어떻게 보일지 작성 (v-if 이용)

위처럼 디자인 만들고,

 

데이터

 

v-if 로 UI 보이는 조건

 

그리고 click하면 모달창 열리게 하기 위해

 

닫기 위해

 

---

 

내보낼 땐

export default 변수명

or

export {변수1, 변수2 ..}

 

가져올 땐

import 변수명 from 경로

or

import {변수1} from 경로

 

 

 

 

모달창에 클릭한거 나오게 하기 위해

 

---

 

위와 같은걸

이렇게 깔끔하게 만들려면 (Component)

Component name should always be multi-word 라는 에러가 떠서

Discount -> DisCount 로 진행했다

 

vue 파일 만들고

HTML 넣는다

 

그 후,

vue 파일 import 한다

 

그리고 components 안에 등록한다

 

template 안에 쓴다

 

 

모달창같은 경우에는 컴포넌트화할 때

모달 안에 {{데이터바인딩}} 해놨으므로

props (부모 컴포넌트 -> 자식 컴포넌트)

 

먼저,

데이터 전송

<자식 :작명="데이터" />

 

여기서 : 는 v-bind: 의 축약형이다

작명="문자자료"

:작명="숫자자료"

:작명="Array나 Object"

이런 식으로 가능하다

위에 v-bind="오브젝트" 와 :이름="오브젝트.name" :나이="오브젝트.age" 는 같다

 

 

자식 컴포넌트는 props로 받은거 등록

props: {데이터이름: 자료형이름대문자로}

 

 

=> 데이터는 사용하는 곳들 중 최상위 컴포넌트에 만드는 것이 좋다

 

 

다른 것도 마찬가지로,

 

근데 위와 같이 하면

props(read-only)를 바꾸려해서 에러남

 

---

 

이렇게 쓴 것을 v-for 문법으로 바꾸면,

 

---

 

자식 컴포넌트가 부모 컴포넌트 데이터 바꾸기 위해서는

custom event 사용

이렇게 하면 '이벤트 버블링' 으로 카드 클릭 시 모달창 열리긴 하는데,

만약 카드 컴포넌트 안의 제목 클릭 시 모달창 열리게 하려면?

 

$달러 표시는 Vue만의 특별한 변수다

부모에게 메시지 보낼 때 $emit('작명', 데이터)

 

부모가 수신할 땐,

@작명=""

 

자식 컴포넌트(모달)에서 데이터로 원룸.id 보내준다

 

자식이 보낸 데이터는 $event 변수에 담겨있으므로

부모에서는

코드 상에서는 $event 말고 index 해도 됨

 

 

$emit()을 함수 안에서 하려면,

methods 안에 써주고

props, data, $변수 밑에서 사용 시 this 붙이기 (함수명 영어)

이렇게 사용하면 됨

 

마찬가지로,

모달창 닫기 버튼의 경우에도

모달 컴포넌트에서

그리고 부모에서는

---

 

사용자의 input 받으려면?

 

입력할 때마다 무언갈 실행하려면

@input=""

사용자가 입력한 값

 

<input>에 입력한 값 데이터로

 

그래서 사용자가 입력한 값을 month에 넣기 위해

 

∴

 

 

그리고

위 코드 축약 버전은

v-model &larr; 입력 요소들에서 쓰임

 

 

사용자가 <input>에 입력한 것은 모두 문자 자료형으로 저장됨

.number 써주면 숫자됨

 

---

 

input에 문자 입력 시 경고문 띄우기

→ watcher (data 감시 함수)

감시할 데이터 이름의 함수

 

month(변경될 값, 변경전 값)

month 데이터 변할 때마다 watcher 실행됨

 

아이디, 비번 등은 Vue 전용 form validation 라이브러리 사용 추천

---

 

애니메이션 주려면?

시작 전, 애니메이션 끝난 후 class 만들기

원할 때만(ex. 모달창 열릴 때) 애니메이션 끝난 후 class명 주기

 

HTML 속성에 데이터 바인딩하려면

:속성="데이터이름"

 

class명 조건부로 넣으려면

{ 클래스명: 조건 }

 

but,

Vue에서는 <transition> 이용해서 애니메이션 쉽게 줄 수 있음

애니메이션 줄 요소를 감싸고 name="작명"

 

그리고 스타일에는

.작명-enter-from

.작명-enter-active

.작명-enter-to

클래스 3개를 만든다

 

퇴장 애니메이션은

.작명-leave-from

.작명-leave-active

.작명-leave-to

클래스 3개를 만든다

 

---

 

상품 정렬 기능 만들기

버튼 누르면 함수 실행되도록

근데 위 sort()는 원본을 변형시킨다

반면 map(), filter() 등은 원본을 보존한다

 

그래서 뒤로가기 버튼 만들기 위해서는,

 

array 와 object는 별개의 사본 만들려면 [...array자료] 이런 식으로 해야 한다

 

그리고 array의 경우,

this.어레이1 = this.어레이2

이런 코드는 왼쪽 오른쪽 값 공유하란 뜻이다

그래서 어레이2를 어레이1에 넣으려면 개별 복사본 만들어서 해야한다

---

 

뷰 라이프사이클은 컴포넌트가 웹 페이지에 표시되기까지의 단계인데,

 

1. Create: 데이터만 존재하는 단계

2. Mount: template을 HTML로 바꿔서 index.html에 장착하는 단계

3. 컴포넌트 생성

4. Update: 데이터가 변하면 컴포넌트 리렌더링

5. Unmount: 컴포넌트가 삭제될 때

 

배우는 이유는 특정 단계에서 Lifecycle Hook을 사용하여 실행할 작업을 설정하기 위해서다

(ex. 컴포넌트 마운트 전에 ~~ 실행해라)

 

Lifecycle Hook은

1. Creation (생성)
   • beforeCreate()
   • created()
2. Mounting (마운팅)
   • beforeMount()
   • mounted()
3. Updating (갱신)
   • beforeUpdate()
   • updated()
4. Destroying (소멸)
   • beforeDestroy()
   • destroyed()

 

UI 2초 후 사라지게 하려면,

UI 현재 상태 데이터

true 일 때만 보이게

this 쓸 땐 arrow function 사용

 

 

1초마다 할인율 낮추기는

 

 

input에 2 기입 시 알람 띄우고 강제로 4로 바꾸기는