Skip to content

Commit a8f782a

Browse files
Multiple fixes untuk section Fungsi Render & JSX (#195)
1 parent 19572c3 commit a8f782a

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

src/v2/guide/render-function.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,15 @@ Sebelum kita lanjut lebih dalam tentang fungsi *render*, penting untuk sedikit m
9797
</div>
9898
```
9999

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.
101101

102102
Bentuk pohon dari *DOM nodes* untuk HTML di atas terlihat seperti:
103103

104104
![Visualisasi pohon *DOM*](/images/dom-tree.png)
105105

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).
107107

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:
109109

110110
```html
111111
<h1>{{ blogTitle }}</h1>
@@ -119,9 +119,9 @@ render: function (createElement) {
119119
}
120120
```
121121

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.
123123

124-
### The Virtual DOM
124+
### Virtual DOM
125125

126126
Vue melakukannya dengan cara membuat **virtual DOM** untuk mencatat perubahan yang dibutuhkan untuk merekonstruksi DOM yang sebenarnya. Lihat baris kode di bawah :
127127

@@ -133,7 +133,7 @@ Apa yang sebenarnya `createElement` kembalikan? hal itu bukanlah elemen DOM yang
133133

134134
## Argumen `createElement`
135135

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`:
137137

138138
``` js
139139
// @returns {VNode}
@@ -360,7 +360,7 @@ render: function (createElement) {
360360

361361
Mungkin terasa lebih susah, tapi Anda punya kendali penuh dibandingkan `v-model`.
362362

363-
### *Event* & *Key Modifiers*
363+
### Event & Key Modifiers
364364

365365
Untuk modifier event seperti `.passive`, `.capture`, dan `.once`; Vue memberikan prefix yang bisa digunakan dengan `on`:
366366

@@ -524,7 +524,7 @@ Vue.component('my-component', {
524524

525525
> 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*.
526526
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:
528528

529529
``` html
530530
<template functional>
@@ -542,11 +542,11 @@ Semua yang dibutuhkan oleh komponen akan diteruskan melalui `context`, sebuah ob
542542
- `listeners`: (2.3.0+) Objek yang berisi event listener yang didaftarkan oleh komponen di atasnya. Juga sebagai alias untuk `data.on`
543543
- `injections`: (2.3.0+) jika ada opsi [`inject`](../api/#provide-inject), akan berisi injeksi yang ditemukan/diresolve.
544544

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`.
546546

547547
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).
548548

549-
Mereka sangat bermanfaat jika digunakan sebagai komponen pembungkus. Contohnya:
549+
Komponen fungsional sangat bermanfaat jika digunakan sebagai komponen pembungkus. Contohnya:
550550

551551
- Secara program memilih beberapa komponen yang akan didelegasikan
552552
- Memanipulasi isi, *props*, dan data sebelum meneruskannya ke komponen lain di dalamnya

0 commit comments

Comments
 (0)