VUE 학습하기

npm install vue 로 vue 를 설치하고 있고,
npm create vue@latest 를 통해 vue 를 설치할 수 있습니다.

2.0 에서는 Options API를 3.0 부터는 Composition API를 기본으로 구성 합니다. 그렇다고 해서 꼭 그 버전에 기본으로 구성할 수 있는 것이 아닌 원하는 API를 import 해서 사용할 수 있습니다.
여기에서는 3.0 위주로 내용을 다루어보도록 하겠습니다. 기본적인 데이터 Biding 방법은 아래와 같습니다.

<script>
import {ref} from "vue";

setup(){
  const world = ref("Hello World");
} 
</script>

<template>
  <div>
    {{ world }}
  </div>
</template>

아래와 같은 방법으로 속성을 바인딩 할 수 있습니다.
dynamicId가 갖고 있는 속성을 바인딩 합니다.

<script>
  const dynamicId = ref("");
</script>
<template>
  <div v-bind:id="dynamicId"></div>
</template>

:(세미콜론)을 통해 합축 시켜 바인딩 할 수 있습니다.

<template>
  <div :id="dynamicId"></div>
</template>

불일치 조건문으로도 구현할 수 있습니다.

<button :disabled="isButtonDisabled">Button</button>

여러 속성또한 바인딩 할 수 있습니다.

:disabled

<script>
const objectOfAttrs = {
  id: "container",
  class: "wrapper"
}

</script>
<button
  :disabled="isButtonDisabled"
  >
  Button
  </button>

script setup example

<script setup> 
const number = ref(10);
</script>
<template>
  <div>
    {{ number + 1 }} 
    {{ ok ? "YES" : "NO" }} 
    {{ message.split("").reverse().join("") }}
    
<div :id="`list-${id}`"></div> 
  </div> 
</template>

데이터의 표현은 항상 가능하지만, 추후에 return 값으로 넣을 수도 있습니다.

{{ var a = 1 }} 

{{ if (true) {rreturn message} }}

함수를 호출 할 수도 있습니다.
time component 안에 있는 title 이란 데이터에 toTitleDate 라는 함수를 호출하며 date 를 인자로 받습니다.

<time :title="toTitleData(date)" :datatime="date">
  {{ formattDate(date) }}
</time>

추가적으로 VUE 에서 제공하는 Global Property 들 또한 존재합니다.

https://github.com/vuejs/core/blob/main/packages/shared/src/globalsAllowList.ts#L3

vue 에서 제공하는 문법을 이용하여 데이터를 실시간으로 감지하며 사용자가 보여지는 화면 또한 변경할 수 있습니다. 아래에는 일치 값을 부여함으로서 데이터가 보여지는 v-if 문법을 표현 했습니다. 아래와 같은 문법은 조건이 불일치 할 경우 p 태그 자체가 존재하지 않게 화면에 보여집니다.

<p v-if="work"> Now You see mee

@click

vue 에서 제공하는 클릭 이벤트 또한 존재합니다. 이러한 이벤트는 DOM을 접근하여 DOM 이벤트를 동작 시킵니다.
하단의 예제 중 @click 은 v-on:click 이벤트의 압축법입니다.

<a v-on:click="doSomething"> ... </a>
<a @click-="doSomething">...</a>

Javscript 문법을 이용하여 직접적으로 속성에 접근할 수 도 있습니다.

attribueName의 결괏값은 url의 경로가 됩니다.

<a v-bind:[attributeName]="url">... </a> 

<a :[attributeName]="url"> ... </a>

이벤트를 포커싱 하는 방법도 존재합니다.
v-on 문법은 @click 이벤트 때와 마찬가지로 @로 대체 할 수 있습니다.

<a v-on:[eventName]="doSomething"> ...</a>

<a @[eventName]="doSomething">

속성 값에 직접적으로 제약조건을 걸 수 있습니다.

<a :["Foo" + bar]="value"> ...</a>

• 여기에서 더 나은 방법으로 computed property 를 사용할 수 있습니다.
  computed 는 계산된 속성을 값을 표현하는 vue의 방법 중 하나 입니다.

브라우저는 네이밍 키 값을 강제적으로 소문자에서 대문자로 변환합니다.

<a :[someAttr]="value"> ...</a>

VUE 에서는 form 이벤트를 아래와 같이 줄여서 사용할 수 있습니다.

<h3>Modifiers</h3> 
```vue 
<form @submit.prevent="onSubmit"></form> 

굳이 설명하자면 v-on 은 vue 이벤트가 시작하는 시작 단계를 의미하며, submit 은 속성값, 심볼 값을 혹은 그 내에 있는 특정한 값을 가져옵니다. prevent는 Modifiers 수정값을 의미하는데, prevent 의 경우 이벤트가 발생할 시 새로고침 되지 않게 강제로 고정하는 값을 의미 합니다. onSubmit은 이벤트의 결과값을 의미 합니다.

<script setup>
const onSubmit = (e) => {
	e.target.value;
}
</script>

<template>
<form v-on:submit.prevent="onSbumit">
	<input type="search" @click="search" />
</from>
</template>

vue 에서 이벤트를 동작시키는 방법은 아주 간단한다.

<script setup>
import { ref } from 'vue'


const count = ref(0);
const increment = () => {
	count.value++
}
</script>
<template>
  <button @click="increment"> 추가 </button>
</template>

ref 의 데이터 변이가 되는 순간은 DOM 이 자동으로 업데이트 되던 그 순간으로 볼 수 있습니다. 돔은 동기적으로 업데이트되고 등록되지 않습니다. nextTick 을 사용하여 Component 가 업데이트 됩니다.

import {nextTick} from "vue";

async function increment(){
  count.value++
  await netTick()
}

진입/진출 트랜지션
vue에서는 transition 을 이용하여 애니메이션 기능을 구현할 수 있습니다.

<template>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </TransitionGroup>
<template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

위와 같은 데모 버전은 항목을 삽입하거나 제거할 때 주변 항목이 부드럽게 움지이지 않고 제자리에 즉시 "변경" 된다.
몇 가지 추가 CSS 규칙을 추가하여 이러한 문제를 해결할 수 있다.

.list-move, /* 움직이는 엘리먼트에 트랜지션 적용 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 이동 애니메이션을 올바르게 계산할 수 있도록
   레이아웃 흐름에서 나머지 항목을 꺼내기. */
.list-leave-active {
  position: absolute;
}

사치가 있는 목록 트랜지션
데이터 속성을 통해 Javascript 트랜지션과 통신함으로서 목록에서 트랜지션을 시차가 있게 할 수도 있습니다. 먼저 목록의 인덱스를 DOM 엘리먼트의 data- 속성으로 렌더링 합니다.

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

DOM 업데이트 타이밍
반으 사태를 변경하면 DOM은 자도으로 업데이트
DOM업데이트는 동기적으로 적용되지 않는 다는 점에 유의해야함, VUe는 업뎅트 주기의 다음 틱 까지 버퍼링하여 얼마나 많은 상태 변겨을 수행하든 각 컴포넌트가 한 번만 업데이트 되도록 함

상태 변경 후 DOM 업데이트가 완료될 때까지 기다리려면 nextTick() 전역 API 를 상태를 변경

reactive()
반응 상태를 선언하는 또 다른 방법이다. 내 부 값을 특수 객체로 감싸는 ref 와 달리 reactive 는 객체 자체를 반응형으로 만듬

반응형 재정의 vs 원본
reactive() 는 반환 값을 원본 객체와 같지 않고 원본 객체를 재정의한 프록시 라는 점을 유의하는 것이 중요

const raw = {}
const proxy = reactive(raw)

consle.log(rpoxy === raw) // false 

프록시만 반응형으로 동작하고, 원본 객체를 변경해도 업데이트가 트리거 되지 않음 따라서 객체를 Vue의 반응형 시트템으로 작업할 때 가장 좋은 방법은 상태를 재정의한 프록시만 사용하는 것

프롟에 대한 일관된 접근을 보장하기 위해, 원본 객체를 reactive() 한 프록시와 프록시를 reactive() 한 프록시는 동일한 프록시를 반환 하도록 동작

reative()의 제한 사항

제한된 값유형
개체 유형(객체, 배열 및 컬레션 유형에만 작동(Map,Set), 그러나 string,number 또는 boolean과 같은 기본 유형을 보유할 수 없다.)