docs: undo translation of code blocks. (vuejs#164)

* docs: undo translation of code blocks.

根据 vuejs#35，代码部分不应翻译。

* docs: undo translation of code blocks.

 - 根据 vuejs#35，代码部分不应翻译，注释部分应翻译。
 - 更正一些翻译不当的地方。

* Apply suggestions from code review

Co-authored-by: wxsm <[email protected]>

Author: ZaneL1u

src/guide/best-practices/accessibility.md

@@ -15,7 +15,7 @@ Web 无障碍访问 (也称为 a11y) 是指创建可供任何人都可以使用
 ```vue-html
 <ul class="skip-links">
   <li>
-    <a href="#main" ref="skipLink">跳到主内容</a>
+    <a href="#main" ref="skipLink">Skip to main content</a>
   </li>
 </ul>
 ```
@@ -96,17 +96,17 @@ watch(
 
 ```vue-html
 <main role="main" aria-labelledby="main-title">
-  <h1 id="main-title">主标题</h1>
+  <h1 id="main-title">Main title</h1>
   <section aria-labelledby="section-title">
-    <h2 id="section-title"> 二级标题 </h2>
-    <h3>章节小标题</h3>
+    <h2 id="section-title"> Section Title </h2>
+    <h3>Section Subtitle</h3>
     <!-- 内容 -->
   </section>
   <section aria-labelledby="section-title">
-    <h2 id="section-title"> 二级标题 </h2>
-    <h3>章节小标题</h3>
+    <h2 id="section-title"> Section Title </h2>
+    <h3>Section Subtitle</h3>
     <!-- 内容 -->
-    <h3>章节小标题</h3>
+    <h3>Section Subtitle</h3>
     <!-- 内容 -->
   </section>
 </main>
@@ -164,7 +164,7 @@ watch(
 提供标签来描述所有表单控件的用途；使 `for` 和 `id` 链接起来：
 
 ```vue-html
-<label for="name">名字</label>
+<label for="name">Name</label>
 <input type="text" name="name" id="name" v-model="name" />
 ```
 
@@ -179,7 +179,7 @@ watch(
 
 ```vue-html
 <label>
-  名字：
+  Name：
   <input type="text" name="name" id="name" v-model="name" />
 </label>
 ```
@@ -192,7 +192,7 @@ watch(
 你也可以为 input 框配置一个带有 [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) 的无障碍访问名。
 
 ```vue-html
-<label for="name">名字</label>
+<label for="name">Name</label>
 <input
   type="text"
   name="name"
@@ -310,8 +310,8 @@ watch(
 
 ```vue-html
 <fieldset>
-  <legend>使用 aria-labelledby</legend>
-  <label id="date-label" for="date">当前日期：</label>
+  <legend>Using aria-labelledby</legend>
+  <label id="date-label" for="date">Current Date:</label>
   <input
     type="date"
     name="date"
@@ -326,8 +326,8 @@ watch(
 
 ```vue-html
 <fieldset>
-  <legend>使用 aria-describedby</legend>
-  <label id="dob" for="dob">生日日期：</label>
+  <legend>Using aria-describedby</legend>
+  <label id="dob" for="dob">Date of Birth:</label>
   <input type="date" name="dob" id="dob" aria-describedby="dob-instructions" />
   <p id="dob-instructions">MM/DD/YYYY</p>
 </fieldset>
@@ -343,9 +343,9 @@ watch(
 
 ```vue-html
 <form role="search">
-  <label for="search" class="hidden-visually">搜索：</label>
+  <label for="search" class="hidden-visually">Search: </label>
   <input type="text" name="search" id="search" v-model="search" />
-  <button type="submit">搜索</button>
+  <button type="submit">Search</button>
 </form>
 ```
 
@@ -374,8 +374,8 @@ watch(
 添加 `aria-hidden="true"` 在无障碍访问时被隐藏，但对其他可视用户仍然是可见的。不要在可聚焦的元素上使用它，请只在装饰性的、重复的的或屏幕外的内容上使用它。
 
 ```vue-html
-<p>这里不会在屏幕助读器上被隐藏</p>
-<p aria-hidden="true">这里会在屏幕助读器上被隐藏</p>
+<p>This is not hidden from screen readers.</p>
+<p aria-hidden="true">This is hidden from screen readers.</p>
 ```
 
 ### 按钮 {#buttons}
@@ -385,11 +385,11 @@ watch(
 
 ```vue-html
 <form action="/dataCollectionLocation" method="post" autocomplete="on">
-  <!-- Buttons -->
+  <!-- 按钮 -->
   <button type="button">Cancel</button>
   <button type="submit">Submit</button>
 
-  <!-- Input buttons -->
+  <!-- 输入按钮 -->
   <input type="button" value="Cancel" />
   <input type="submit" value="Submit" />
 </form>
@@ -407,7 +407,7 @@ watch(
 
   ```vue-html
   <form role="search">
-    <label for="search" class="hidden-visually">搜索：</label>
+    <label for="search" class="hidden-visually">Search: </label>
     <input type="text" name="search" id="search" v-model="search" />
     <input
       type="image"
@@ -422,11 +422,11 @@ watch(
 
 ```vue-html
 <form role="search">
-  <label for="searchIcon" class="hidden-visually">搜索：</label>
+  <label for="searchIcon" class="hidden-visually">Search: </label>
   <input type="text" name="searchIcon" id="searchIcon" v-model="searchIcon" />
   <button type="submit">
     <i class="fas fa-search" aria-hidden="true"></i>
-    <span class="hidden-visually">搜索</span>
+    <span class="hidden-visually">Search</span>
   </button>
 </form>
 ```

src/guide/built-ins/teleport.md

@@ -14,7 +14,7 @@
 
 ```vue-html
 <div class="outer">
-  <h3>Vue 传送门示例</h3>
+  <h3>Tooltips with Vue 3 Teleport</h3>
   <div>
     <MyModal />
   </div>
@@ -33,11 +33,11 @@ const open = ref(false)
 </script>
 
 <template>
-  <button @click="open = true">打开模态框</button>
+  <button @click="open = true">Open Modal</button>
 
   <div v-if="open" class="modal">
-    <p>你好，这里是模态框！</p>
-    <button @click="open = false">关闭</button>
+    <p>Hello from the modal!</p>
+    <button @click="open = false">Close</button>
   </div>
 </template>
 
@@ -68,11 +68,11 @@ export default {
 </script>
 
 <template>
-  <button @click="open = true">打开模态框</button>
+  <button @click="open = true">Open Modal</button>
 
   <div v-if="open" class="modal">
-    <p>你好，这里是模态框！</p>
-    <button @click="open = false">关闭</button>
+    <p>Hello from the modal!</p>
+    <button @click="open = false">Close</button>
   </div>
 </template>
 
@@ -101,12 +101,12 @@ export default {
 `<Teleport>` 提供了一个更简洁的方式来解决此类问题，使我们无需考虑那么多层 DOM 结构的问题。让我们用 `<Teleport>` 改写一下 `<MyModal>`：
 
 ```vue-html{3,8}
-<button @click="open = true">打开模态框</button>
+<button @click="open = true">Open Modal</button>
 
 <Teleport to="body">
   <div v-if="open" class="modal">
-    <p>你好！</p>
-    <button @click="open = false">关闭</button>
+    <p>Hello from the modal!</p>
+    <button @click="open = false">Close</button>
   </div>
 </Teleport>
 ```
@@ -120,12 +120,12 @@ let open = $ref(false)
 </script>
 
 <div class="demo">
-  <button @click="open = true">打开模态框</button>
+  <button @click="open = true">Open Modal</button>
   <ClientOnly>
     <Teleport to="body">
       <div v-if="open" class="demo modal-demo">
-        <p style="margin-bottom:20px">你好！</p>
-        <button @click="open = false">关闭</button>
+        <p style="margin-bottom:20px">Hello from the modal!</p>
+        <button @click="open = false">Close</button>
       </div>
     </Teleport>
   </ClientOnly>

src/guide/built-ins/transition-demos/Basic.vue

@@ -4,9 +4,9 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">切换</button>
+    <button @click="show = !show">Toggle</button>
     <Transition name="fade">
-      <p style="margin-top: 20px" v-if="show">你好</p>
+      <p style="margin-top: 20px" v-if="show">hello</p>
     </Transition>
   </div>
 </template>

src/guide/built-ins/transition-demos/BetweenElements.vue

@@ -6,17 +6,17 @@ let docState = $ref('saved')
 
 <template>
   <div class="demo transition-demo">
-    <span style="margin-right: 20px">点击这里来滚动：</span>
+    <span style="margin-right: 20px">Click to cycle through states: </span>
     <div class="btn-container">
       <Transition name="slide-up" :mode="mode">
         <button v-if="docState === 'saved'" @click="docState = 'edited'">
-          编辑
+          Edit
         </button>
         <button v-else-if="docState === 'edited'" @click="docState = 'editing'">
-          保存
+          Save
         </button>
         <button v-else-if="docState === 'editing'" @click="docState = 'saved'">
-          取消
+          Cancel
         </button>
       </Transition>
     </div>

src/guide/built-ins/transition-demos/CssAnimation.vue

@@ -4,10 +4,10 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">切换</button>
+    <button @click="show = !show">Toggle</button>
     <Transition name="bounce">
       <p v-if="show" style="margin-top: 20px; text-align: center;">
-        你好！你会看到这里正在跳跃！
+        Hello here is some bouncy text!
       </p>
     </Transition>
   </div>

src/guide/built-ins/transition-demos/JsHooks.vue

@@ -40,7 +40,7 @@ function onLeave(el, done) {
 
 <template>
   <div class="demo">
-    <button @click="show = !show">切换</button>
+    <button @click="show = !show">Toggle</button>
 
     <Transition
       @before-enter="onBeforeEnter"

src/guide/built-ins/transition-demos/NestedTransitions.vue

@@ -4,10 +4,10 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show" style="margin-bottom: 20px">切换</button>
+    <button @click="show = !show" style="margin-bottom: 20px">Toggle</button>
     <Transition duration="550" name="nested">
       <div v-if="show" class="transition-demo-outer">
-        <div class="transition-demo-inner">你好！</div>
+        <div class="transition-demo-inner">Hello</div>
       </div>
     </Transition>
   </div>

src/guide/built-ins/transition-demos/SlideFade.vue

@@ -4,9 +4,9 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">切换淡入 / 淡出</button>
+    <button @click="show = !show">Toggle Slide + Fade</button>
     <Transition name="slide-fade">
-      <p style="margin-top: 20px" v-if="show">你好！</p>
+      <p style="margin-top: 20px" v-if="show">hello</p>
     </Transition>
   </div>
 </template>

src/guide/built-ins/transition.md

@@ -29,9 +29,9 @@ Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过
 以下是最基本用法的示例：
 
 ```vue-html
-<button @click="show = !show">切换</button>
+<button @click="show = !show">Toggle</button>
 <Transition>
-  <p v-if="show">你好！</p>
+  <p v-if="show">hello</p>
 </Transition>
 ```
 
@@ -175,7 +175,7 @@ Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过
 ```vue-html
 <Transition name="bounce">
   <p v-if="show" style="text-align: center;">
-    你好！你会看到这里正在跳跃！
+    Hello here is some bouncy text!
   </p>
 </Transition>
 ```
@@ -511,9 +511,9 @@ export default {
 
 ```vue-html
 <Transition>
-  <button v-if="docState === 'saved'">编辑</button>
-  <button v-else-if="docState === 'edited'">保存</button>
-  <button v-else-if="docState === 'editing'">取消</button>
+  <button v-if="docState === 'saved'">Edit</button>
+  <button v-else-if="docState === 'edited'">Save</button>
+  <button v-else-if="docState === 'editing'">Cancel</button>
 </Transition>
 ```
 
@@ -569,7 +569,7 @@ export default {
 ```vue-html
 <Transition :name="transitionName">
   <!-- ... -->
-</Transition>
+</Transition>Fallthrough
 ```
 
 当你使用 Vue 的过渡类约定规则定义了 CSS 过渡/动画，并想在它们之间切换时，这可能很有用。

src/guide/components/attrs.md

@@ -99,7 +99,7 @@ export default {
 这些透传进来的 attribute 可以在模板的表达式中直接用 `$attrs` 访问到。
 
 ```vue-html
-<span>透传 attribute: {{ $attrs }}</span>
+<span>Fallthrough attribute: {{ $attrs }}</span>
 ```
 
 这个 `$attrs` 对象包含了除组件的 `props` 和 `emits` 属性外的所有其他 attribute，例如 `class`，`style`，`v-on` 监听器等等。

src/guide/components/props.md

@@ -242,7 +242,7 @@ export default {
     return {
       post: {
         id: 1,
-        title: '我的 Vue 学习之旅'
+        title: 'My Journey with Vue'
       }
     }
   }
@@ -255,7 +255,7 @@ export default {
 ```js
 const post = {
   id: 1,
-  title: '我的 Vue 学习之旅'
+  title: 'My Journey with Vue'
 }
 ```
 
@@ -578,10 +578,10 @@ export default {
 该组件可以被这样使用：
 
 ```vue-html
-<!-- equivalent of passing :disabled="true" -->
+<!-- 等同于传入 :disabled="true" -->
 <MyComponent disabled />
 
-<!-- equivalent of passing :disabled="false" -->
+<!-- 等同于传入 :disabled="false" -->
 <MyComponent />
 ```