예제 번역: /examples/handling-input

Author: niceplugin

ko-KR/.vitepress/config.ts

@@ -428,7 +428,7 @@ export const sidebar = {
           link: '/examples/#hello-world'
         },
         {
-          text: '사용자 입력 처리하기',
+          text: '사용자 입력 핸들링',
           link: '/examples/#handling-input'
         },
         {

ko-KR/src/examples/src/handling-input/App/composition.js

@@ -2,16 +2,15 @@ import { ref } from 'vue'
 
 export default {
   setup() {
-    const message = ref('Hello World!')
+    const message = ref('안녕 Vue!')
 
     function reverseMessage() {
-      // Access/mutate the value of a ref via
-      // its .value property.
+      // .value 속성을 통해 ref 값에 접근/변경합니다.
       message.value = message.value.split('').reverse().join('')
     }
 
     function notify() {
-      alert('navigation was prevented.')
+      alert('탐색이 금지되었습니다.')
     }
 
     return {

ko-KR/src/examples/src/handling-input/App/options.js

@@ -1,15 +1,15 @@
 export default {
   data() {
     return {
-      message: 'Hello World!'
+      message: '안녕 Vue!'
     }
   },
   methods: {
     reverseMessage() {
       this.message = this.message.split('').reverse().join('')
     },
     notify() {
-      alert('navigation was prevented.')
+      alert('탐색이 금지되었습니다.')
     }
   }
 }

ko-KR/src/examples/src/handling-input/App/template.html

@@ -1,22 +1,23 @@
 <!--
-  Note we don't need .value inside templates because
-  refs are automatically "unwrapped" in templates.
+  컴포지션 API 스타일의 경우,
+  ref는 템플릿에서 자동으로 "언래핑"되므로
+  템플릿 내에서 .value가 필요하지 않습니다.
 -->
 <h1>{{ message }}</h1>
 
 <!--
-  Bind to a method/function.
-  The @click syntax is short for v-on:click.
+  메서드/함수에 바인딩합니다.
+  @click 문법은 v-on:click의 줄임말입니다.
 -->
-<button @click="reverseMessage">Reverse Message</button>
+<button @click="reverseMessage">메시지 뒤집기</button>
 
-<!-- Can also be an inline expression statement -->
-<button @click="message += '!'">Append "!"</button>
+<!-- 인라인 표현식 문장이 될 수도 있습니다 -->
+<button @click="message += '!'">"!" 추가하기</button>
 
 <!--
-  Vue also provides modifiers for common tasks
-  such as e.preventDefault() and e.stopPropagation()
+  Vue는 e.preventDefault() 및 e.stopPropagation()과 같은
+  일반적인 작업에 대한 수식어를 제공합니다.
 -->
 <a href="https://vuejs.org" @click.prevent="notify">
-  A link with e.preventDefault()
+  e.preventDefault()가 작동하는 링크
 </a>

ko-KR/src/examples/src/handling-input/description.txt

@@ -1 +1 @@
-This example demonstrates handling user input with the v-on directive.
+이 예제는 v-on 디렉티브로 사용자 입력을 처리하는 방법을 보여줍니다.