오늘, 처음으로 Vue를 배웠다. 다함께 부숴보자! (with 코딩애플)
귀찮으면 굵은 글씨만 읽자

1. Vue를 사용하는 이유

• web-app(페이지가 새로고침되지 않고 부드럽게 전환되는 사이트)를 만들기 위해서
• 쉽다! React, Vue, Angular 중에서 제일 쉽다.
• 같은 기능을 구현할 때, 훨씬 깔끔하다고 한다.
• Right-way가 있다. 초보가 배우기 쉽고, 협업할 때에도 불필요한 소통비용을 줄일 수 있다.

2. Vue 설치 방법

• Node.js 최신버전과 VS code가 필요하다
• 작업할 폴더 열고, 터미널에서 "npm install -g @vue/cli" 입력 (create 용이)
• "vue create 프로젝트명" 입력 후, 해당 폴더로 다시 열기
• Vue 미리보기는, 터미널에 "npm run serve" 입력
• VS code 에디터 부가기능 : Vetur, Vue 3 snippets, HTML CSS Support 설치 권장

3. 데이터 바인딩

HTML에 바로 변수를 꽂아버릴 수 있다. {{}}을 통한 데이터 바인딩으로.

그에 앞서, 변수들을 아래와 같이 object 형식으로 한 곳(state)에 모아둔다.

<script>
export default {
  name : 'App',
  data(){
    return {
      name : "홍길동",
      age : 22,
      mt-4 : "margin-top:4px"
    }
  }
}
</script>

그리고 HTML 중간에 가져다 쓸 때는,

<h4> 이름은 {{name}}이며 나이는 {{age}}이다 </h4>

이렇게 쓰면된다. 호오오오...너무 편하다!

장점

1. 늘 말하는 변수의 장점. 수정이 편리하다!
2. Vue의 장점인 실시간 렌더링(업데이트) 기능을 사용하기 위해

또한, HTML 속성에도 (태그에도) 데이터 바인딩이 가능하다.
class나 style과 같은 속성 앞에 : 을 붙이자.

<h4 :style="mt-4"> 안녕하세요? </h4>

4. v-for

태그를 반복하고 싶다? v-for을 쓴다. 다음과 같이 쓰면된다.

<a v-for="(반복내용물, 인덱스) in 반복대상" :key="인덱스"> {{반복내용물}}</a>

• 반복내용물이나 인덱스는 해당 태그 내에서 변수로 사용하면된다.

• 지나치게 많이 반복되는 경우에 사용하거나,
  변동적인 수만큼 반복되는 경우 사용하자.

5. @click="", 함수사용법

<button @click="클릭한횟수++"> 버튼을 누르세요! </button>
<p> 클릭한 횟수 : {클릭한횟수} </p>

• 대충 보면 알거다!
• @mouseover, @input, @change 등등 다양하니, 검색해서 써먹자!

함수 사용의 경우 아까 변수처럼 같이 뭉탱이(유리게슝)로 선언해두면 된다. 아래처럼 함수 선언을 하면, 위 코드의 "클릭한횟수++"를 "increase"로 바꾸면 될거라고 짐작할 수 있다.

<script>
export default {
  name : 'App',
  data(){
    return {
      클릭한횟수 : 0,
    },
    methods : {
      increase(){
        this.클릭한횟수 += 1
      }
    }
}
</script>

6. 슬슬귀찮다. 한꺼번에 목록으로 작성하겠다.

1. 동적인 UI 만들기 : 상태를 변수로 저장하고, 상태에 따라 모습을 변경한다

2. export default / import

• 변수나 자료를 불러올 수 있다.
• export 할 것이 많은 경우, {}를 사용하고, import할때도 마찬가지입니다.

3. v-if, v-else, v-else-if

4. 컴포넌트

• .vue 파일로 따로 빼놓고, 불러와서 코드를 간결하게.
• 과정 : import > components에 등록 > 사용
• <template> 안에서 태그처럼 사용
• HTML 재사용 및 라우터로 페이지 구분을 위해서.

5. props

• 하위컴포넌트로 변수 전송
• 과정 : 상위컴포넌트에서 데이터바인딩 문법으로 전송 > 하위컴포넌트에서 props 등록 > 사용
• 변수는 사용하는 최상위 컴포넌트에 만들도록

6. custom event

• 하위는 상위컴포넌트의 데이터(변수)를 못바꾼다. 대신 "응애, 저거 해줘" 를 한다.
• 자식 : $emit(이름, 자료) / 부모 : @이름='데이터변경코드'

7. v-model

<input v-model.number="변수"> 

• input, textarea, select 등등 전부 가능. 정말 많이 사용하게될 문법.

8. watcher

  data(){
    return {
      month : 1
    }
  },
  watch : {
    변수(){
      alert('변수가 이상하면 대충 뜨는 알림')
    }
  }

9. 애니메이션 - CSS / transition

• CSS :

<div :class="{ 클래스명 : 조건 }"> </div>

• transition :

<transition name="작명"></transition>

.작명-enter-from { 애니메이션 동작 전 상태 }
.작명-enter-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-enter-to { 애니메이션 동작 후 상태 }

.작명-end-from { 애니메이션 동작 전 상태 }
.작명-end-active { 애니메이션 동작 중 상태, 대부분 transition 이런거 }
.작명-end-to { 애니메이션 동작 후 상태 }

10. 정렬

• sort, filter, map 등을 사용
• 원본을 반드시 보존. [...원본]

11. 라이프사이클훅
    beforeCreate()
    created()
    beforeMount()
    mounted()
    beforeUpdate()
    updated()
    beforeUnmount()
    unmounted()