Translated all the practical examples

src/examples/src/fetching-data/App/composition.js

@@ -9,8 +9,8 @@ export default {
     const commits = ref(null)
 
     watchEffect(async () => {
-      // this effect will run immediately and then
-      // re-run whenever currentBranch.value changes
+      // 该 effect 会立即运行，
+      // 并且在 currentBranch.value 改变时重新运行
       const url = `${API_URL}${currentBranch.value}`
       commits.value = await (await fetch(url)).json()
     })

src/examples/src/fetching-data/App/options.js

@@ -8,12 +8,12 @@ export default {
   }),
 
   created() {
-    // fetch on init
+    // 在初始化的时候进行获取
     this.fetchData()
   },
 
   watch: {
-    // re-fetch whenever currentBranch changes
+    // 当 currentBranch 改变时重新获取
     currentBranch: 'fetchData'
   },
 

src/examples/src/fetching-data/description.txt

@@ -1,2 +1,2 @@
-This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list.
-You can switch between the two branches.
+这个示例会通过 GitHub 的 API 获取最新的 Vue.js 提交信息并将其展示为列表。
+你可以在两个分支之间切换。

src/examples/src/grid/description.txt

@@ -1 +1 @@
-An example of creating a reusable grid component and using it with external data.
+该示例创建了一个可复用网格组件，并结合外部数据使用它。

src/examples/src/list-transition/App/style.css

@@ -11,22 +11,22 @@
   box-sizing: border-box;
 }
 
-/* 1. declare transition */
+/* 1. 声明过渡效果 */
 .fade-move,
 .fade-enter-active,
 .fade-leave-active {
   transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
-/* 2. declare enter from and leave to state */
+/* 2. 声明进入和离开的状态 */
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
   transform: scaleY(0.01) translate(30px, 0);
 }
 
-/* 3. ensure leaving items are taken out of layout flow so that moving
-      animations can be calculated correctly. */
+/* 3. 确保离开的项目被移除出了布局流
+      以便正确地计算移动时的动画效果。 */
 .fade-leave-active {
   position: absolute;
 }

src/examples/src/list-transition/description.txt

@@ -1,2 +1,2 @@
-FLIP list transitions with the built-in <TransitionGroup>.
+通过内建的 <TransitionGroup> 实现“FLIP”列表过渡效果。
 https://aerotwist.com/blog/flip-your-animations/

src/examples/src/markdown/description.txt

@@ -1 +1 @@
-A simple markdown editor.
+一个简单的 markdown 编辑器。

src/examples/src/modal/App/template.html

@@ -1,7 +1,7 @@
 <button id="show-modal" @click="showModal = true">Show Modal</button>
 
 <Teleport to="body">
-  <!-- use the modal component, pass in the prop -->
+  <!-- 使用这个 modal 组件，传入 prop -->
   <modal :show="showModal" @close="showModal = false">
     <template #header>
       <h3>custom header</h3>

src/examples/src/modal/Modal/style.css

@@ -39,12 +39,12 @@
 }
 
 /*
- * The following styles are auto-applied to elements with
- * transition="modal" when their visibility is toggled
- * by Vue.js.
+ * 对于 transition="modal" 的元素来说
+ * 当通过 Vue.js 切换它们的可见性时
+ * 以下样式会被自动应用。
  *
- * You can easily play with the modal transition by editing
- * these styles.
+ * 你可以简单地通过编辑这些样式
+ * 来体验该模态框的过渡效果。
  */
 
 .modal-enter-from {

src/examples/src/modal/description.txt

@@ -1 +1 @@
-Modal component with customizable slots and CSS transitions.
+可定制插槽和 CSS 过渡效果的模态框组件。

src/examples/src/svg/App/template.html

@@ -2,7 +2,7 @@
   <PolyGraph :stats="stats"></PolyGraph>
 </svg>
 
-<!-- controls -->
+<!-- 控件 -->
 <div v-for="stat in stats">
   <label>{{stat.label}}</label>
   <input type="range" v-model="stat.value" min="0" max="100">

src/examples/src/svg/PolyGraph/options.js

@@ -9,7 +9,7 @@ export default {
     stats: Array
   },
   computed: {
-    // a computed property for the polygon's points
+    // 一个用于多边形顶点的计算属性
     points() {
       const total = this.stats.length
       return this.stats

src/examples/src/svg/description.txt

@@ -1 +1 @@
-Say Hello World with Vue!
+跟 Vue 说 Hello World！

src/examples/src/todomvc/App/composition.js

@@ -10,20 +10,20 @@ const filters = {
 
 export default {
   setup() {
-    // state
+    // 状态
     const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
     const visibility = ref('all')
     const editedTodo = ref()
 
-    // derived state
+    // 获取的状态
     const filteredTodos = computed(() => filters[visibility.value](todos.value))
     const remaining = computed(() => filters.active(todos.value).length)
 
-    // handle routing
+    // 处理路由
     window.addEventListener('hashchange', onHashChange)
     onHashChange()
 
-    // persist state
+    // 状态持久化
     watchEffect(() => {
       localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))
     })

src/examples/src/todomvc/App/options.js

@@ -7,14 +7,14 @@ const filters = {
 }
 
 export default {
-  // app initial state
+  // 初始化应用状态
   data: () => ({
     todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'),
     editedTodo: null,
     visibility: 'all'
   }),
 
-  // watch todos change for localStorage persistence
+  // 侦听 todos 的变化，以通过 localStorage 持久化
   watch: {
     todos: {
       handler(todos) {
@@ -38,8 +38,8 @@ export default {
     }
   },
 
-  // methods that implement data logic.
-  // note there's no DOM manipulation here at all.
+  // 数据逻辑的方法实现。
+  // 注意这里没有 DOM 操作。
   methods: {
     toggleAll(e) {
       this.todos.forEach((todo) => (todo.completed = e.target.checked))

src/examples/src/todomvc/description.txt

@@ -1,2 +1,2 @@
-A fully spec-compliant TodoMVC implementation
-https://todomvc.com/
+一个完全标准的 TodoMVC 实现
+https://todomvc.com/

src/examples/src/tree/TreeItem/composition.js

@@ -1,7 +1,7 @@
 import { ref, computed } from 'vue'
 
 export default {
-  name: 'TreeItem', // necessary for self-reference
+  name: 'TreeItem', // 在引用自身的时候是必须的
   props: {
     model: Object
   },

src/examples/src/tree/TreeItem/options.js

@@ -1,5 +1,5 @@
 export default {
-  name: 'TreeItem', // necessary for self-reference
+  name: 'TreeItem', // 在引用自身的时候是必须的
   props: {
     model: Object
   },

src/examples/src/tree/TreeItem/template.html

@@ -8,8 +8,8 @@
   </div>
   <ul v-show="isOpen" v-if="isFolder">
     <!--
-      A component can recursively render itself using its
-      "name" option (inferred from filename if using SFC)
+      一个可以通过其“name”选项递归渲染自己的组件，
+      (如果使用单文件组件，则从文件名推断)
     -->
     <TreeItem
       class="item"

src/examples/src/tree/description.txt

@@ -1,2 +1,2 @@
-A nested tree component that recursively renders itself.
-You can double click on an item to turn it into a folder.
+一个可以递归渲染自己的嵌套树组件。
+你可以双击一个项目将其转变为一个文件夹。