Skip to content

Commit acbf087

Browse files
authored
Merge pull request #215 from niceplugin/tutorial/step-5
번역: tutorial/step-5
2 parents 8835edd + 3614fa7 commit acbf087

File tree

3 files changed

+14
-13
lines changed

3 files changed

+14
-13
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<input :value="text" @input="onInput" placeholder="Type here">
1+
<input :value="text" @input="onInput" placeholder="여기에 입력하기">
22
<p>{{ text }}</p>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<input v-model="text" placeholder="Type here">
1+
<input v-model="text" placeholder="여기에 입력하기">
22
<p>{{ text }}</p>
Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Form Bindings
1+
# 폼(form) 바인딩
22

3-
Using `v-bind` and `v-on` together, we can create two-way bindings on form input elements:
3+
`v-bind``v-on`을 함께 사용하면, 폼 안의 입력 엘리먼트에 양방향 바인딩을 만들 수 있습니다:
44

55
```vue-html
66
<input :value="text" @input="onInput">
@@ -11,8 +11,7 @@ Using `v-bind` and `v-on` together, we can create two-way bindings on form input
1111
```js
1212
methods: {
1313
onInput(e) {
14-
// a v-on handler receives the native DOM event
15-
// as the argument.
14+
// v-on 핸들러는 네이티브 DOM 이벤트를 인자로 받습니다.
1615
this.text = e.target.value
1716
}
1817
}
@@ -24,24 +23,26 @@ methods: {
2423

2524
```js
2625
function onInput(e) {
27-
// a v-on handler receives the native DOM event
28-
// as the argument.
26+
// v-on 핸들러는 네이티브 DOM 이벤트를 인자로 받습니다.
2927
text.value = e.target.value
3028
}
3129
```
3230

3331
</div>
3432

35-
Try typing in the input box - you should see the text in `<p>` updating as you type.
33+
입력란에 입력해 보십시오.
34+
입력할 때 `<p>`에 텍스트가 업데이트되는 것을 볼 수 있습니다.
3635

37-
To simplify two-way bindings, Vue provides a directive, `v-model`, which is essentially a syntax sugar for the above:
36+
Vue는 양방향 바인딩을 단순화하기 위해, 위 문법을 간편 표기하는 `v-model` 디렉티브를 제공합니다:
3837

3938
```vue-html
4039
<input v-model="text">
4140
```
4241

43-
`v-model` automatically syncs the `<input>`'s value with the bound state, so we no longer need to use a event handler for that.
42+
`v-model``<input>`의 값을 바인딩된 상태와 자동으로 동기화하므로,
43+
더 이상 이에 대한 이벤트 핸들러를 사용할 필요가 없습니다.
4444

45-
`v-model` works not only on text inputs, but also other input types such as checkboxes, radio buttons, and select dropdowns. We cover more details in <a target="_blank" href="/guide/essentials/forms.html">Guide - Form Bindings</a>.
45+
`v-model`은 텍스트 입력 외에도 체크박스, 라디오 버튼, 셀렉트 드롭다운과 같은 다른 입력 타입에서도 작동합니다.
46+
자세한 내용은 <a target="_blank" href="/guide/essentials/forms.html">가이드 - Form 입력 바인딩</a>에서 다룹니다.
4647

47-
Now, try to refactor the code to use `v-model` instead.
48+
이제 `v-model`을 대신 사용하도록 코드를 리팩토링 해봅시다.

0 commit comments

Comments
 (0)