From acb64532ab0d653088387be042a54aaeaddc320f Mon Sep 17 00:00:00 2001 From: Phan An Date: Sat, 19 Feb 2022 22:27:41 +0700 Subject: [PATCH 01/11] docs: translate src/guide/essentials/application.md --- .gitignore | 3 ++ src/guide/essentials/application.md | 54 ++++++++++++++--------------- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index b4a9415240..ea50b40700 100644 --- a/.gitignore +++ b/.gitignore @@ -23,6 +23,9 @@ Network Trash Folder Temporary Items .apdisk +# IDE, editors +.idea/ + ### Node ### # Logs logs diff --git a/src/guide/essentials/application.md b/src/guide/essentials/application.md index b587209e47..8b3f42297f 100644 --- a/src/guide/essentials/application.md +++ b/src/guide/essentials/application.md @@ -1,35 +1,35 @@ -# Creating a Vue Application +# Tạo ứng dụng Vue -## The application instance +## Application instance -Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function: +Mội ứng dụng Vue được khởi động bằng cách tạo một **application instance** (thực thể của ứng dụng, từ đây ta cũng gọi tắt là "app instance") với hàm [`createApp`](/api/application#createapp): ```js import { createApp } from 'vue' const app = createApp({ - /* root component options */ + /* tùy chọn cho component gốc */ }) ``` -## The Root Component +## Component gốc -The object we are passing into `createApp` is in fact a component. Every app requires a "root component" that can contain other components as its children. +Object mà ta đưa vào hàm `createApp` trên đây thực ra là một _component_. Mỗi app Vue yêu cầu một "component gốc," component này có thể chứa các component con khác. -If you are using Single-File Components, we typically import the root component from another file: +Nếu sử dụng Single-File Component, thường thì ta import component gốc từ một file khác: ```js import { createApp } from 'vue' -// import the root component App from a single-file component. +// import component gốc "App" từ một single-file component import App from './App.vue' const app = createApp(App) ``` -While many examples in this guide only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this: +Tuy đa số các ví dụ trong hướng dẫn này chỉ cần một component, các app trong thực tế thường được sắp xếp thành một cây component lồng nhau và có thể tái sử dụng. Đơn cử, cây component của một app Todo có thể có dạng như sau: ``` -App (root component) +App (component gốc) ├─ TodoList │ └─ TodoItem │ ├─ TodoDeleteButton @@ -39,11 +39,11 @@ App (root component) └─ TodoStatistics ``` -We will discuss how to define and compose multiple components together in later sections of the guide. Before that, we will focus on what happens inside a single component. +Trong các phần sau của hướng dẫn, chúng ta sẽ bàn về cách định nghĩa và soạn thảo nhiều component cùng lúc. Nhưng trước tiên, chúng ta sẽ tập trung vào những gì xảy ra bên trong một component đơn lẻ. -## Mounting the App +## Mount một app -An application instance won't render anything until its `.mount()` method is called. It expects a "container" argument, which can either be an actual DOM element or a selector string: +Một app instance sẽ không render ra gì hết cho đến khi phương thức `.mount()` của nó được gọi. Phương thức này nhận vào một tham số "container," là một phần tử DOM hoặc một selector: ```html
@@ -53,13 +53,13 @@ An application instance won't render anything until its `.mount()` method is cal app.mount('#app') ``` -The content of the app's root component will be rendered inside the container element. The container element itself is not considered part of the app. +Nội dung của component gốc của một ứng dụng sẽ được render bên trong phần tử container. Phần tử container không được xem là một phần của app. -The `.mount()` method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance. +Bạn nên gọi phương thức `.mount()` sau khi cài đặt toàn bộ cấu hình và đăng kí các asset. Đồng thời, lưu ý rằng giá trị trả về của nó, không giống như các phương thức đăng kí asset, là một instance của component gốc thay vì của app. -### In-DOM Root Component Template +### Template cho component gốc trong DOM -When using Vue without a build step, we can write our root component's template directly inside the mount container: +Khi sử dụng Vue mà không thông qua bước build, chúng ta có thể viết trực tiếp template (bản mẫu) cho component gốc bên trong container được mount: ```html
@@ -81,31 +81,31 @@ const app = createApp({ app.mount('#app') ``` -Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option. +Vue sẽ tự động dùng `innerHTML` của container làm template nếu component gốc không có tùy chọn `template` sẵn. -## App Configurations +## Cấu hình cho app -The application instance exposes a `.config` object that allows us to configure a few app-level options, for example defining an app-level error handler that captures errors from all descendent components: +App instance có một object `.config`, cho phép chúng ta cấu hình một số các tùy chọn ở tầng app, ví dụ như định nghĩa một trình xử lí lỗi (error handler) để thu thập các lỗi được ném ra từ các component bên dưới: ```js app.config.errorHandler = (err) => { - /* handle error */ + /* xử lí lỗi */ } ``` -The application instance also provides a few methods for registering app-scoped assets. For example, registering a component: +App instance cũng cung cấp một số phương thức để đăng kí asset ở phạm vi app (app-scoped), ví dụ như đăng kí một component: ```js app.component('TodoDeleteButton', TodoDeleteButton) ``` -This makes the `TodoDeleteButton` available for use anywhere in our app. We will discuss registration for components and other types of assets in later sections of the guide. You can also browse the full list of application instance APIs in its [API reference](/api/application). +Đoạn code trên đây đăng kí component `TodoDeleteButton` để sử dụng ở bất kì nơi nào trong app. Chúng ta sẽ bàn thêm về việc đăng kí component và các loại asset khác trong các phần sau của hướng dẫn này. Bạn cũng có thể xem danh sách đầy đủ của các instance API trong mục [tham chiếu API](/api/application). -Make sure to apply all app configurations before mounting the app! +Nhớ áp dụng toàn bộ các cấu hình cho app trước khi gọi `.mount()`! -## Multiple application instances +## Nhiều app instance cùng lúc -You are not limited to a single application instance on the same page. The `createApp` API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets: +API `createApp` cho phép nhiều app Vue tồn tại trên cùng một trang, mỗi app có phạm vi riêng dành cho cấu hình và asset toàn cục của app đó: ```js const app1 = createApp({ @@ -119,4 +119,4 @@ const app2 = createApp({ app2.mount('#container-2') ``` -If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for. +Nếu bạn đang sử dụng Vue để hỗ trợ thêm cho HTML render từ phía server (server-rendered HTML) và chỉ cần Vue điều khiển một số phạm vi cụ thể trên một trang web lớn, nên tránh việc sử dụng chỉ một app Vue cho toàn bộ trang. Thay vào đó, tạo nhiều app Vue riêng lẻ và mount các app này trên các phần tử DOM cần thiết. From bab63103645786f9b19c6e3ec58bf9e9b937df29 Mon Sep 17 00:00:00 2001 From: Thien Nguyen Date: Thu, 10 Feb 2022 13:40:10 +0700 Subject: [PATCH 02/11] docs: translate homepage --- .vitepress/config.ts | 2 +- .vitepress/theme/components/Home.vue | 34 ++++++++++------------ .vitepress/theme/components/NewsLetter.vue | 12 ++++---- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 495605c288..a90686361f 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -611,7 +611,7 @@ export default defineConfigWithTheme({ text: 'MIT License', link: 'https://opensource.org/licenses/MIT' }, - copyright: `Copyright © 2014-${new Date().getFullYear()} Evan You` + copyright: `Bản quyền © 2014-${new Date().getFullYear()} Evan You` } }, diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue index eb0e73cc2f..0799ed7742 100644 --- a/.vitepress/theme/components/Home.vue +++ b/.vitepress/theme/components/Home.vue @@ -6,17 +6,16 @@ import SponsorsGroup from './SponsorsGroup.vue';