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.
+一个可以递归渲染自己的嵌套树组件。
+你可以双击一个项目将其转变为一个文件夹。