2.0 Vue 3.0

v-model ( 2-way binding )

데이터 값을 ref을 이용하여 value 값 변화시 , 화면에 출력을 동시에 할 수 있다.
하지만,
input (화면) 상에서 value 변경시,데이터 값도 자동적으로 바뀌게 하려면 onInput 을 이용하여, value 값의 변동이 있을때마다 함수를 실행시키고, 함수내에 변수를 업데이트 하는 방식을 사용했어야한다
단방향 바인딩 에서;

• v-model 을 이용하면, 화면상에서 데이터변화를 함수 작동을 하지 않아도, 알아서 값이 변동한다 ( 양 방향 바인딩 )

 <input
      v-model="name" // 바인딩 할 변수 선택
      type="text"

   setup () {
    const name = ref('smurf');
    }

• 끝 ( input 에서 name 변경 가능 / 데이터에서도 name 변경 가능(name.value 잊지말것)

v-for

• v-for 를 이용해서, 객체나 배열에 담긴 값을 화면에 출력할 수있다
  (리액트의 map보다 덜번거로움 )

   <div
          v-for="element in arrays"
          :key="element.id"

            const array = [
              { id :Date.now(),two:2,three:3...},
              { id :Date.now(),two:2,three:3...},
              { id :Date.now(),two:2,three:3...},
              { id :Date.now(),two:2,three:3...},
              ...,
              ]          
// element 개수만큼 div 개수 생성

v-show, v-if

true/false 따라서 태그를 보여주고 싶을 때 사용한다.

• v-show :
  <div v-show="toggle">
<div v-show="!toggle">
• v-for :
  <div v-if="toggle">
<div v-else>

• 차이점 :v-show는 div 렌더링을 둘 다 한뒤, 겹친후에 toggle에 따라서 display:none으로 가려준다. v-if는 값에따라 div 한개만 렌더링 한다

• v-if는 런타임중 조건이 거의 변하지 않을 때 사용하기 좋고
• v-show는 토글이 자주바뀌는 값일 때 사용하기 좋다.

v-model 2

• v-model은 input의 type에 따라 다루는게 다르다.
  checkbox type 인 경우, v-model="true/false"값에 따라 checked에 상태를 바꿀 수 있다.
  gpt쌤의 설명;

다음은 v-model이 각 입력 요소에서 어떤 속성을 관리하는지에 대한 간단한 요약입니다.

// text, textarea, password 등의 입력 요소: value 속성을 관리합니다.
// checkbox와 radio: checked 속성을 관리합니다.
// select 요소: 선택된 option의 value 속성을 관리합니다.
// 파일 입력 요소: 선택된 파일의 FileList 객체를 관리합니다.
<!-- text input -->
<input type="text" v-model="textValue">
<!-- checkbox input -->
<input type="checkbox" v-model="isChecked">
<!-- radio input -->
<input type="radio" value="A" v-model="selectedOption">
<input type="radio" value="B" v-model="selectedOption">
<!-- select input -->
<select v-model="selectedOption">
  <option value="A">Option A</option>
  <option value="B">Option B</option>
</select>
<!-- file input -->
<input type="file" v-model="selectedFile">

Date.now 는 key값으로 아주 유용하다( 유니크함 )