Skip to content

Commit acb6453

Browse files
committed
docs: translate src/guide/essentials/application.md
1 parent eff9148 commit acb6453

File tree

2 files changed

+30
-27
lines changed

2 files changed

+30
-27
lines changed

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ Network Trash Folder
2323
Temporary Items
2424
.apdisk
2525

26+
# IDE, editors
27+
.idea/
28+
2629
### Node ###
2730
# Logs
2831
logs

src/guide/essentials/application.md

+27-27
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
1-
# Creating a Vue Application
1+
# Tạo ứng dụng Vue
22

3-
## The application instance
3+
## Application instance
44

5-
Every Vue application starts by creating a new **application instance** with the [`createApp`](/api/application#createapp) function:
5+
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):
66

77
```js
88
import { createApp } from 'vue'
99

1010
const app = createApp({
11-
/* root component options */
11+
/* tùy chọn cho component gốc */
1212
})
1313
```
1414

15-
## The Root Component
15+
## Component gốc
1616

17-
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.
17+
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.
1818

19-
If you are using Single-File Components, we typically import the root component from another file:
19+
Nếu sử dụng Single-File Component, thường thì ta import component gốc từ một file khác:
2020

2121
```js
2222
import { createApp } from 'vue'
23-
// import the root component App from a single-file component.
23+
// import component gốc "App" từ một single-file component
2424
import App from './App.vue'
2525

2626
const app = createApp(App)
2727
```
2828

29-
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:
29+
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:
3030

3131
```
32-
App (root component)
32+
App (component gốc)
3333
├─ TodoList
3434
│ └─ TodoItem
3535
│ ├─ TodoDeleteButton
@@ -39,11 +39,11 @@ App (root component)
3939
└─ TodoStatistics
4040
```
4141

42-
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.
42+
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ẻ.
4343

44-
## Mounting the App
44+
## Mount một app
4545

46-
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:
46+
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:
4747

4848
```html
4949
<div id="app"></div>
@@ -53,13 +53,13 @@ An application instance won't render anything until its `.mount()` method is cal
5353
app.mount('#app')
5454
```
5555

56-
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.
56+
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.
5757

58-
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.
58+
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.
5959

60-
### In-DOM Root Component Template
60+
### Template cho component gốc trong DOM
6161

62-
When using Vue without a build step, we can write our root component's template directly inside the mount container:
62+
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:
6363

6464
```html
6565
<div id="app">
@@ -81,31 +81,31 @@ const app = createApp({
8181
app.mount('#app')
8282
```
8383

84-
Vue will automatically use the container's `innerHTML` as the template if the root component does not already have a `template` option.
84+
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.
8585

86-
## App Configurations
86+
## Cấu hình cho app
8787

88-
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:
88+
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:
8989

9090
```js
9191
app.config.errorHandler = (err) => {
92-
/* handle error */
92+
/* xử lí lỗi */
9393
}
9494
```
9595

96-
The application instance also provides a few methods for registering app-scoped assets. For example, registering a component:
96+
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:
9797

9898
```js
9999
app.component('TodoDeleteButton', TodoDeleteButton)
100100
```
101101

102-
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).
102+
Đ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).
103103

104-
Make sure to apply all app configurations before mounting the app!
104+
Nhớ áp dụng toàn bộ các cấu hình cho app trước khi gọi `.mount()`!
105105

106-
## Multiple application instances
106+
## Nhiều app instance cùng lúc
107107

108-
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:
108+
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 đó:
109109

110110
```js
111111
const app1 = createApp({
@@ -119,4 +119,4 @@ const app2 = createApp({
119119
app2.mount('#container-2')
120120
```
121121

122-
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.
122+
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.

0 commit comments

Comments
 (0)