우리가 지금까지 만들었던 프로젝트는 단방향 바인딩의 예이다.
데이터->뷰의 형태로 바인딩이 되어있어 데이터의 값이 변하면
바로바로 업데이트 된다. 한방향으로만 데이터가 흐른다는 이야기이다.
그렇다면 양방향 바인딩은 뷰->데이터 , 데이터->뷰로 데이터가 양 방향으로 흐르게 되는 것이다. 즉 데이터에 있는 값이 뷰에 나타나고 이 뷰의 값이 바뀌면 데이터의 값도 바뀌는 것이다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<input type="text" v-model="name">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
var app = new Vue({
el: "#app",
data: {
name : "vue"
}
});
input
태그에 v-model
을 설정함으로써 이 input
엘리먼트의 값이 업데이트되면 name 값이 자동으로 바뀌게 한 것이다.
전에 만들었던 hi의 값에따라 사진이 바뀌어 보였던 예제에 응용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h1>Hello {{name}}</h1>
<h2>{{Date()}}</h2>
<h3><input type="checkbox" v-model="hi">안녕?</h3>
<img :src="hi ? sayHello : sayGoodBye" alt=""/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
var app = new Vue({
el: "#app",
data: {
name : "Vue",
hi : true,
sayHello: 'https://www.himgs.com/imagenes/hello/social/hello-fb-logo.png',
sayGoodBye: 'https://st2.depositphotos.com/1896403/6729/i/950/depositphotos_67297861-stock-photo-time-to-say-goodbye-message.jpg'
}
});
위 코드를 작성하면 checkbox가 활성화되면 Hello 비활성화되면 Goodbye가 된다.
드디어 Vue에서 인터렉션을 만들 수 있게 되었다.
v-model
디렉티브는 이렇게 폼에 관련된 태그<input>
<select>
<textarea>
등에서만 사용가능하다.