v-model

공식문서 v-model

<input v-model="inputText"/>


new Vue({
	data: {
    	inputText: ''
    }
})

 

사용자의 입력을 받는 UI 요소에 v-model 속성 사용하면 

입력 값이 자동으로 뷰 데이터 속성에 연결된다

 

 

 

v-model 동작 방식

v-bind + v-on  기능의 조합으로 동작

 

위의 코드와 같은 기능을 하는 코드이다.

<input v-bind:value="inputText" v-on:input="updateInput"/>

new Vue({
	data: {
    	inputText: ''
    },
    methods: {
    	updateInput: function(event) {
        	var updateText = event.target.value;
            this.inputText = updateText;
        }
    }
})

 

- v-bind 속성

: 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용한다

 

- v-on 속성

: 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용한다

 

- 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event) 가 들어온다

 

 

📌 HTML 입력 요소에 따라 'v-model' 속성이 다르게 구성된다

input 태그 : value / input

checkbox 태그 : checked / change

selet 태그 : value / change

 

 

 

현업에서 vue3 를 쓰면서 v-model이 편하고 자연스레 계속 써왔는데 

커스텀해야할 때 v-model 로 안먹는걸 알고서 공식문서를 뒤져보기 시작했다

v-model 의 한계점때문에 자연스레 v-bind + v-on 을 연결해서 사용해보니 직접 이벤트와 값을 조하배서 바인딩이 가능해져서 원하는 기능을 구현할 수 있었다.

당연시 생각했던 코드의 기능을 깊이있게 공부해야 겠다고 느꼈다. 이렇게 기본적인 것도 처음엔 기능이 안먹어서 많이 고생했는데 돌이켜보면 그런 과정이 있어 처음 vue3 를 배웠을 때 알던 기능을 구현된 기능에 초점에만 초점을 맞춰서 생각을 했던 부분을 구현하는 방식과 원리를 잘 알아야 한다는 걸 다시금 새삼 깨달았다. 

역시나 기본이 중요하다.