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
Copy file name to clipboardExpand all lines: src/v2/guide/render-function.md
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -97,15 +97,15 @@ Sebelum kita lanjut lebih dalam tentang fungsi *render*, penting untuk sedikit m
97
97
</div>
98
98
```
99
99
100
-
Ketika *browser* membaca kode di atas, *browser* akan membuat [pohon yang terdiri atas *DOM nodes*](https://javascript.info/dom-nodes) untuk membantu mencatat isi HTML tersebut, sama seperti jika anda membuat silsilah pohon keluarga untuk mencata isi dari keluarga anda.
100
+
Ketika *browser* membaca kode di atas, *browser* akan membuat [pohon yang terdiri atas *DOM nodes*](https://javascript.info/dom-nodes) untuk membantu mencatat isi HTML tersebut, sama seperti jika anda membuat silsilah pohon keluarga untuk mencatat isi dari keluarga anda.
101
101
102
102
Bentuk pohon dari *DOM nodes* untuk HTML di atas terlihat seperti:
103
103
104
104

105
105
106
-
Setiap elemen adalah *node*. Setiap teks adalah *node*. BAhkan komentar juga *node*!. Dan sama seperti silsilah keluarga, setiap *node* bisa memiliki anak (misalnya setiap *node* mengandung *node* lainnya).
106
+
Setiap elemen adalah *node*. Setiap teks adalah *node*. Bahkan komentar juga *node*!. Dan sama seperti silsilah keluarga, setiap *node* bisa memiliki anak (misalnya setiap *node* mengandung *node* lainnya).
107
107
108
-
Memperbarui *node* yang banyak ini secara eisien tidaklah mudah, tapi untungnya, anda tidak harus melakukannya secara manual. Sebaliknya, gunakan Vue untuk membuat HTML yang Anda inginkan melalui templat:
108
+
Memperbarui *node* yang banyak ini secara efisien tidaklah mudah, tapi untungnya, anda tidak harus melakukannya secara manual. Sebaliknya, gunakan Vue untuk membuat HTML yang Anda inginkan melalui templat:
109
109
110
110
```html
111
111
<h1>{{ blogTitle }}</h1>
@@ -119,9 +119,9 @@ render: function (createElement) {
119
119
}
120
120
```
121
121
122
-
Dalam kedua kasus, Vue secara otomatis akan memastikan bahwa tampilannya diperbarui dengan benar, seperti ketika `blogTitle` berubah.
122
+
Dalam kedua kasus di atas, Vue secara otomatis akan memastikan bahwa tampilannya diperbarui dengan benar, seperti ketika `blogTitle` berubah.
123
123
124
-
### The Virtual DOM
124
+
### Virtual DOM
125
125
126
126
Vue melakukannya dengan cara membuat **virtual DOM** untuk mencatat perubahan yang dibutuhkan untuk merekonstruksi DOM yang sebenarnya. Lihat baris kode di bawah :
127
127
@@ -133,7 +133,7 @@ Apa yang sebenarnya `createElement` kembalikan? hal itu bukanlah elemen DOM yang
133
133
134
134
## Argumen `createElement`
135
135
136
-
Untuk lebih mendalami bagaimana cara penggunaan fitur templat di fungsi `createElement`, berikut beberapa argumen yang diterima oleh `createElement`:
136
+
Untuk lebih mendalami bagaimana cara penggunaan fitur templat di fungsi `createElement`, berikut beberapa argumen yang dapat diterima oleh `createElement`:
137
137
138
138
```js
139
139
// @returns {VNode}
@@ -360,7 +360,7 @@ render: function (createElement) {
360
360
361
361
Mungkin terasa lebih susah, tapi Anda punya kendali penuh dibandingkan `v-model`.
362
362
363
-
### *Event* & *Key Modifiers*
363
+
### Event & Key Modifiers
364
364
365
365
Untuk modifier event seperti `.passive`, `.capture`, dan `.once`; Vue memberikan prefix yang bisa digunakan dengan `on`:
> Catatan: di versi sebelum 2.3.0, opsi `props` harus ditulis jika Anda ingin komponen fungsional Anda menerima props. Di versi 2.3.0 ke atas, Anda tidak perlu menulis opsi `props` dan semua atribut yang ada di *node* komponen tersebut akan secara otomatis diambil sebagai *props*.
526
526
527
-
Di versi 2.5.0 ke atas, jika Anda menggunakan [kopmonen satu berkas / single-file components](single-file-components.html), komponen fungsional yang menggunakan templat bisa ditulis seperti di bawah:
527
+
Di versi 2.5.0 ke atas, jika Anda menggunakan [komponen satu berkas / single-file components](single-file-components.html), komponen fungsional yang menggunakan templat bisa ditulis seperti di bawah:
528
528
529
529
```html
530
530
<templatefunctional>
@@ -542,11 +542,11 @@ Semua yang dibutuhkan oleh komponen akan diteruskan melalui `context`, sebuah ob
542
542
-`listeners`: (2.3.0+) Objek yang berisi event listener yang didaftarkan oleh komponen di atasnya. Juga sebagai alias untuk `data.on`
543
543
-`injections`: (2.3.0+) jika ada opsi [`inject`](../api/#provide-inject), akan berisi injeksi yang ditemukan/diresolve.
544
544
545
-
Setelah menuliskan `functional: true`, pembaharuan fungsi render dari komponen *anchored heading* yang baru dibuat mengharuskan Anda menambahkan argumen `context`, mengubah `this.$slots.default` menjadi `context.children`, lalu mengubah `this.level` menjadi `context.props.level`.
545
+
Setelah menuliskan `functional: true`, pembaruan fungsi render dari komponen *anchored heading* yang baru dibuat mengharuskan Anda menambahkan argumen `context`, mengubah `this.$slots.default` menjadi `context.children`, lalu mengubah `this.level` menjadi `context.props.level`.
546
546
547
547
Karena komponen fungsional hanya sebuah fungsi saja, mereka lebih cepat untuk dirender. Tetapi, karena tidak adanya instan yang bisa dijadikan acuan, komponen fungsional tidak akan muncul di pohon komponen [Vue devtools](https://github.com/vuejs/vue-devtools).
548
548
549
-
Mereka sangat bermanfaat jika digunakan sebagai komponen pembungkus. Contohnya:
549
+
Komponen fungsional sangat bermanfaat jika digunakan sebagai komponen pembungkus. Contohnya:
550
550
551
551
- Secara program memilih beberapa komponen yang akan didelegasikan
552
552
- Memanipulasi isi, *props*, dan data sebelum meneruskannya ke komponen lain di dalamnya
0 commit comments