You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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):
6
6
7
7
```js
8
8
import { createApp } from'vue'
9
9
10
10
constapp=createApp({
11
-
/*root component options*/
11
+
/*tùy chọn cho component gốc*/
12
12
})
13
13
```
14
14
15
-
## The Root Component
15
+
## Component gốc
16
16
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.
18
18
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:
20
20
21
21
```js
22
22
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
24
24
importAppfrom'./App.vue'
25
25
26
26
constapp=createApp(App)
27
27
```
28
28
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:
30
30
31
31
```
32
-
App (root component)
32
+
App (component gốc)
33
33
├─ TodoList
34
34
│ └─ TodoItem
35
35
│ ├─ TodoDeleteButton
@@ -39,11 +39,11 @@ App (root component)
39
39
└─ TodoStatistics
40
40
```
41
41
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ẻ.
43
43
44
-
## Mounting the App
44
+
## Mount một app
45
45
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:
47
47
48
48
```html
49
49
<divid="app"></div>
@@ -53,13 +53,13 @@ An application instance won't render anything until its `.mount()` method is cal
53
53
app.mount('#app')
54
54
```
55
55
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.
57
57
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.
59
59
60
-
### In-DOM Root Component Template
60
+
### Template cho component gốc trong DOM
61
61
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:
63
63
64
64
```html
65
65
<divid="app">
@@ -81,31 +81,31 @@ const app = createApp({
81
81
app.mount('#app')
82
82
```
83
83
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.
85
85
86
-
## App Configurations
86
+
## Cấu hình cho app
87
87
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:
89
89
90
90
```js
91
91
app.config.errorHandler= (err) => {
92
-
/*handle error*/
92
+
/*xử lí lỗi*/
93
93
}
94
94
```
95
95
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:
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).
103
103
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()`!
105
105
106
-
## Multiple application instances
106
+
## Nhiều app instance cùng lúc
107
107
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 đó:
109
109
110
110
```js
111
111
constapp1=createApp({
@@ -119,4 +119,4 @@ const app2 = createApp({
119
119
app2.mount('#container-2')
120
120
```
121
121
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