v-model 과 v-bind:value (:value) 의 차이 (v-on (@))

v-bind:value (= :value)

input 태그에 v-bind:value 로 바인딩 한 경우 input 에 2222를 입력하면

{{testData}} 는 1111 그대로다

btn을 클릭하면  console.log(this.testData) 값도  1111 그대로다

v-bind:value 는 :value 와 동일하다 v-bind 생략가능

v-model

input 태그에 v-bind:value 를 v-model로 바꾸고 나머지 코드 동일한 경우 input 에 2222를 입력하면

{{testData}} 부분에 2222가 된다.

input 에 값을 입력하면  입력값 변화가 화면의 보인다

btn을 클릭하면 console.log(this.testData) 값이 input 에 입력한 값과 같다.

v-bind:value (= :value)  + @input="event => testData = event.target.value"

=> v-model

input 태그에 v-bind:value 로 바인딩 ( :value 동일) 하고

동일한 태그에 v-on:input ( @input 동일) 이벤트 리스너를 등록하면 v-model과 같은 동작을 한다.

https://vuejs.org/api/built-in-directives.html#v-on

Built-in Directives | Vue.js

v-on 의 Shorthand 는 @ 이다

https://vuejs.org/guide/essentials/forms.html

Form Input Bindings | Vue.js

v-on  Attach an event listener to the element.

v-model과 동일한 동작을 하는 것을 볼 수 있다

 

 

 

<div id="app">
  <!-- 코드가 동작하는지 확인가능한 부분 (없어도됨)start-->
    {{ message }}<br> 
  <!-- 코드가 동작하는지 확인가능한 부분 (없어도됨) end-->
  <!--input 태그 동작을 어떻게 구혔했는지 화면에 보여주는 부분 (없어도됨) start-->

    <!-- &lt; input v-bind:value="testData" @input="" &gt;  start-->
    <!-- &lt; input v-model="testData" @input="" &gt;  end-->
    &lt; input v-bind:value="testData" @input="event => testData = event.target.value" &gt;
    <br>
    &lt;div @click="testclick" &gt; btn &lt;/div&gt;
    <br>
    <span>{</span>{<span> testData </span>}<span>}</span> 
    <br>
    testclick(){
        console.log(this.testData);
    }
  <!-- input 태그 동작을 어떻게 구혔했는지 화면에 보여주는 부분 (없어도됨) end-->
    <br>
    <br>
  <!-- 실제 input 태그 구현한 부분 start-->
    <!-- <input v-bind:value="testData" @input=""> -->
    <!-- <input v-model="testData" @input=""> -->
    <input :value="testData" @input="event => testData = event.target.value">
    <div @click="testclick" >btn</div>   
    {{ testData }}
  <!-- 실제 input 태그 구현한 부분 start-->
</div>

<script type="module">
 import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Using the ES Module Build!', //코드가 동작하는지 확인가능한 부분
        testData: '1111'
      }
    },
    methods:{
        testclick(){
            console.log(this.testData);
        }
    }
  }).mount('#app')
</script>

---

참고사이트 1: https://eddie2yim.tistory.com/48

v-bind와 v-on으로 v-model 과 같은 동작을 구현하는 코드에서 @input 부분이 공식사이트보다 간단함

@input="message=$event.target.value" 으로 쓸수있다고 한다

[vuejs] data 바인딩시 v-model과 v-bind를 사용하는 방법

참고사이트 2: https://joshua1988.github.io/web-development/vuejs/v-model-usage/

v-model 한글 입력 처리에 대한 내용이 있음 (컴포넌트, props, $emit )

v-model의 동작 원리와 활용 방법