<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"> <!--text area밑에 실시간으로 미리보기가 나오도록-->
<form v-on:submit.prevent="submit">
<input type="text" :value="text" @keyup="updateText"><br>
<input type="text" v-model="text"><br> <!--양방향 바인딩은 이렇게 하면된다.-->
{{ text }}<br>
<button type="submit">Submit</button>
</form>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
text: 'text',
},
methods: {
updateText(event){
this.text = event.target.value;
}
},
})
</script>
</html>1/ v-on:keyup="updateText"로 실시간으로 {{ text }}부분에 input에 적은 내용이 나오도록 할 수 있다.
keyup : 키보드를 치고 뗄때, 이벤트가 일어난다. 여기서는 input창에 key를 up할때마다 data의 text에 event.target.value, 즉 Input입력창의 내용을 넣어주는 이벤트가 일어난다.
만약 @keyup을 적용하지 않으면, 아래 input창에 적은게 {{text}}에 update가 되지 않는다. 즉, 양방향 데이터 바인딩이 되지 않는다.
2/ 하지만 더 간단한 방법인, 양방향 데이터 바인딩인 v-model을 이용하자! 훨씬 간단하다.
'Vue.js' 카테고리의 다른 글
| Kossie Coder 07. Watch 속성 (0) | 2022.05.15 |
|---|---|
| Kossie Coder 06. Computed 속성 (0) | 2022.05.15 |
| Kossie Coder 04. 이벤트(Events) (0) | 2022.05.09 |
| Kossie Coder 03. 데이터 바인딩(Data Binding) (0) | 2022.04.28 |
| Kossie Coder 02. 뷰 데이터(data)와 메소드(methods) (0) | 2022.04.28 |
