Muscardinus
v-model 본문
728x90
데이터의 양방향 바인딩을 위해서 우리는 v-model을 사용한다.
양방향 바인딩을 쉽게 표현하자면, html에서의 data 변화가 있으면 js에도 반영이되고 반대로 js에서 data의 변화가 있으면 html에서도 해당하는 data에서 변화가 있는 것이다.
const vm = Vue.createApp({
data() {
return {
firstName: 'John',
lastName: 'Doe',
};
},
methods: {
fullName() {
return `${this.firstName} ${this.lastName.toUpperCase()}`;
},
},
}).mount('#app');<!DOCTYPE html>
<html>
<head>
<title>VueJS Course</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="app" v-cloak>
<p>{{ fullName() }}</p>
<hr />
<label>First Name</label>
<input type="text" v-model="firstName" />
<label>Last Name</label>
<input type="text" v-model="lastName" />
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>html의 input에서 볼 수 있듯이, v-model안에 바라보고 있는 expression을 넣어서 사용할 수 있다.
그러면, input의 값 변화에 따라서 값이 바뀌게 된다.
이렇게 쉽게 할 수 있는 이유는 vue에서 reactivity기법을 사용해서이다.
reactivity를 사용하여 vue는 data의 변화를 감지하여, 변화가 있을 때 마다 rendering을 다시한다.
728x90
Comments