Merge pull request #233 from niceplugin/examples/simple-component

예제 번역: /examples/simple-component

Author: narusas

ko-KR/.vitepress/config.ts

@@ -444,7 +444,7 @@ export const sidebar = {
           link: '/examples/#form-bindings'
         },
         {
-          text: 'Simple Component',
+          text: '단순한 컴포넌트',
           link: '/examples/#simple-component'
         }
       ]

ko-KR/src/examples/src/simple-component/App/composition.js

@@ -1,15 +1,15 @@
 import { ref } from 'vue'
-import TodoItem from './TodoItem.vue'
+import ListItem from './ListItem.vue'
 
 export default {
   components: {
-    TodoItem
+    ListItem
   },
   setup() {
     const groceryList = ref([
-      { id: 0, text: 'Vegetables' },
-      { id: 1, text: 'Cheese' },
-      { id: 2, text: 'Whatever else humans are supposed to eat' }
+      { id: 0, text: '채소' },
+      { id: 1, text: '치즈' },
+      { id: 2, text: '인간이 먹을 수 있는 모든 것' }
     ])
 
     return {

ko-KR/src/examples/src/simple-component/App/options.js

@@ -1,15 +1,15 @@
-import TodoItem from './TodoItem.vue'
+import ListItem from './ListItem.vue'
 
 export default {
   components: {
-    TodoItem
+    ListItem
   },
   data() {
     return {
       groceryList: [
-        { id: 0, text: 'Vegetables' },
-        { id: 1, text: 'Cheese' },
-        { id: 2, text: 'Whatever else humans are supposed to eat' }
+        { id: 0, text: '채소' },
+        { id: 1, text: '치즈' },
+        { id: 2, text: '인간이 먹을 수 있는 모든 것' }
       ]
     }
   }

ko-KR/src/examples/src/simple-component/App/template.html

@@ -1,13 +1,13 @@
 <ol>
   <!--
-    We are providing each todo-item with the todo object
-    it's representing, so that its content can be dynamic.
-    We also need to provide each component with a "key",
-    which is explained in the guide section on v-for.
+    item 객체를 제공하여 list-item이
+    콘텐츠를 동적으로 나타낼 수 있도록 합니다.
+    그리고 컴포넌트에 "key"를 제공해야 하는데,
+     "리스트 렌더링" 가이드에 설명되어 있습니다.
   -->
-  <TodoItem
+  <ListItem
     v-for="item in groceryList"
     :todo="item"
     :key="item.id"
-  ></TodoItem>
+  ></ListItem>
 </ol>

ko-KR/src/examples/src/simple-component/TodoItem/composition.js renamed to ko-KR/src/examples/src/simple-component/ListItem/composition.js

@@ -1,2 +1,2 @@
-Here we show the simplest possible component which accepts a prop and renders it.
-Learn more about components in the guide!
+여기서는 prop을 전달받아 렌더링하는 가장 단순한 컴포넌트를 보여줍니다.
+가이드에서 컴포넌트에 대해 자세히 알아보세요!