ref 데이터의 연동 1

 

ref 데이터의 연동

 

• v-model : <input> 필드와 JavaScript 변수 msg를 양방향 데이터 바인딩한다. 이렇게 하면 msg의 값이 입력 필드에 표시되고 입력 필드의 내용이 변경되면 msg의 값도 업데이트된다.
• :placeholder 속성을 사용하여 이 두 입력 필드의 플레이스홀더(placeholder) 값을 msg의 현재 값으로 설정한다. 플레이스홀더는 입력 필드에 사용자에게 어떤 정보를 입력해야 하는지 알려주는 텍스트이다. msg의 값은 여기에서는 읽기 전용으로 표시되며, 실제 입력되는 값에 영향을 주지 않는다.

• import { ref } from 'vue' : Vue 3의 ref 함수를 가져와서 사용한다. ref 함수를 사용하면 반응성 있는 데이터를 생성할 수 있다.
• const msg = ref('Hello World!') : msg 변수를 정의하고 ref 함수를 사용하여 반응성 있는 데이터를 생성한다. 초기값으로 'Hello World!' 문자열을 설정한다.

// HTML
<template>
	
  <div>
    <input type="text" v-model="msg" />
  </div>
  <div>
    <input type="text" :placeholder="msg" />
    <input type="text" :placeholder="msg" />
  </div>

</template>

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

  const msg = ref('Hello World!');
</script>

---