From b954e08c21c8edd1979248d62dc33db9c87fa72a Mon Sep 17 00:00:00 2001 From: dy-xiaodong2022 Date: Fri, 26 Apr 2024 13:40:30 +0800 Subject: [PATCH] docs: translate step 2 of tutorial --- src/tutorial/src/step-2/App/composition.js | 6 ++-- src/tutorial/src/step-2/App/options.js | 4 +-- .../src/step-2/_hint/App/template.html | 2 +- src/tutorial/src/step-2/description.md | 32 +++++++++---------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/tutorial/src/step-2/App/composition.js b/src/tutorial/src/step-2/App/composition.js index 5022db13..143a9863 100644 --- a/src/tutorial/src/step-2/App/composition.js +++ b/src/tutorial/src/step-2/App/composition.js @@ -2,11 +2,11 @@ import { ref } from 'vue' export default { setup() { - // 组件逻辑 - // 此处声明一些响应式状态 + // 組件邏輯 + // 此處聲明一些響應式狀態 return { - // 暴露给模板 + // 暴露給模板 } } } diff --git a/src/tutorial/src/step-2/App/options.js b/src/tutorial/src/step-2/App/options.js index 0711ccb5..8d91fbd0 100644 --- a/src/tutorial/src/step-2/App/options.js +++ b/src/tutorial/src/step-2/App/options.js @@ -1,4 +1,4 @@ export default { - // 组件选项 - // 此处声明一些响应式状态 + // 組件選項 + // 此處聲明一些響應式狀態 } diff --git a/src/tutorial/src/step-2/_hint/App/template.html b/src/tutorial/src/step-2/_hint/App/template.html index 9d7e66a2..b5e38239 100644 --- a/src/tutorial/src/step-2/_hint/App/template.html +++ b/src/tutorial/src/step-2/_hint/App/template.html @@ -1,2 +1,2 @@

{{ message }}

-

Count is: {{ counter.count }}

+

Count: {{ counter.count }}

diff --git a/src/tutorial/src/step-2/description.md b/src/tutorial/src/step-2/description.md index f7564d36..e9d37aac 100644 --- a/src/tutorial/src/step-2/description.md +++ b/src/tutorial/src/step-2/description.md @@ -1,16 +1,16 @@ -# 声明式渲染 {#declarative-rendering} +# 聲明式渲染 {#declarative-rendering}
-你在编辑器中看到的是一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 `.vue` 后缀的文件中。 +你在編輯器中看到的是一個 Vue 單文件組件 (Single-File Component，縮寫為 SFC)。SFC 是一種可複用的代碼組織形式，它將從屬於同一個組件的 HTML、CSS 和 JavaScript 封裝在使用 `.vue` 後綴的文件中。
-Vue 的核心功能是**声明式渲染**：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。 +Vue 的核心功能是**聲明式渲染**：通過擴展於標準 HTML 的模板語法，我們可以根據 JavaScript 的狀態來描述 HTML 應該是什麼樣子的。當狀態改變時，HTML 會自動更新。
-能在改变时触发更新的状态被称作是**响应式**的。我们可以使用 Vue 的 `reactive()` API 来声明响应式状态。由 `reactive()` 创建的对象都是 JavaScript [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)，其行为与普通对象一样： +能在改變時觸發更新的狀態被稱作是**響應式**的。我們可以使用 Vue 的 `reactive()` API 來聲明響應式狀態。由 `reactive()` 創建的對象都是 JavaScript [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)，其行為與普通對象一樣： ```js import { reactive } from 'vue' @@ -23,7 +23,7 @@ console.log(counter.count) // 0 counter.count++ ``` -`reactive()` 只适用于对象 (包括数组和内置类型，如 `Map` 和 `Set`)。而另一个 API `ref()` 则可以接受任何值类型。`ref` 会返回一个包裹对象，并在 `.value` 属性下暴露内部值。 +`reactive()` 只適用於對象 (包括數組和內置類型，如 `Map` 和 `Set`)。而另一個 API `ref()` 則可以接受任何值類型。`ref` 會返回一個包裹對象，並在 `.value` 屬性下暴露內部值。 ```js import { ref } from 'vue' @@ -34,17 +34,17 @@ console.log(message.value) // "Hello World!" message.value = 'Changed' ``` -`reactive()` 和 `ref()` 的细节在指南 - 响应式基础一节中有进一步讨论。 +`reactive()` 和 `ref()` 的細節在指南 - 響應式基礎一節中有進一步討論。
-在组件的 `