입력폼 데이터 바인딩 - 1(input text, number, textarea)

1. 개인 공부 목적으로 작성한 글입니다.
2. 아래 출처를 참고하여 작성하였습니다.

---

1. input type v-model 속성

1. inputType Text, inputType Number, textarea 등은 value라는 속성을 쓸 수가 있는데, value라는 속성을 쓸 수 있는 객체에 대해서는 v-model이라는 걸 쓸 수 있습니다.
2. 위 객체들에 script 태그 내 data에 있는 key값을 연결해주면 key값이 실제 객체의 value값에 매핑이 됩니다.
3. 즉, input text, number, textarea는 v-model 속성을 이용해서 value에 데이터를 바인딩할 수 있습니다.
   • 단, v-model 속성으로 들어오는 값은 text로 인식을 합니다.
   • 그러므로 v-model 속성으로 들어오는 값을 숫자로 인식하려면 v-model.number을 써야합니다.

---

2. Sample Code

<template>
<div>
    <input type="text" v-model="valueModel" />
    <input type="number" v-model.number="valueModel2" />
    <textarea v-model="valueModel3">안녕하세요.</textarea>
</div>
</template>
<script>
export default {
    name: '',
    comments: {},
    data() {
        return {
            valueModel: 'South Korea',
            valueModel2: 12,
            valueModel3: '안녕하세요.'
        };
    },
    setup() {},
    created() {},   
    mounted() {
        console.log(this.valueModel2);
    },   
    unmounted() {}, 
    methods: {}
}
</script>

---

출처

1. Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)