-
Full Name:
+
Tagihan
+
-
Submit
+
Kirim
```
-You can see the description by inspecting Chrome DevTools:
+Kamu dapat melihat deskripsinya dengan memeriksa Alat Pengembang Chrome:
-
+
### Placeholder
-Avoid using placeholders as they can confuse many users.
+Hindari menggunakan placeholder karena dapat membingunkan banyak pengguna.
-One of the issues with placeholders is that they don't meet the [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) by default; fixing the color contrast makes the placeholder look like pre-populated data in the input fields. Looking at the following example, you can see that the Last Name placeholder which meets the color contrast criteria looks like pre-populated data:
+Salah satu masalah placeholder adalah mereka tidak memenuhi [kriteria kontras warna](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) secara default; memperbaiki kontras warna membuat placeholder terlihat seperti data yang sudah terisi sebelumnya di bidang masukan. Melihat pada contoh berikut, kamu dapat melihat bahwa placeholder _Last Name_ yang memenuhi kriteria kontras warna tampak seperti data yang sudah terisi sebelumnya:
-It is best to provide all the information the user needs to fill out forms outside any inputs.
+Cara terbaik adalah memberikan semua informasi yang dibutuhkan pengguna untuk mengisi formulir di luar masukan apapun.
-### Instructions
+### Instruksi
-When adding instructions for your input fields, make sure to link it correctly to the input.
-You can provide additional instructions and bind multiple ids inside an [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute). This allows for more flexible design.
+Saat menambahkan instruksi untuk bidang masukan kamu, pastikan untuk menyambungkannya kapada masukan.
+Kamu dapat memberikan petunjuk tambahan dan _bind_ beberapa id ke dalam suatu [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute). Ini memungkinkan desain yang lebih fleksibel.
```html
- Using aria-labelledby
- Current Date:
+ Menggunakan aria-labelledby
+ Tanggal Sekarang:
- MM/DD/YYYY
+ MM/DD/YYYY
```
-Alternatively, you can attach the instructions to the input with [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute):
+Selain itu, kamu juga dapat melampirkan petunjuk ke masukan dengan [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute):
```html
- Using aria-describedby
- Date of Birth:
-
- MM/DD/YYYY
+ Menggunakan aria-describedby
+ Tanggal Lahir:
+
+ MM/DD/YYYY
```
-### Hiding Content
+### Menyembunyikan Konten
-Usually it is not recommended to visually hide labels, even if the input has an accessible name. However, if the functionality of the input can be understood with surrounding content, then we can hide the visual label.
+Biasanya tidak disarankan untuk menyembunyikan label secara visual, meskipun masukan memiliki nama yang dapat diakses. Namun, jika fungsionalitas masukan dapat dipahami dengan konten di sekitarnya, maka kita dapat menyembunyikan label secara visual.
-Let's look at this search field:
+Mari kita lihat bidang pencarian ini:
```html
```
-We can do this because the search button will help visual users identify the purpose of the input field.
+Kita dapat melakukan ini karena tombol pencarian akan membantu pengguna dengan kemampuan visual untuk mengidentifikasi maksud dari bidang input tersebut.
-We can use CSS to visually hide elements but keep them available for assistive technology:
+Kita dapat menggunakan CSS untuk menyembunyikan elemen secara visual tetapi membuatnya tetap tersedia untuk teknologi pendukung:
```css
-.hidden-visually {
+.disembunyikan-secara-visual {
position: absolute;
overflow: hidden;
white-space: nowrap;
@@ -216,62 +216,67 @@ We can use CSS to visually hide elements but keep them available for assistive t
#### aria-hidden="true"
-Adding `aria-hidden="true"` will hide the element from assistive technology but leave it visually available for other users. Do not use it on focusable elements, purely on decorative, duplicated or offscreen content.
+Menambahkan `aria-hidden="true"` akan menyembunyikan elemen dari teknologi pendukung tetapi membiarkannya tersedia secara visual kepada pengguna lain. Jangan gunakan pada elemen yang dapat difokuskan, gunakanlah hanya pada elemen dekoratif, duplikat, atau konten rahasia.
```html
-
This is not hidden from screen readers.
-
This is hidden from screen readers.
+
Ini tidak tersembunyi dari pembaca layar.
+
Ini tersembunyi dari pembaca layar.
```
-### Buttons
+### Tombol
-When using buttons inside a form, you must set the type to prevent submitting the form.
-You can also use an input to create buttons:
+Saat menggunakan tombol di dalam formulir, kamu dapat mengatur jenis untuk mencegah pengiriman formulir.
+Kamu juga dapat menggunakan masukan untuk membuat tombol:
```html
-
```
-#### Functional Images
+#### Gambar Fungsional
-You can use this technique to create functional images.
+Kamu dapat menggunakan teknik ini untuk membuat gambar fungsional.
-- Input fields
+- Bidang masukan
- - These images will act as a submit type button on forms
+ - Gambar-gambar ini akan berperan sebagai tombol dengan tipe kirim pada formulir
```html
```
-- Icons
+- Ikon
```html
```
diff --git a/src/guide/a11y-standards.md b/src/guide/a11y-standards.md
index ae5fe7e2b5..c4d3244f0c 100644
--- a/src/guide/a11y-standards.md
+++ b/src/guide/a11y-standards.md
@@ -1,32 +1,32 @@
-# Standards
+# Standar
-The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) develops web accessibility standards for the different components:
+Inisiatif Aksesibilitas Web (Web Accessibility Initiative atau WAI) World Wide Web Consortium (W3C) mengembangkan standar aksesibilitas web untuk berbagai komponen:
- [User Agent Accessibility Guidelines (UAAG)](https://www.w3.org/WAI/standards-guidelines/uaag/)
- - web browsers and media players, including some aspects of assistive technologies
+ - peramban web dan pemutar media, termasuk beberapa aspek teknologi pendukung
- [Authoring Tool Accessibility Guidelines (ATAG)](https://www.w3.org/WAI/standards-guidelines/atag/)
- - authoring tools
+ - alat penulisan
- [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/)
- - web content - used by developers, authoring tools, and accessibility evaluation tools
+ - konten web - digunakan oleh pengembang, alat pembuatan, dan alat evaluasi aksesibilitas
-## Web Content Accessibility Guidelines (WCAG)
+## Panduan Aksesibilitas Konten Web (Web Content Accessibility Guidelines atau WCAG)
-[WCAG 2.1](https://www.w3.org/TR/WCAG21/) extends on [WCAG 2.0](https://www.w3.org/TR/WCAG20/) and allows implementation of new technologies by addressing changes to the web. The W3C encourages use of the most current version of WCAG when developing or updating Web accessibility policies.
+[WCAG 2.1](https://www.w3.org/TR/WCAG21/) meluas dari [WCAG 2.0](https://www.w3.org/TR/WCAG20/) dan memungkinkan penerapan teknologi baru dengan menangani perubahan ke web. W3C mendorong penggunaan versi terbaru WCAG saat mengembangkan atau memperbarui kebijakan aksesibilitas web.
-### WCAG 2.1 Four Main Guiding Principles (abbreviated as POUR):
+### Empat Prinsip Panduan Utama WCAG 2.1 (disingkat dengan POUR):
-- [Perceivable](https://www.w3.org/TR/WCAG21/#perceivable)
- - Users must be able to perceive the information being presented
-- [Operable](https://www.w3.org/TR/WCAG21/#operable)
- - Interface forms, controls, and navigation are operable
-- [Understandable](https://www.w3.org/TR/WCAG21/#understandable)
- - Information and the operation of user interface must be understandable to all users
-- [Robust](https://www.w3.org/TR/WCAG21/#robust)
- - Users must be able to access the content as technologies advance
+- [Dapat Dilihat (Perceivable)](https://www.w3.org/TR/WCAG21/#perceivable)
+ - Pengguna harus dapat melihat informasi yang disajikan
+- [Dapat Dioperasikan (Operable)](https://www.w3.org/TR/WCAG21/#operable)
+ - Bentuk antar muka, kontrol, dan navigasi dapat dioperasikan
+- [Dapat Dimengerti (Understandable)](https://www.w3.org/TR/WCAG21/#understandable)
+ - Informasi dan pengoperasian antarmuka pengguna harus dapat dimengerti oleh semua pengguna
+- [Kuat (Robust)](https://www.w3.org/TR/WCAG21/#robust)
+ - Pengguna harus dapat mengakses konten seiring kemajuan teknologi
-### Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA)
+### Inisiatif Aksesibilitas Web - Aplikasi Kaya Internet yang Dapat Diakses (WAI-ARIA)
-W3C's WAI-ARIA provides guidance on how to build dynamic content and advanced user interface controls.
+WAI-ARIA W3C memberikan panduan tentang cara membuat konten dinamis dan kontrol antarmuka pengguna tingkat lanjut.
- [Accessible Rich Internet Applications (WAI-ARIA) 1.2](https://www.w3.org/TR/wai-aria-1.2/)
- [WAI-ARIA Authoring Practices 1.2](https://www.w3.org/TR/wai-aria-practices-1.2/)
diff --git a/src/guide/change-detection.md b/src/guide/change-detection.md
index c7a66ae9cf..e89a6e4aa6 100644
--- a/src/guide/change-detection.md
+++ b/src/guide/change-detection.md
@@ -1,12 +1,12 @@
-# Change Detection Caveats in Vue 2
+# Peringatan Deteksi Perubahan di Vue 2
-> This page applies only to Vue 2.x and below, and assumes you've already read the [Reactivity Section](reactivity.md). Please read that section first.
+> Halaman ini hanya berlaku untuk Vue 2.x dan di bawahnya, dan mengasumsikan kamu telah membaca [Bagian Reaktivitas](reactivity.md). Silakan baca bagian itu dulu.
-Due to limitations in JavaScript, there are types of changes that Vue **cannot detect**. However, there are ways to circumvent them to preserve reactivity.
+Karena keterbatasan pada JavaScript, ada beberapa jenis perubahan **yang tidak dapat dideteksi** oleh Vue. Namun, ada beberapa cara untuk mengakali untuk menjaga reaktivitas.
-### For Objects
+### Untuk Objek
-Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the `data` object in order for Vue to convert it and make it reactive. For example:
+Vue tidak dapat mendeteksi penambahan atau penghapusan properti. Karena Vue melakukan proses konversi pengambil/penyetel selama inisialisasi _instance_, properti harus ada di objek `data` agar Vue dapat mengubahnya dan membuatnya reaktif. Sebagai contoh:
```js
var vm = new Vue({
@@ -14,149 +14,149 @@ var vm = new Vue({
a: 1
}
})
-// `vm.a` is now reactive
+// `vm.a` sekarang menjadi reaktif
vm.b = 2
-// `vm.b` is NOT reactive
+// `vm.b` TIDAK reaktif
```
-Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it's possible to add reactive properties to a nested object using the `Vue.set(object, propertyName, value)` method:
+Vue tidak mengizinkan penambahan properti reaktif level root baru secara dinamis ke dalam _instance_ yang sudah dibuat. Namun, memungkinkan untuk menambahkan properti reaktif ke objek bersarang menggunakan metode `Vue.set(object, propertyName, value)`:
```js
-Vue.set(vm.someObject, 'b', 2)
+Vue.set(vm.suatuObjek, 'b', 2)
```
-You can also use the `vm.$set` instance method, which is an alias to the global `Vue.set`:
+Kamu juga dapat menggunakan metode _instance_ `vm.$set`, yang merupakan alias untuk `Vue.set` global:
```js
-this.$set(this.someObject, 'b', 2)
+this.$set(this.suatuObjek, 'b', 2)
```
-Sometimes you may want to assign a number of properties to an existing object, for example using `Object.assign()` or `_.extend()`. However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:
+Terkadang kamu mungkin ingin menetapkan sejumlah properti ke objek yang sudah ada, misalnya menggunakan `Object.assign ()` atau `_.extend ()`. Namun, properti baru yang ditambahkan ke objek tidak akan memicu perubahan. Dalam kasus seperti itu, buat objek baru dengan properti dari objek asli dan objek _mixin_:
```js
-// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
-this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
+// Daripada `Object.assign(this.suatuObjek, { a: 1, b: 2 })`
+this.suatuObjek = Object.assign({}, this.suatuObjek, { a: 1, b: 2 })
```
-### For Arrays
+### Untuk Array
-Vue cannot detect the following changes to an array:
+Vue tidak dapat mendeteksi perubahan berikut pada sebuah array:
-1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue`
-2. When you modify the length of the array, e.g. `vm.items.length = newLength`
+1. Ketika kamu langsung mengatur item dengan indeks, contoh: `vm.item[indeksItem] = nilaiBaru`
+2. Ketika kamu mengubah panjang array, contoh: `vm.item.length = panjangBaru`
-For example:
+Sebagai contoh:
```js
var vm = new Vue({
data: {
- items: ['a', 'b', 'c']
+ item: ['a', 'b', 'c']
}
})
-vm.items[1] = 'x' // is NOT reactive
-vm.items.length = 2 // is NOT reactive
+vm.item[1] = 'x' // TIDAK reaktif
+vm.item.length = 2 // TIDAK reaktif
```
-To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system:
+Untuk mengatasi peringatan 1, kedua hal berikut ini akan melakukan hal yang sama seperti `vm.item[indeksItem] = nilaiBaru`, tetapi juga akan memicu pembaruan status dalam sistem reaktivitas:
```js
// Vue.set
-Vue.set(vm.items, indexOfItem, newValue)
+Vue.set(vm.item, indeksItem, nilaiBaru)
```
```js
// Array.prototype.splice
-vm.items.splice(indexOfItem, 1, newValue)
+vm.item.splice(indeksItem, 1, nilaiBaru)
```
-You can also use the [`vm.$set`](https://vuejs.org/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`:
+Kamu juga dapat menggunakan metode _instance_ [`vm.$Set`](https://vuejs.org/v2/api/#vm-set), yang merupakan alias untuk `Vue.set` global:
```js
-vm.$set(vm.items, indexOfItem, newValue)
+vm.$set(vm.item, indeksItem, nilaiBaru)
```
-To deal with caveat 2, you can use `splice`:
+Untuk menangani peringatan 2, kamu dapat menggunakan `splice`:
```js
-vm.items.splice(newLength)
+vm.item.splice(panjangBaru)
```
-## Declaring Reactive Properties
+## Mendeklarasikan Properti-Properti Reaktif
-Since Vue doesn't allow dynamically adding root-level reactive properties, you have to initialize component instances by declaring all root-level reactive data properties upfront, even with an empty value:
+Karena Vue tidak mengizinkan penambahan properti reaktif level root secara dinamis, kamu harus menginisialisasi _instance_ komponen dengan mendeklarasikan semua properti data reaktif level root di awal, bahkan dengan nilai kosong:
```js
var vm = new Vue({
data: {
- // declare message with an empty value
- message: ''
+ //
+ pesan: ''
},
- template: '
{{ message }}
'
+ template: '
{{ pesan }}
'
})
-// set `message` later
-vm.message = 'Hello!'
+// set `pesan` nanti
+vm.pesan = 'Halo!'
```
-If you don't declare `message` in the data option, Vue will warn you that the render function is trying to access a property that doesn't exist.
+Jika kamu tidak mendeklarasikan `pesan` dalam opsi data, Vue akan memperingatkanmu bahwa fungsi render mencoba mengakses properti yang tidak ada.
-There are technical reasons behind this restriction - it eliminates a class of edge cases in the dependency tracking system, and also makes component instances play nicer with type checking systems. But there is also an important consideration in terms of code maintainability: the `data` object is like the schema for your component's state. Declaring all reactive properties upfront makes the component code easier to understand when revisited later or read by another developer.
+Ada alasan teknis di balik pembatasan tersebut - ini menghilangkan kelas kasus tepi dalam sistem pelacakan ketergantungan (_dependency tracking system_), dan juga membuat _instance_ komponen bermain lebih baik dengan sistem pemeriksaan tipe. Namun ada juga pertimbangan penting dalam hal pemeliharaan kode: objek `data` seperti skema untuk status komponenmu. Mendeklarasikan semua properti reaktif di awal membuat kode komponen lebih mudah dipahami saat dikunjungi kembali nanti atau dibaca oleh pengembang lain.
## Async Update Queue
-In case you haven't noticed yet, Vue performs DOM updates **asynchronously**. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop "tick", Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native `Promise.then`, `MutationObserver`, and `setImmediate` for the asynchronous queuing and falls back to `setTimeout(fn, 0)`.
+Jika kamu belum menyadarinya, Vue melakukan pembaruan DOM **secara asinkron**. Setiap kali perubahan data diamati, itu akan membuka antrian dan menyangga semua perubahan data yang terjadi pada _event loop_ yang sama. Jika _watcher_ yang sama dipicu beberapa kali, maka akan didorong ke antrean hanya sekali. De-duplikasi yang disangga ini penting untuk menghindari penghitungan yang tidak perlu dan manipulasi DOM. Kemudian, di _event loop_ berikutnya "_tick_", Vue membersihkan antrian dan melakukan pekerjaan yang sebenarnya. Secara internal Vue mencoba _native_ `Promise.then`,`MutationObserver`, dan `setImmediate` untuk antrian asinkron dan _fallback_ ke `setTimeout(fn, 0)`.
-For example, when you set `vm.someData = 'new value'`, the component will not re-render immediately. It will update in the next "tick", when the queue is flushed. Most of the time we don't need to care about this, but it can be tricky when you want to do something that depends on the post-update DOM state. Although Vue.js generally encourages developers to think in a "data-driven" fashion and avoid touching the DOM directly, sometimes it might be necessary to get your hands dirty. In order to wait until Vue.js has finished updating the DOM after a data change, you can use `Vue.nextTick(callback)` immediately after the data is changed. The callback will be called after the DOM has been updated. For example:
+Misalnya, saat kamu menyetel `vm.suatuData = 'nilai baru'`, komponen tidak akan langsung dirender ulang. Ini akan diperbarui di "_tick_" berikutnya ketika antrian dibilas. Seringkali kita tidak perlu mempedulikan hal ini, tetapi ini bisa menjadi rumit ketika kamu ingin melakukan sesuatu yang bergantung pada status DOM pasca-pembaruan. Meskipun Vue.js umumnya mendorong pengembang untuk berpikir dengan cara "berdasarkan data" dan menghindari menyentuh DOM secara langsung, terkadang kamu mungkin perlu mengotori tanganmu. Untuk menunggu hingga Vue.js selesai memperbarui DOM setelah perubahan data, kamu dapat menggunakan `Vue.nextTick(callback)` segera setelah data diubah. _Callback_ akan dipanggil setelah DOM diperbarui. Sebagai contoh:
```html
-
{{ message }}
+
{{ pesan }}
```
```js
var vm = new Vue({
- el: '#example',
+ el: '#contoh',
data: {
- message: '123'
+ pesan: '123'
}
})
-vm.message = 'new message' // change data
-vm.$el.textContent === 'new message' // false
+vm.pesan = 'pesan baru' // ubah data
+vm.$el.textContent === 'pesan baru' // salah
Vue.nextTick(function() {
- vm.$el.textContent === 'new message' // true
+ vm.$el.textContent === 'pesan baru' // benar
})
```
-There is also the `vm.$nextTick()` instance method, which is especially handy inside components, because it doesn't need global `Vue` and its callback's `this` context will be automatically bound to the current component instance:
+Ada juga metode _instance_ `vm.$nextTick()`, yang sangat berguna di dalam komponen, karena tidak memerlukan `Vue` global dan konteks`this` callbacknya akan otomatis terikat ke instance komponen saat ini:
```js
-Vue.component('example', {
- template: '
{{ message }} ',
+Vue.component('contoh', {
+ template: '
{{ pesan }} ',
data: function() {
return {
- message: 'not updated'
+ pesan: 'belum terubah'
}
},
methods: {
- updateMessage: function() {
- this.message = 'updated'
- console.log(this.$el.textContent) // => 'not updated'
+ ubahPesan: function() {
+ this.pesan = 'sudah terubah'
+ console.log(this.$el.textContent) // => 'belum terubah'
this.$nextTick(function() {
- console.log(this.$el.textContent) // => 'updated'
+ console.log(this.$el.textContent) // => 'sudah terubah'
})
}
}
})
```
-Since `$nextTick()` returns a promise, you can achieve the same as the above using the new [ES2017 async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) syntax:
+Karena `$nextTick()` mengembalikan sebuah _promise_, kamu dapat mencapai hal yang sama seperti di atas menggunakan [ES2017 async/await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) sintaks:
```js
methods: {
- updateMessage: async function () {
- this.message = 'updated'
- console.log(this.$el.textContent) // => 'not updated'
+ ubahPesan: async function () {
+ this.pesan = 'sudah terubah'
+ console.log(this.$el.textContent) // => 'belum terubah'
await this.$nextTick()
- console.log(this.$el.textContent) // => 'updated'
+ console.log(this.$el.textContent) // => 'sudah terubah'
}
}
```
diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index dd6dbd9af9..df7863ec08 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -1,21 +1,22 @@
-# Class and Style Bindings
+# _Binding_ Class dan Style
-A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we only need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue provides special enhancements when `v-bind` is used with `class` and `style`. In addition to strings, the expressions can also evaluate to objects or arrays.
+Kebutuhan umum untuk _binding_ data adalah memanipulasi daftar elemen _class_ dan _style_ sebarisnya (_inline styles_). Karena keduanya adalah atribut, kita dapat menggunakan `v-bind` untuk menanganinya: kita hanya perlu menghitung string terakhir dengan ekspresi kita. Namun, berurusan dengan penggabungan string mengjengkelkan dan rawan kesalahan. Karena alasan ini, Vue menyediakan penyempurnaan khusus ketika `v-bind` digunakan dengan `class` dan `style`. Selain string, ekspresi juga dapat dievaluasi menjadi objek atau array.
-## Binding HTML Classes
-
Watch a free video lesson on Vue School
+## _Binding_ Kelas HTML
-### Object Syntax
+
Lihat video tutorial gratis dari Vue School
-We can pass an object to `:class` (short for `v-bind:class`) to dynamically toggle classes:
+### Sintaksis Objek
+
+Kita bisa melewatkan objek ke `:class` (kependekan dari `v-bind:class`) untuk mengubah _class_ secara dinamis:
```html
```
-The above syntax means the presence of the `active` class will be determined by the [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) of the data property `isActive`.
+Sintaksis di atas berarti keberadaan _class_ `active` akan ditentukan oleh nalai [_truthy_](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) properti data `isActive`.
-You can have multiple classes toggled by having more fields in the object. In addition, the `:class` directive can also co-exist with the plain `class` attribute. So given the following template:
+Anda dapat memiliki beberapa _class_ di-_toggle_ dengan memiliki lebih banyak properti di objek. Selain itu, direktif `:class` juga bisa berdampingan dengan atribut `class` biasa. Misalnya templat berikut:
```html
```
-And the following data:
+Dan data berikut:
```js
data() {
@@ -35,15 +36,15 @@ data() {
}
```
-It will render:
+Kode tersebut akan me-_render_:
```html
```
-When `isActive` or `hasError` changes, the class list will be updated accordingly. For example, if `hasError` becomes `true`, the class list will become `"static active text-danger"`.
+Ketika `isActive` atau `hasError` berubah, daftar _class_ akan diperbarui juga. Misalnya, jika `hasError` menjadi`true`, daftar _class_ akan menjadi `"static active text-danger"`.
-The bound object doesn't have to be inline:
+Objek yang di-_bind_ tidak harus diletakkan secara sebaris (_inline_):
```html
@@ -60,7 +61,7 @@ data() {
}
```
-This will render the same result. We can also bind to a [computed property](computed.md) that returns an object. This is a common and powerful pattern:
+Kode tersebut akan memberikan hasil yang sama. Kita juga bisa melakukan _binding_ ke [properti terkomputasi](computed.md) yang mengembalikan objek. Cara tersebut adalah pola yang umum dan manjur:
```html
@@ -76,57 +77,57 @@ data() {
computed: {
classObject() {
return {
- active: this.isActive && !this.error,
+ aktif: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
```
-### Array Syntax
+### Sintaksis Array
-We can pass an array to `:class` to apply a list of classes:
+Kita bisa memasukkan array ke dalam `:class` untuk menerapkan daftar _class_:
```html
-
+
```
```js
data() {
return {
- activeClass: 'active',
+ isActive: 'active',
errorClass: 'text-danger'
}
}
```
-Which will render:
+Yang akan me-_render_:
```html
```
-If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
+Jika Anda juga ingin mengubah _class_ dalam daftar dengan kondisi tertentu, Anda dapat melakukannya dengan ekspresi _ternary_:
```html
-
+
```
-This will always apply `errorClass`, but `activeClass` will only be applied when `isActive` is truthy.
+Kode tersebut akan selalu menerapkan `errorClass`, dan hanya akan menerapkan `isActive` jika `isActive` bernilai _truthy_[[1]](#footnote-1).
-However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
+Namun, cara tersebut bisa cukup bertele-tele jika Anda memiliki beberapa _class_ dengan kondisinya masing-masing. Oleh karena itu, memungkinkan juga untuk menggunakan sintaksis objek di dalam sintaksis array:
```html
```
-### With Components
+### Dengan Komponen
-> This section assumes knowledge of [Vue Components](component-basics.md). Feel free to skip it and come back later.
+> Bagian ini mengasumsikan pengetahuan tentang [Vue Components](component-basics.md). Jangan ragu untuk melewatinya dan kembali lagi nanti.
-When you use the `class` attribute on a custom component with a single root element, those classes will be added to this element. Existing classes on this element will not be overwritten.
+Saat Anda menggunakan atribut `class` pada komponen buatan sendiri (_custom component_) dengan satu elemen _root_, _class_ tersebut akan ditambahkan ke elemen tersebut. Kelas yang ada pada elemen tersebut tidak akan ditimpa.
-For example, if you declare this component:
+Misalnya, jika Anda mendeklarasikan komponen berikut:
```js
const app = Vue.createApp({})
@@ -136,7 +137,7 @@ app.component('my-component', {
})
```
-Then add some classes when using it:
+Kemudian tambahkan beberapa _class_ saat menggunakannya:
```html
@@ -144,25 +145,25 @@ Then add some classes when using it:
```
-The rendered HTML will be:
+HTML yang di-_render_ akan menjadi:
```html
Hi
```
-The same is true for class bindings:
+Hal yang sama berlaku untuk _binding_ _class_:
```html
```
-When `isActive` is truthy, the rendered HTML will be:
+Jika `isActive` bernilai _truthy_, HTML yang di-_render_ akan menjadi:
```html
Hi
```
-If your component has multiple root elements, you would need to define which component will receive this class. You can do this using `$attrs` component property:
+Jika komponen Anda memiliki beberapa elemen _root_, Anda perlu menentukan komponen mana yang akan menerima _class_ ini. Anda juga dapat melakukannya dengan menggunakan properti `$attrs` pada komponen:
```html
@@ -181,13 +182,13 @@ app.component('my-component', {
})
```
-You can learn more about component attribute inheritance in [Non-Prop Attributes](component-attrs.html) section.
+Anda dapat mempelajari lebih lanjut tentang pewarisan atribut komponen pada bagian [Atribut Non-Properti](komponen-attrs.html).
-## Binding Inline Styles
+## _Binding_ _Style_ Sebaris (_Inline_)
-### Object Syntax
+### Sintaksos Objek
-The object syntax for `:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names:
+Sintaksis objek untuk `:style` cukup mudah - terlihat hampir seperti CSS, kecuali itu adalah objek JavaScript. Anda dapat menggunakan camelCase atau kebab-case (gunakan tanda kutip dengan kebab-case) untuk nama properti CSS:
```html
@@ -202,7 +203,7 @@ data() {
}
```
-It is often a good idea to bind to a style object directly so that the template is cleaner:
+Seringkali cara tersebut adalah cara yang baik untuk me-_bind_ objek _style_ secara langsung agar templatnya lebih bersih:
```html
@@ -212,33 +213,36 @@ It is often a good idea to bind to a style object directly so that the template
data() {
return {
styleObject: {
- color: 'red',
+ activeColor: 'red',
fontSize: '13px'
}
}
}
```
-Again, the object syntax is often used in conjunction with computed properties that return objects.
+Sekali lagi, sintaksis objek sering digunakan bersama dengan properti komputasi yang mengembalikan objek.
-### Array Syntax
+### Sintaksis Array
-The array syntax for `:style` allows you to apply multiple style objects to the same element:
+Sintaksis array untuk `:style` memungkinkan Anda menerapkan beberapa objek _style_ ke elemen yang sama:
```html
```
-### Auto-prefixing
-
-When you use a CSS property that requires a [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `:style`, Vue will automatically add the appropriate prefix. Vue does this by checking at runtime to see which style properties are supported in the current browser. If the browser doesn't support a particular property then various prefixed variants will be tested to try to find one that is supported.
+### Memberi Awalan Secara Otomatis
-### Multiple Values
+Saat Anda menggunakan properti CSS yang membutuhkan [awalan vendor](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) pada `:style`, misalnya `transform`, Vue akan secara otomatis mendeteksi dan tambahkan prefiks yang sesuai ke _style_ yang diterapkan. Vue melakukan ini dengan cara mengecek pada saat _runtime_ properti _style_ manakah yang didukung oleh peramban. Jika peramban tidak mendukung properti tersebut maka macam - macam prefiks dengan varian akan di test satu - persatu untuk menememukan properti yang di support peramban tersebut.
+### Beberapa Nilai
-You can provide an array of multiple (prefixed) values to a style property, for example:
+Anda dapat memberikan sebuah array dengan beberapa nilai (awalan) ke properti _style_, misalnya:
```html
```
-This will only render the last value in the array which the browser supports. In this example, it will render `display: flex` for browsers that support the unprefixed version of flexbox.
+Kode tersebut hanya akan me-_render_ nilai terakhir dalam array yang didukung peramban. Dalam kasus ini, contoh tersebut akan me-_render_ `display: flex` untuk peramban yang mendukung versi flexbox yang tidak memiliki awalan.
+
+
**Catatan penerjemah**:
+
+
[1] _Truthy_ bukanlah bernilai `true`, silahkan memembaca [Mozilla Developer Network - Truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) untuk penjelasan lebih lanjut.
diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md
index 3f916a04c6..a4dd3e620c 100644
--- a/src/guide/component-attrs.md
+++ b/src/guide/component-attrs.md
@@ -2,7 +2,7 @@
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
-A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes. You can access those attributes via `$attrs` property.
+A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props.html) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes. You can access those attributes via `$attrs` property.
## Attribute Inheritance
@@ -18,7 +18,7 @@ app.component('date-picker', {
})
```
-In the event we need to define the status of the date-picker component via a `data-status` property, it will be applied to the root node (i.e., `div.date-picker`).
+In the event we need to define the status of the date-picker component via a `data-status` attribute, it will be applied to the root node (i.e., `div.date-picker`).
```html
diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md
index fa9f4312dc..9d647f4c71 100644
--- a/src/guide/component-basics.md
+++ b/src/guide/component-basics.md
@@ -1,5 +1,7 @@
# Components Basics
+
Learn component basics with a free video course on Vue School
+
## Base Example
Here's an example of a Vue component:
diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md
index f1b40e5b7b..4b91982257 100644
--- a/src/guide/component-custom-events.md
+++ b/src/guide/component-custom-events.md
@@ -4,7 +4,7 @@
## Event Names
-Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent:
+Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camelCase, you will be able to add a kebab-cased listener in the parent:
```js
this.$emit('myEvent')
@@ -89,9 +89,6 @@ app.component('my-component', {
})
```
-```html
-
-```
## Multiple `v-model` bindings
diff --git a/src/guide/component-props.md b/src/guide/component-props.md
index e8d2ee60dc..c38a42dad2 100644
--- a/src/guide/component-props.md
+++ b/src/guide/component-props.md
@@ -2,6 +2,8 @@
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
+
Learn how component props work with a free lesson on Vue School
+
## Prop Types
So far, we've only seen props listed as an array of strings:
@@ -61,6 +63,7 @@ In the two examples above, we happen to pass string values, but _any_ type of va
```html
+
diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md
index dcf966dc95..54ef54fc4b 100644
--- a/src/guide/component-provide-inject.md
+++ b/src/guide/component-provide-inject.md
@@ -67,7 +67,7 @@ app.component('todo-list', {
})
```
-To access component instance properties, we need to convert `provide` to be a function returning an object
+To access component instance properties, we need to convert `provide` to be a function returning an object:
```js
app.component('todo-list', {
diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md
index 09a7b50990..d7c17eb642 100644
--- a/src/guide/component-registration.md
+++ b/src/guide/component-registration.md
@@ -1,5 +1,7 @@
# Component Registration
+
Learn how component registration works with a free lesson on Vue School
+
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
## Component Names
@@ -27,7 +29,7 @@ You can see other recommendations for component names in the [Style Guide](../st
### Name Casing
-When defining components in a string template or a single-file component, you have two options when defining component names:
+When defining components in a string template or a single-file component, you have two options for naming them:
#### With kebab-case
diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md
index 154d4f8a8d..ed3daa2b32 100644
--- a/src/guide/component-slots.md
+++ b/src/guide/component-slots.md
@@ -2,6 +2,8 @@
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
+
Learn slot basics with a free lesson on Vue School
+
## Slot Content
Vue implements a content distribution API inspired by the [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `
` element to serve as distribution outlets for content.
@@ -90,7 +92,7 @@ The slot does **not** have access to ``'s scope. For example, tryin
Clicking here will {{ action }} an item
@@ -222,7 +224,7 @@ The rendered HTML will be:
```
-Note that **`v-slot` can only be added to a `
`** (with [one exception](#abbreviated-syntax-for-lone-default-slots))
+Note that **`v-slot` can only be added to a ``** (with [one exception](#abbreviated-syntax-for-lone-default-slots)).
## Scoped Slots
diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md
index ad771308b0..695cc9cacb 100644
--- a/src/guide/composition-api-introduction.md
+++ b/src/guide/composition-api-introduction.md
@@ -320,7 +320,7 @@ import { ref, onMounted, watch, toRefs } from 'vue'
// in our component
setup (props) {
- // using `toRefs` to create a Reactive Reference to the `user` property of props
+ // using `toRefs` to create a Reactive Reference to the `user` property of `props`
const { user } = toRefs(props)
const repositories = ref([])
diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md
index 9745620b24..793a8825fa 100644
--- a/src/guide/composition-api-lifecycle-hooks.md
+++ b/src/guide/composition-api-lifecycle-hooks.md
@@ -1,5 +1,7 @@
# Lifecycle Hooks
+> This section uses [single-file component](single-file-component.html) syntax for code examples
+
> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
Watch a free video about Lifecycle Hooks on Vue Mastery
diff --git a/src/guide/composition-api-provide-inject.md b/src/guide/composition-api-provide-inject.md
index 8be3d50b97..e5913234ae 100644
--- a/src/guide/composition-api-provide-inject.md
+++ b/src/guide/composition-api-provide-inject.md
@@ -1,5 +1,7 @@
# Provide / Inject
+> This section uses [single-file component](single-file-component.html) syntax for code examples
+
> This guide assumes that you have already read [Provide / Inject](component-provide-inject.html), [Composition API Introduction](composition-api-introduction.html), and [Reactivity Fundamentals](reactivity-fundamentals.html).
We can use [provide / inject](component-provide-inject.html) with the Composition API as well. Both can only be called during [`setup()`](composition-api-setup.html) with a current active instance.
diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md
index e9312fae08..1e113308c8 100644
--- a/src/guide/composition-api-setup.md
+++ b/src/guide/composition-api-setup.md
@@ -64,21 +64,24 @@ setup(props) {
### Context
-The second argument passed to the `setup` function is the `context`. The `context` is a normal JavaScript object that exposes three component properties:
+The second argument passed to the `setup` function is the `context`. The `context` is a normal JavaScript object that exposes other values that may be useful inside `setup`:
```js
// MyBook.vue
export default {
setup(props, context) {
- // Attributes (Non-reactive object)
+ // Attributes (Non-reactive object, equivalent to $attrs)
console.log(context.attrs)
- // Slots (Non-reactive object)
+ // Slots (Non-reactive object, equivalent to $slots)
console.log(context.slots)
- // Emit Events (Method)
+ // Emit events (Function, equivalent to $emit)
console.log(context.emit)
+
+ // Expose public properties (Function)
+ console.log(context.expose)
}
}
```
@@ -88,13 +91,15 @@ The `context` object is a normal JavaScript object, i.e., it is not reactive, th
```js
// MyBook.vue
export default {
- setup(props, { attrs, slots, emit }) {
+ setup(props, { attrs, slots, emit, expose }) {
...
}
}
```
-`attrs` and `slots` are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x` or `slots.x`. Also note that unlike `props`, `attrs` and `slots` are **not** reactive. If you intend to apply side effects based on `attrs` or `slots` changes, you should do so inside an `onUpdated` lifecycle hook.
+`attrs` and `slots` are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x` or `slots.x`. Also note that, unlike `props`, the properties of `attrs` and `slots` are **not** reactive. If you intend to apply side effects based on changes to `attrs` or `slots`, you should do so inside an `onBeforeUpdate` lifecycle hook.
+
+We'll explain the role of `expose` shortly.
## Accessing Component Properties
@@ -110,6 +115,7 @@ In other words, you **will not have access** to the following component options:
- `data`
- `computed`
- `methods`
+- `refs` (template refs)
## Usage with Templates
@@ -157,12 +163,35 @@ export default {
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
- // Please note that we need to explicitly expose ref value here
+ // Please note that we need to explicitly use ref value here
return () => h('div', [readersNumber.value, book.title])
}
}
```
+Returning a render function prevents us from returning anything else. Internally that shouldn't be a problem, but it can be problematic if we want to expose methods of this component to the parent component via template refs.
+
+We can solve this problem by calling `expose`, passing it an object that defines the properties that should be available on the external component instance:
+
+```js
+import { h, ref } from 'vue'
+
+export default {
+ setup(props, { expose }) {
+ const count = ref(0)
+ const increment = () => ++count.value
+
+ expose({
+ increment
+ })
+
+ return () => h('div', count.value)
+ }
+}
+```
+
+The `increment` method would then be available in the parent component via a template ref.
+
## Usage of `this`
**Inside `setup()`, `this` won't be a reference to the current active instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API.
diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 681fbeb761..a642610ec0 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -133,7 +133,7 @@ Therefore, watchers that use template refs should be defined with the `flush: 'p
const root = ref(null)
watchEffect(() => {
- console.log(root.value) // =>
+ console.log(root.value) // => This is a root element
},
{
flush: 'post'
diff --git a/src/guide/computed.md b/src/guide/computed.md
index d3b1247df8..d3aa37413d 100644
--- a/src/guide/computed.md
+++ b/src/guide/computed.md
@@ -1,8 +1,11 @@
-# Computed Properties and Watchers
+# Properti Terkomputasi (_Computed Properties_) dan _Watcher_
-## Computed Properties
+## Properti Terkomputasi (_Computed Property_)
-Learn how computed properties work with a free lesson on Vue School
+Ekspresi di dalam templat sangat mudah, tetapi ekspresi tersebut bertujuan untuk operasi sederhana. Meletakkan logika kode yang terlalu kompleks pada templat dapat membuat mereka menjadi membengkak dan lebih susah untuk dirawat. Sebagai contoh, jika kita memiliki objek pada array bersarang:
+
+Belajar bagaimanakah caranya properti _computed_ bekerja dengan Vue School
In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. For example, if we have an object with a nested array:
@@ -23,7 +26,7 @@ Vue.createApp({
})
```
-And we want to display different messages depending on if `author` already has some books or not
+Dan jika kita ingin untuk menampilkan pesan berbeda tergantung nilai `author` memiliki buku atau tidak
```html
@@ -32,11 +35,11 @@ And we want to display different messages depending on if `author` already has s
```
-At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it performs a calculation depending on `author.books`. The problem is made worse when you want to include this calculation in your template more than once.
+Pada tahap ini, templat tidak lagi sederhana dan deklaratif. Anda harus melihatnya beberapa waktu sebelum menyadari bahwa kode tersebut melakukan kalkulasi berdasarkan nilai `author.books`. Permasalahan tersebut menjadi lebih buruk jika Anda ingin menyertakan kalkulasi ini pada templat Anda lebih dari sekali.
-That's why for complex logic that includes reactive data, you should use a **computed property**.
+Oleh karena itu untuk logika kode yang kompleks yang menyertakan data reaktif, Anda harus menggunakan **properti terkomputasi**.
-### Basic Example
+### Contoh Sederhana
```html
@@ -60,35 +63,35 @@ Vue.createApp({
}
},
computed: {
- // a computed getter
+ // _getter_ terkomputasi
publishedBooksMessage() {
- // `this` points to the vm instance
+ // `this` mengarah ke _instance_ vm
return this.author.books.length > 0 ? 'Yes' : 'No'
}
}
}).mount('#computed-basics')
```
-Result:
+Hasilnya:
-
+
-Here we have declared a computed property `publishedBooksMessage`.
+Di sini kita telah mendeklarasikan properti terkomputasi `publishedBooksMessage`.
-Try to change the value of `books` array in the application `data` and you will see how `publishedBooksMessage` is changing accordingly.
+Coba mengubah nilai array `books` pada aplikasi `data` dan Anda akan melihat bagaimana `publishedBooksMessage` berubah juga.
-You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.publishedBooksMessage` depends on `vm.author.books`, so it will update any bindings that depend on `vm.publishedBooksMessage` when `vm.author.books` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function has no side effects, which makes it easier to test and understand.
+Anda data memasang data ke properti terkomputasi pada templat seperti properti pada umumnya. Vue mengetahui `vm.publishedBooksMessage` bergantung pada `vm.author.books`, sehingga Vue akan memutakhirkan _binding_ yang bergantung pada `vm.publishedBooksMessage` ketika `vm.author.books` berubah. Dan bagian terbaiknya adalah kita telah membuat hubungan dependensi ini secara deklaratif: _getter_ fungsi terkomputasi tidak memiliki efek samping, yang membuatnya lebih mudah untuk diuji dan dipahami.
-### Computed Caching vs Methods
+### Tembolok Properti Terkomputasi (Computed Cache) vs Metode/Fungsi
-You may have noticed we can achieve the same result by invoking a method in the expression:
+Anda mungkin menyadari kita dapat mendapatkan hasil serupa dengan memanggil metode/fungsi pada ekspresi:
```html
{{ calculateBooksMessage() }}
```
```js
-// in component
+// di dalam komponen
methods: {
calculateBooksMessage() {
return this.author.books.length > 0 ? 'Yes' : 'No'
@@ -96,9 +99,9 @@ methods: {
}
```
-Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their reactive dependencies.** A computed property will only re-evaluate when some of its reactive dependencies have changed. This means as long as `author.books` has not changed, multiple access to the `publishedBooksMessage` computed property will immediately return the previously computed result without having to run the function again.
+Sebagai ganti properti terkomputasi, kita dapat mendefinisikan fungsi yang sama sebagai metode/fungsi. Hasil akhirnya, dua pendekatan tersebut memang sama. Namun, perpedaannya adalah **properti terkomputasi akan disimpan sebagai tembolok (_cached_) pada dependensi reaktifnya.** Sebuah properti terkomputasi akan dijalankan kembali ketika dependensi reaktifnya berubah. Hal tersebut berarti selama `author.books` tidak berubah, akses berkali-kali pada properti terkomputasi `publishedBooksMessage` akan mengembalikan hasil komputasi sebelumnya tanpa menjalankan ulang fungsinya.
-This also means the following computed property will never update, because `Date.now()` is not a reactive dependency:
+Karena hal tersebut, properti terkomputasi berikut tidak akan pernah dimutakhirkan, karena `Date.now()` bukan dependensi reaktif:
```js
computed: {
@@ -108,13 +111,15 @@ computed: {
}
```
-In comparison, a method invocation will **always** run the function whenever a re-render happens.
+Sebagai perbandingan, sebuah pemanggilan metode/fungsi akan **selalu** dijalankan kapapun proses pe-_render_-an ulang terjadi.
Why do we need caching? Imagine we have an expensive computed property `list`, which requires looping through a huge array and doing a lot of computations. Then we may have other computed properties that in turn depend on `list`. Without caching, we would be executing `list`’s getter many more times than necessary! In cases where you do not want caching, use a `method` instead.
-### Computed Setter
+Mengapa kita membutuhkan tembolok (_caching_)? Bayangkan kita memiliki properti terkomputasi `list` yang kompleks, membutuhkan perulangan array yang besar dan melakukan perhitungan yang banyak. Kemudian kita mungkin memiliki properti terkomputasi yang lain yang bergantung pada `list`. Tanpa adanya tembolok (_caching_), kita akan menjalankan _getter_ `list` berkali-kali walaupun tidak perlu! Pada kasus dimana kita tidak membutuhkan tembolok (_caching_), gunakanlah `method`.
+
+### _Setter_ Terkomputasi
-Computed properties are by default getter-only, but you can also provide a setter when you need it:
+Properti terkomputasi secara bawaan hanya memiliki _getter_, tetapi Anda juga dapat memberikan _setter_ ketika Anda membutuhkannya:
```js
// ...
@@ -135,13 +140,15 @@ computed: {
// ...
```
-Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly.
+Sekarang ketika Anda menjalankan `vm.fullName = 'John Doe'`, _setter_ akan dipanggil dan `vm.firstName` dan `vm.lastName` akan dimutakhirkan.
-## Watchers
+## _Watchers_
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
-For example:
+Properti terkomputasi cocok untuk sebagian besar kasus, namun terkadang kita juga membutuhkan _watcher_ kustom. Itulah mengapa Vue menyediakan cara paling umum untuk bereaksi pada perubahan data melalui opsi `watch`. Hal ini akan berguna jika Anda ingin melakukan operasi asinkronus dan kompleks ketika merespon perubahan data.
+
+Sebagai contoh:
```html
@@ -158,6 +165,11 @@ For example:
+
+
+
+
+
```
-Result:
+Hasilnya:
In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property.
+Dalam kasus ini, gunakan opsi `watch` memungkinkan kita untuk melakukan operasi asinkronus (mengakses API) dan
+
In addition to the `watch` option, you can also use the imperative [vm.$watch API](../api/instance-methods.html#watch).
-### Computed vs Watched Property
+### Properti Terkomputasi vs Properti _Watch_
-Vue does provide a more generic way to observe and react to data changes on a current active instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example:
+Vue menyediakan cara yang lebih umum untuk mengamati dan bereaksi pada perubahan data pada _instance_ aktif sekarang: **properti watch**. Ketika Anda memiliki data yang perlu berubah berdasarkan data lain, sebaiknya jangan menggunakan `watch` secara berlebih juga - khususnya jika Anda dari latar belakang AngularJS. Bagaimanapun, pada umumnya lebih baik untuk menggunakan properti terkomputasi daripada _callback_ `watch` yang imperatif. Pertimbangkan contoh berikut:
```html
{{ fullName }}
@@ -228,7 +242,7 @@ const vm = Vue.createApp({
}).mount('#demo')
```
-The above code is imperative and repetitive. Compare it with a computed property version:
+Kode di atas imperatif dan berulang. Bandingkan dengan versi properti terkomputasinya:
```js
const vm = Vue.createApp({
@@ -246,4 +260,4 @@ const vm = Vue.createApp({
}).mount('#demo')
```
-Much better, isn't it?
+Lebih baik, bukan?
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index c39d94de1c..c490fca23b 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -1,25 +1,25 @@
-# Conditional Rendering
+# _Rendering_ Bersyarat
Learn how conditional rendering works with a free lesson on Vue School
## `v-if`
-The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.
+Instruksi `v-if` biasa digunakan untuk melakukan _rendering_ sebuah bagian dengan syarat tertentu. Bagian tersebut akan di-_render_ jika ekspresi instruksi mengembalikan nilai _truthy_.
```html
Vue is awesome!
```
-It is also possible to add an "else block" with `v-else`:
+Memungkinkan juga untuk menambahkan "bagian _else_" menggunakan `v-else`:
```html
Vue is awesome!
Oh no 😢
```
-### Conditional Groups with `v-if` on `
`
+### Pengelompokan Bersyarat dengan `v-if` pada ``
-Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `` element, which serves as an invisible wrapper. The final rendered result will not include the `` element.
+Karena `v-if` merupkan instruksi, ia harus ditempelkan pada sebuah elemen tunggal. Tetapi bagaimana jika kita ingin mengalihkan lebih dari satu elemen? Dalam kasus ini kita dapat menggunakan `v-if` pada elemen ``, yang bertindak sebagai pembungkus tak terlihat. Hasil final yang di-_render_ tidak akan menyertakan elemen
```html
@@ -31,7 +31,7 @@ Because `v-if` is a directive, it has to be attached to a single element. But wh
### `v-else`
-You can use the `v-else` directive to indicate an "else block" for `v-if`:
+Anda dapat menggunakan instruksi `v-else` untuk menunjukkan "bagian _else_" untuk `v-if`:
```html
@@ -42,11 +42,11 @@ You can use the `v-else` directive to indicate an "else block" for `v-if`:
```
-A `v-else` element must immediately follow a `v-if` or a `v-else-if` element - otherwise it will not be recognized.
+Sebuah elemen yang memiliki instruksi `v-else` harus berada tepat setelah elemen `v-if` atau `v-else-if` - jika tidak maka ia tidak akan dikenali.
### `v-else-if`
-The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`. It can also be chained multiple times:
+Sesuai namanya, `v-else-if` bertindak sebagai "bagian _else if_" untuk `v-if`. Ia juga bisa dirangkai berkali-kali:
```html
@@ -63,34 +63,34 @@ The `v-else-if`, as the name suggests, serves as an "else if block" for `v-if`.
```
-Similar to `v-else`, a `v-else-if` element must immediately follow a `v-if` or a `v-else-if` element.
+Sama seperti `v-else`, sebuah elemen `v-else-if` harus berada tepat setelah elemen `v-if` atau `v-else-if`.
## `v-show`
-Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
+Pilihan lain untuk menampilkan elemen secara bersyarat adalah instruksi `v-show`. Penggunaannya kurang lebih sama:
```html
Hello!
```
-The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` only toggles the `display` CSS property of the element.
+Perbedaannya adalah elemen yang menggunakan `v-show` akan selalu di-_render_ dan tetap berada pada DOM; `v-show` hanya mengalihkan properti CSS `display` dari elemen tersebut.
-`v-show` doesn't support the `` element, nor does it work with `v-else`.
+`v-show` tidak mendukung elemen ``, tidak juga bekerja dengan `v-else`.
## `v-if` vs `v-show`
-`v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
+`v-if` merupakan _rendering_ bersyarat yang "nyata" karena ia memastikan _event listener_ dan komponen _child_ di dalam bagian bersyarat benar-benar dihancurkan dan dibuat ulang selama peralihan.
-`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - the conditional block won't be rendered until the condition becomes true for the first time.
+`v-if` juga **malas**: jika kondisi bernilai salah pada _rendering_ awal, ia tidak akan melakukan apapun - bagian bersyarat tidak akan di-_render_ hingga kondisi bernilai benar untuk pertama kali.
-In comparison, `v-show` is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
+Sebagai perbandingan, `v-show` jauh lebih sederhana - elemen selalu di-_render_ terlepas dari kondisi awal atau tidak, menggunakan peralihan berbasis CSS.
-Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.
+Secara umum, `v-if` memiliki biaya peralihan yang tinggi sedangkan `v-show` memiliki biaya _rendering_ awal yang lebih tinggi. Sehingga lebih baik gunakan `v-show` jika Anda butuh peralihan yang cukup sering, dan gunakan `v-if` jika kondisinya tidak mungkin berubah saat _runtime_.
-## `v-if` with `v-for`
+## `v-if` dengan `v-for`
-::: tip Note
-Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
+::: tip Catatan
+Menggunakan `v-if` dan `v-for` secara bersama-sama **tidak direkomendasikan**. Lihat [panduan gaya](../style-guide/#avoid-v-if-with-v-for-essential) untuk informasi lebih lanjut.
:::
-When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
+Ketika `v-if` dan `v-for` digunakan secara bersama-sama pada elemen, `v-if` akan dievaluasi terlebih dahulu. Lihat [panduan _rendering_ daftar](list#v-for-with-v-if) untuk detailnya.
diff --git a/src/guide/contributing/doc-style-guide.md b/src/guide/contributing/doc-style-guide.md
index 27e6b0f2c8..bbea534760 100644
--- a/src/guide/contributing/doc-style-guide.md
+++ b/src/guide/contributing/doc-style-guide.md
@@ -1,59 +1,59 @@
-# Documentation Style Guide
+# Pedoman Gaya Dokumentasi
-This guide will provide an overview of different design elements that are available for your use in creating documentation.
+Panduan ini akan memberikan gambaran umum tentang berbagai elemen desain yang tersedia untuk Anda gunakan dalam membuat dokumentasi.
-## Alerts
+## Peringatan (*Alerts*)
-VuePress provides a custom container plugin to create alert boxes. There are four types:
+VuePress menyediakan sebuah plugin wadah khusus untuk membuat kotak peringatan. Ada empat jenis:
-- **Info**: Provide information that is neutral
-- **Tip**: Provide information that is positive and encouraged
-- **Warning**: Provide information that users should be aware of as there is a low to moderate
-- **Danger**: Provide information that is negative and has a high risk to the user
+- **Info**: Memberikan informasi yang netral
+- **Tip**: Memberikan informasi yang bersifat positif dan menganjurkan sesuatu
+- **Warning**: Memberikan informasi yang harus diperhatikan pengguna karena ada risiko tingkat rendah hingga sedang
+- **Danger**: Memberikan informasi yang bersifat negatif dan memiliki risiko tinggi terhadap pengguna
-**Markdown Examples**
+**Contoh Markdown**
```
::: info
-You can find more information at this site.
+Anda dapat menemukan informasi lebih lanjut di situs ini.
:::
::: tip
-This is a great tip to remember!
+Ini adalah tips yang bagus untuk diingat!
:::
::: warning
-This is something to be cautious of.
+Ini adalah sesuatu yang harus diwaspadai
:::
-::: danger DANGER
-This is something we do not recommend. Use at your own risk.
+::: danger
+Ini adalah sesuatu yang tidak kami rekomendasikan. Gunakan dengan risiko yang Anda tanggung sendiri.
:::
```
-**Rendered Markdown**
+**Markdown yang Dirender**
::: info
-You can find more information at this site.
+Anda dapat menemukan informasi lebih lanjut di situs ini.
:::
::: tip
-This is a great tip to remember!
+Ini adalah tips yang bagus untuk diingat!
:::
::: warning
-This is something to be cautious of.
+Ini adalah sesuatu yang harus diwaspadai
:::
-::: danger DANGER
-This is something we do not recommend. Use at your own risk.
+::: danger
+Ini adalah sesuatu yang tidak kami rekomendasikan. Gunakan dengan risiko yang Anda tanggung sendiri.
:::
-## Code Blocks
+## Blok Kode
-VuePress uses Prism to provide language syntax highlighting by appending the language to the beginning backticks of a code block:
+VuePress menggunakan Prism untuk memberikan penyorotan sintaksis bahasa dengan menambahkan nama bahasa ke backtick (`) di awal blok kode:
-**Markdown Example**
+**Contoh Markdown**
````
```js
@@ -63,7 +63,7 @@ export default {
```
````
-**Rendered Output**
+**Keluaran yang Dirender**
```js
export default {
@@ -71,13 +71,13 @@ export default {
}
```
-### Line Highlighting
+### Penyorotan Baris
-To add line highlighting to your code blocks, you need to append the line number in curly braces.
+Untuk menambahkan penyorotan baris ke blok kode Anda, Anda perlu menambahkan nomor baris dalam kurung kurawal.
-#### Single Line
+#### Baris Tunggal
-**Markdown Example**
+**Contoh Markdown**
````
```js{2}
@@ -91,7 +91,7 @@ export default {
```
````
-**Rendered Markdown**
+**Markdown yang Dirender**
```js{2}
export default {
@@ -103,7 +103,7 @@ export default {
}
```
-#### Group of Lines
+#### Sekumpulan Baris
````
```js{4-5}
@@ -127,7 +127,7 @@ export default {
}
```
-#### Multiple Sections
+#### Beberapa Bagian
````
```js{2,4-5}
diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md
index 9e900ccbd1..deb5623d19 100644
--- a/src/guide/contributing/translations.md
+++ b/src/guide/contributing/translations.md
@@ -1,43 +1,43 @@
-# Translations
+# Penerjemahan
-Vue has spread across the globe, with the core team being in at least half a dozen different timezones. The community is growing all the time and we want to make the documentation accessible to as many people as possible.
+Vue telah menyebar ke seluruh dunia, dan tim intinya berada di setidaknya setengah lusin zona waktu yang berbeda. Komunitasnya berkembang setiap saat dan kami ingin membuat dokumentasinya dapat diakses oleh sebanyak mungkin orang.
-Providing translations for the documentation is not something that the core team can manage alone. Thankfully, we have a great community of translators making contributions both large and small. If you've been thinking about contributing to the project, perhaps this is a good place to start?
+Menyediakan terjemahan untuk dokumentasi bukanlah sesuatu yang dapat dikelola sendiri oleh tim inti. Untungnya, kami memiliki komunitas penerjemah yang hebat yang memberikan kontribusi besar maupun kecil. Jika Anda telah berpikir untuk berkontribusi pada proyek ini, mungkin ini adalah tempat yang baik untuk memulai
-## Community translations
+## Terjemahan komunitas
-The table below lists GitHub repositories for community translations. These are translations made by the community, for the community. Some of these translations may be incomplete but they can still make the Vue experience significantly more enjoyable for readers who prefer these languages.
+Tabel di bawah ini mencantumkan repositori GitHub untuk terjemahan komunitas. Ini adalah terjemahan yang dibuat oleh dan untuk komunitas. Beberapa terjemahan ini mungkin tidak lengkap tetapi masih dapat membuat pengalaman Vue lebih menyenangkan secara signifikan bagi pembaca yang lebih menyukai bahasa ini.
-For completeness, we've also included the official documentation in the list.
+Untuk melengkapi, kami juga menyertakan dokumentasi resmi dalam daftar.
-Thank you to everyone who has contributed to these translations. Your hard work is very much appreciated.
+Terima kasih kepada semua orang yang telah berkontribusi pada terjemahan ini. Kerja keras kalian sangat dihargai.
-## How can I get involved with translations?
+## Bagaimana saya bisa terlibat dalam penerjemahan?
-The first step is to check whether there is an existing translation for the relevant language. In addition to the table above, a good place to start is [this pinned issue](https://github.com/vuejs/docs-next/issues/478), which is used to keep track of the various translation initiatives happening in the community.
+Langkah pertama adalah memeriksa apakah ada terjemahan yang sudah ada untuk bahasa yang sama. Selain tabel di atas, tempat yang baik untuk memulai adalah [*issue* yang dipin ini](https://github.com/vuejs/docs-next/issues/478), yang digunakan untuk melacak berbagai inisiatif penerjemahan yang terjadi di dalam komunitas ini.
-If there's already an active translation then there are various ways you can help out. The GitHub repository should be a good place to start gathering information about how a particular translation is managed and who does what. All translation repositories should allow you to file issues and open Pull Requests if you have suggestions for improving the translation.
+Jika sudah ada terjemahan yang sedang aktif maka Anda bisa membantu dengan berbagai cara. Repositori GitHub bisa menjadi tempat yang baik untuk mulai mengumpulkan informasi tentang bagaimana terjemahan tertentu dikelola dan siapa yang melakukan apa. Semua repositori terjemahan harusnya memungkinkan Anda untuk mengajukan *issue* dan membuka *Pull Request* jika Anda memiliki saran untuk meningkatkan terjemahan.
-## What if there isn't an existing translation?
+## Bagaimana jika belum ada terjemahan dalam bahasa itu?
-If you want to start a new translation then please do. You don't need our permission to start but you should read the rest of this page carefully to make sure you're clear about what's involved.
+Jika Anda ingin memulai terjemahan baru, silakan lakukan. Anda tidak memerlukan izin dari kami untuk memulai, tetapi Anda harus membaca sisa halaman ini dengan saksama untuk memastikan Anda memahami dengan jelas apa saja yang dibutuhkan.
-Before you start, you might want to check whether there was a community translation for Vue 2. [This pinned issue](https://github.com/vuejs/vuejs.org/issues/2015) from the Vue 2 documentation may help.
+Sebelum memulai, Anda mungkin ingin memeriksa apakah ada terjemahan komunitas untuk Vue 2. [*Issue* yang dipin ini](https://github.com/vuejs/vuejs.org/issues/2015) dari dokumentasi Vue 2 dapat membantu .
-Working on a translation is more fun, and more likely to succeed, if there are multiple contributors. Even if you don't know anyone personally who can help out you may be able to find other translators from within the Vue community.
+Melakukan penerjemahan lebih menyenangkan, dan lebih mungkin berhasil, jika ada banyak kontributor. Bahkan jika Anda tidak mengenal siapa pun secara pribadi yang dapat membantu, Anda mungkin dapat menemukan penerjemah lain dari komunitas Vue.
-The documentation is constantly being updated. Many changes are small and don't directly impact the translations but others make important improvements that also need translating. Before you start work on a new translation you may want to take a look at the GitHub repositories for some other languages to get a sense of how they handle the update process.
+Dokumentasi ini terus diperbarui. Banyak perubahan yang kecil dan tidak secara langsung berdampak pada terjemahan tetapi ada juga perubahan lain yang membuat perbaikan penting yang juga perlu diterjemahkan. Sebelum Anda mulai mengerjakan terjemahan baru, Anda mungkin ingin melihat repositori GitHub untuk beberapa bahasa lain untuk memahami bagaimana mereka menangani proses pembaruan.
-When you first start a translation, you may want to use a personal GitHub repository. That's fine, so long as it's publicly accessible and open to contributions from others. Make sure the *Issues* tab is enabled in the repository's settings. You can migrate the repository to a shared organization at a later stage.
+Saat pertama kali memulai penerjemahan, Anda mungkin ingin menggunakan repositori GitHub pribadi. Tidak apa-apa, asalkan dapat diakses publik dan terbuka untuk kontribusi dari orang lain. Pastikan tab *Issues* diaktifkan di pengaturan repositori. Anda dapat memigrasikan repositori ke organisasi bersama di tahap selanjutnya.
-Once you start a translation, be sure to add it to [the pinned issue](https://github.com/vuejs/docs-next/issues/478) so that the rest of the community can find it.
+Setelah Anda memulai penerjemahan, pastikan untuk menambahkannya ke [*issue* yang dipin](https://github.com/vuejs/docs-next/issues/478) sehingga anggota komunitas yang lain dapat menemukannya.
-We also encourage you to update the root-level `README.md` at an early stage. Most translations add extra information to help potential contributors get involved.
+Kami juga mendorong Anda untuk memperbarui `README.md` tingkat akar pada tahap awal. Sebagian besar terjemahan menambahkan informasi tambahan untuk membantu kontributor potensial terlibat.
-## Can I add my translation to this page?
+## Bisakah saya menambahkan terjemahan saya ke halaman ini?
-If you've translated more than half of the documentation then please open a Pull Request to add your repository to the table of community translations on this page.
+Jika Anda telah menerjemahkan lebih dari setengah dokumentasi, silakan buka *Pull Request* untuk menambahkan repositori Anda ke tabel terjemahan komunitas di halaman ini.
-The official documentation is deployed on [Netlify](https://url.netlify.com/HJ8X2mxP8). We encourage you to do the same. Some community translators use their own Netlify accounts but we're happy to host community translations on our account once they're at an advanced stage.
+Dokumentasi resmi digelar (*deployed*) di [Netlify](https://url.netlify.com/HJ8X2mxP8). Kami mengajurkan Anda untuk melakukan hal yang sama. Beberapa penerjemah komunitas menggunakan akun Netlify mereka sendiri, tetapi kami dengan senang hati menyelenggarakan terjemahan komunitas di akun kami setelah mereka mencapai tahap lanjutan.
diff --git a/src/guide/contributing/writing-guide.md b/src/guide/contributing/writing-guide.md
index 5b444770cd..9070d7b9a0 100644
--- a/src/guide/contributing/writing-guide.md
+++ b/src/guide/contributing/writing-guide.md
@@ -1,109 +1,109 @@
-# Vue Docs Writing Guide
-
-Writing documentation is an exercise in empathy. We're not describing an objective reality - the source code already does that. Our job is to help shape the relationship between users and the Vue ecosystem. This ever-evolving guide provides some rules and recommendations on how to do that consistently within the Vue ecosystem.
-
-## Principles
-
-- **A feature doesn't exist until it's well documented.**
-- **Respect users' cognitive capacity (i.e. brain power).** When a user starts reading, they begin with a certain amount of limited brain power and when they run out, they stop learning.
- - Cognitive capacity is **depleted faster** by complex sentences, having to learn more than one concept at a time, and abstract examples that don't directly relate to a user's work.
- - Cognitive capacity is **depleted more slowly** when we help them feel consistently smart, powerful, and curious. Breaking things down into digestible pieces and minding the flow of the document can help keep them in this state.
-- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before.
-- **Describe the _problem_ first, then the solution.** Before showing how a feature works, it's important to explain why it exists. Otherwise, users won't have the context to know if this information is important to them (is it a problem they experience?) or what prior knowledge/experience to connect it to.
-- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid they might be "dumb". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
-- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "dumb" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
-
-## Organization
-
-- **Installation/Integration**: Provide a thorough overview of how to integrate the software into as many different kinds of projects as necessary.
-- **Introduction/Getting Started**:
- - Provide a less than 10 minute overview of the problems the project solves and why it exists.
- - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both to Installation page and the beginning of the Essentials Guide.
-- **Guide**: Make users feel smart, powerful, and curious, then maintain this state so that users maintain the motivation and cognitive capacity to keep learning more. Guide pages are meant to be read sequentially, so should generally be ordered from the highest to lowest power/effort ratio.
- - **Essentials**: It should take no longer than 5 hours to read the Essentials, though shorter is better. Its goal is to provide the 20% of knowledge that will help users handle 80% of use cases. Essentials can link to more advanced guides and the API, though, in most cases, you should avoid such links. When they are provided, you need also provide a context so users are aware if they should follow this link on their first reading. Otherwise, many users end up exhausting their cognitive capacity link-hopping, trying to fully learn every aspect of a feature before moving on, and as a result, never finish that first read-through of the Essentials. Remember that a smooth read is more important than being thorough. We want to give people the information they need to avoid a frustrating experience, but they can always come back and read further, or Google a less common problem when they encounter it.
- - **Advanced**: While the Essentials helps people handle ~80% of use cases, subsequent guides help get users to 95% of use cases, plus more detailed information on non-essential features (e.g. transitions, animations), more complex convenience features (e.g. mixins, custom directives), and dev experience improvements (e.g. JSX, plugins). The final 5% of use cases that are more niche, complex, and/or prone to abuse will be left to the cookbook and API reference, which can be linked to from these advanced guides.
-- **Reference/API**: Provide a complete list of features, including type information, descriptions of the problem each solves, examples of every combination of options, and links to guides, cookbook recipes, and other internal resources providing more detail. Unlike other pages, this one is not meant to be read top-to-bottom, so plenty of detail can be provided. These references must also be more easily skimmable than the guides, so the format should be closer to dictionary entries than the story-telling format of the guides.
-- **Migrations**:
- - **Versions**: When important changes are made, it's useful to include a full list of changes, including a detailed explanation of why the change was made and how to migrate their projects.
- - **From other projects**: How does this software compare to similar software? This is important to help users understand what additional problems we might solve or create for them, and to what extent they can transfer knowledge they already have.
-- **Style Guide**: There are necessarily some key pieces in development that need a decision, but are not core to the API. The style guide provides educated, opinionated recommendations to help guide these decisions. They shouldn't be followed blindly, but can help teams save time by being aligned on smaller details.
-- **Cookbook**: Recipes in the cookbook are written with some assumption of familiarity with Vue and its ecosystem. Each is a highly structured document that walks through some common implementation details that a Vue dev might encounter.
-
-## Writing & Grammar
-
-### Style
-
-- **Headings should describe problems**, not solutions. For example, a less effective heading might be "Using props", because it describes a solution. A better heading might be "Passing Data to Child Components with Props", because it provides the context of the problem props solve. Users won't really start paying attention to the explanation of a feature until they have some idea of why/when they'd use it.
-- **When you assume knowledge, declare it** at the beginning and link to resources for less common knowledge that you're expecting.
-- **Introduce only one new concept at a time whenever possible** (including both text and code examples). Even if many people are able to understand when you introduce more than one, there are also many who will become lost - and even those who don't become lost will have depleted more of their cognitive capacity.
-- **Avoid special content blocks for tips and caveats when possible.** It's generally preferable to blend these more naturally into the main content, e.g. by building on examples to demonstrate an edge case.
-- **Don't include more than two interwoven tips and caveats per page.** If you find that more than two tips are needed in a page, consider adding a caveats section to address these issues. The guide is meant to be read straight through, and tips and caveats can be overwhelming or distracting to someone trying to understand the base concepts.
-- **Avoid appeals to authority** (e.g. "you should do X, because that's a best practice" or "X is best because it gives you full separation of concerns"). Instead, demonstrate with examples the specific human problems caused and/or solved by a pattern.
-- **When deciding what to teach first, think of what knowledge will provide the best power/effort ratio.** That means teaching whatever will help users solve the greatest pains or greatest number of problems, with the relatively least effort to learn. This helps learners feel smart, powerful, and curious, so their cognitive capacity will drain more slowly.
-- **Unless the context assumes a string template or build system, only write code that works in any environment by the software (e.g. Vue, Vuex, etc).**
-- **Show, don't tell.** For example, "To use Vue on a page, you can add this to your HTML" (then show the script tag), instead of "To use Vue on a page, you can add a script element with a src attribute, the value of which should be a link to Vue's compiled source".
-- **Almost always avoid humor (for English docs)**, especially sarcasm and pop culture references, as it doesn't translate well across cultures.
-- **Never assume a more advanced context than you have to.**
-- **In most cases, prefer links between sections of the docs over repeating the same content in multiple sections.** Some repetition in content is unavoidable and even essential for learning. However, too much repetition also makes the docs more difficult to maintain, because a change in the API will require changes in many places and it's easy to miss something. This is a difficult balance to strike.
-- **Specific is better than generic.** For example, a `` component example is better than ``.
-- **Relatable is better than obscure.** For example, a `` component example is better than ``.
-- **Be emotionally relevant.** Explanations and examples that relate to something people have experience with and care about will always be more effective.
-- **Always prefer simpler, plainer language over complex or jargony language.** For example:
- - "you can use Vue with a script element" instead of "in order to initiate the usage of Vue, one possible option is to actually inject it via a script HTML element"
- - "function that returns a function" instead of "higher order function"
-- **Avoid language that invalidate struggle**, such as "easy", "just", "obviously", etc. For reference, see [Words To Avoid in Educational Writing](https://css-tricks.com/words-avoid-educational-writing/).
-
-### Grammar
-
-- **Avoid abbreviations** in writing and code examples (e.g. `attribute` is better than `attr`, `message` is better than `msg`), unless you are specifically referencing an abbreviation in an API (e.g. `$attrs`). Abbreviation symbols included on standard keyboards (e.g. `@`, `#`, `&`) are OK.
-- **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`).
-- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). 
- - Source: [The Serial (Oxford) Comma: When and Why To Use It](https://www.inkonhand.com/2015/10/the-serial-oxford-comma-when-and-why-to-use-it/)
-- **When referencing the name of a project, use the name that project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
-- **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about".
-- **Don't use emojis (except in discussions).** Emojis are cute and friendly, but they can be a distraction in documentation and some emoji even convey different meanings in different cultures.
-
-## Iteration & Communication
-
-- **Excellence comes from iteration.** First drafts are always bad, but writing them is a vital part of the process. It's extremely difficult to avoid the slow progression of Bad -> OK -> Good -> Great -> Inspiring -> Transcendent.
-- **Only wait until something is "Good" before publishing.** The community will help you push it further down the chain.
-- **Try not to get defensive when receiving feedback.** Our writing can be very personal to us, but if we get upset with the people who help us make it better, they will either stop giving feedback or start limiting the kind of feedback they give.
-- **Proof-read your own work before showing it to others.** If you show someone work with a lot of spelling/grammar mistakes, you'll get feedback about spelling grammar/mistakes instead of more valuable notes about whether the writing is achieving your goals.
-- **When you ask people for feedback, tell reviewers what:**
- - **you're trying to do**
- - **your fears are**
- - **balances you're trying to strike**
-- **When someone reports a problem, there is almost always a problem**, even if the solution they proposed isn't quite right. Keep asking follow-up questions to learn more.
-- People need to feel safe asking questions when contributing/reviewing content. Here's how you can do that:
- - **Thank people for their contributions/reviews, even if you're feeling grumpy.** For example:
- - "Great question!"
- - "Thanks for taking the time to explain. 🙂"
- - "This is actually intentional, but thanks for taking the time to contribute. 😊"
- - **Listen to what people are saying and mirror if you're not sure you're understanding correctly.** This can help validate people's feelings and experiences, while also understanding if _you're_ understanding _them_ correctly.
- - **Use a lot of positive and empathetic emojis.** It's always better to seem a little strange than mean or impatient.
- - **Kindly communicate rules/boundaries.** If someone behaves in a way that's abusive/inappropriate, respond only with kindness and maturity, but also make it clear that this behavior is not acceptable and what will happen (according to the code of conduct) if they continue behaving poorly.
-
-### Tips, Callouts, Alerts, and Line Highlights
-
-We have some dedicated styles to denote something that's worth highlighting in a particular way. These are captured [on this page](https://v3.vuejs.org/guide/doc-style-guide.html#alerts). **They are to be used sparingly.**
-
-There is a certain temptation to abuse these styles, as one can simply add a change inside a callout. However, this breaks up the flow of reading for the user, and thus, should only be used in special circumstances. Wherever possible, we should attempt to create a narrative and flow within the page to respect the readers cognitive load.
-
-Under no circumstances should 2 alerts be used next to one another, it's a sign that we're not able to explain context well enough.
-
-### Contributing
-
-We appreciate small, focused PRs. If you'd like to make an extremely large change, please communicate with team members prior to a pull request. Here's a [writeup that details why this is so critical](https://www.netlify.com/blog/2020/03/31/how-to-scope-down-prs/) for us to work well on this team. Please understand that though we always appreciate contributions, ultimately we have to prioritize what works best for the project as a whole.
-
-## Resources
-
-### Software
-
-- [Grammarly](https://www.grammarly.com/): Desktop app and browser extension for checking spelling and grammar (though grammar checking doesn't catch everything and occasionally shows a false positive).
-- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker): An extension for VS Code to help you check spelling within markdown and code examples.
-
-### Books
-
-- [On Writing Well](https://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction-ebook/dp/B0090RVGW0) (see [popular quotes](https://www.goodreads.com/work/quotes/1139032-on-writing-well-the-classic-guide-to-writing-nonfiction))
-- [Bird by Bird](https://www.amazon.com/Bird-Some-Instructions-Writing-Life/dp/0385480016) (see [popular quotes](https://www.goodreads.com/work/quotes/841198-bird-by-bird-some-instructions-on-writing-and-life))
+# Panduan Penulisan Dokumentasi Vue
+
+Menulis dokumentasi adalah latihan empati. Kami tidak menggambarkan realitas objektif - *source code* sudah melakukannya. Tugas kami adalah membantu membentuk hubungan antara pengguna dan ekosistem Vue. Panduan yang terus berkembang ini memberikan beberapa aturan dan rekomendasi tentang bagaimana melakukannya secara konsisten di ekosistem Vue.
+
+## Prinsip
+
+- **Sebuah fitur tidak akan dirilis sampai didokumentasikan dengan baik.**
+- **Beri perhatian ke kapasitas kognitif pengguna (yaitu kekuatan otak).** Saat pengguna mulai membaca, mereka mulai dengan sejumlah kekuatan otak yang terbatas dan ketika kekuatan itu habis, mereka akan berhenti belajar.
+ - Kapasitas kognitif **terkuras lebih cepat** oleh kalimat yang kompleks, harus mempelajari lebih dari satu konsep sekaligus, dan contoh abstrak yang tidak langsung berhubungan dengan pekerjaan pengguna.
+ - Kapasitas kognitif **terkuras lebih lambat** ketika kita membantu membuat mereka merasa cerdas secara konsisten, kuat, dan ingin tahu. Memecah hal-hal menjadi bagian-bagian yang mudah dicerna dan memperhatikan alur dokumentasi dapat membantu menjaga mereka tetap dalam keadaan ini.
+- **Selalu coba untuk melihat dari sudut pandang pengguna.** Ketika kita memahami sesuatu secara menyeluruh, itu menjadi jelas bagi kita. Ini disebut _kutukan pengetahuan_. Untuk menulis dokumentasi yang baik, cobalah untuk mengingat apa yang pertama kali perlu Anda ketahui saat mempelajari konsep ini. Jargon apa yang perlu Anda pelajari? Bagian mana yang Anda salah pahami? Apa yang butuh waktu lama untuk benar-benar dipahami? Dokumentasi yang baik membantu pengguna di hal-hal yang tepat. Akan sangat membantu untuk berlatih menjelaskan konsep yang ingin didokumentasikan kepada orang-orang secara langsung terlebih dahulu.
+- **Jelaskan _masalah_ terlebih dahulu, lalu solusinya.** Sebelum menunjukkan cara kerja sebuah fitur, penting untuk menjelaskan mengapa fitur itu ada. Jika tidak, pengguna tidak akan memiliki konteks untuk mengetahui apakah informasi ini penting bagi mereka (apakah ini masalah yang mereka alami?) atau pengetahuan/pengalaman sebelumnya untuk menghubungkannya.
+- **Saat menulis, jangan takut untuk bertanya**, _terutama_ jika Anda takut mereka akan tampak "bodoh". Menjadi orang yang mendapat kritikan itu sulit, tetapi itu satu-satunya cara bagi kita untuk lebih memahami apa yang perlu kita jelaskan.
+- **Terlibatlah dalam diskusi fitur.** API terbaik berasal dari pengembangan berbasis dokumentasi, tempat kami membuat fitur yang mudah dijelaskan, daripada mencoba mencari cara untuk menjelaskannya nanti. Mengajukan pertanyaan (terutama pertanyaan "bodoh") lebih awal sering kali membantu mengungkapkan kebingungan, inkonsistensi, dan perilaku bermasalah sebelum diperlukan perubahan besar untuk memperbaikinya.
+
+## Penyusunan
+
+- **Instalasi/Integrasi**: Memberikan gambaran menyeluruh tentang cara mengintegrasikan perangkat lunak ke sebanyak mungkin jenis proyek yang diperlukan.
+- **Perkenalan/Memulai**:
+ - Memberikan gambaran kurang dari 10 menit tentang masalah yang dipecahkan proyek ini dan mengapa proyek ini ada.
+ - Memberikan gambaran kurang dari 30 menit tentang masalah yang dipecahkan proyek ini dan bagaimana caranya, termasuk kapan dan mengapa menggunakan proyek ini serta beberapa contoh kode sederhana. Di bagian akhir, tautkan ke laman Instalasi dan awal Panduan Esensial.
+- **Panduan**: Buat pengguna merasa pintar, kuat, dan ingin tahu, lalu pertahankan kondisi ini agar pengguna mempertahankan motivasi dan kapasitas kognitif untuk terus belajar lebih banyak. Laman panduan dimaksudkan untuk dibaca secara berurutan, jadi umumnya harus diurutkan dari rasio daya/usaha tertinggi ke terendah.
+ - **Esensial**: Seharusnya tidak diperlukan lebih dari 5 jam untuk membaca Esensial, meskipun lebih pendek lebih baik. Tujuannya adalah untuk memberikan 20% pengetahuan yang akan membantu pengguna menangani 80% kasus penggunaan. Esensial dapat menautkan ke panduan yang lebih lanjut dan API, meskipun, dalam banyak kasus, Anda harus menghindari pemberian tautan tersebut. Ketika memberikan tautan, Anda juga perlu memberikan konteks sehingga pengguna mengetahui apakah mereka harus mengikuti tautan ini pada bacaan pertama mereka. Kalau tidak begitu, banyak pengguna yang akhirnya menghabiskan kapasitas kognitif mereka untuk melompat-lompat, mencoba mempelajari keseluruhan aspek fitur sebelum melanjutkan, dan sebagai hasilnya, tidak pernah menyelesaikan bacaan Esensial yang pertama. Ingatlah bahwa membaca dengan lancar lebih penting daripada menyeluruh. Kami ingin memberi orang-orang informasi yang mereka butuhkan untuk menghindari pengalaman yang membuat frustrasi, tetapi mereka selalu dapat kembali dan membaca lebih lanjut, atau mencari di Google masalah yang kurang umum kalau mereka menemukannya.
+ - **Lanjutan**: Meskipun Esensial membantu orang menangani ~80% kasus penggunaan, panduan berikutnya membantu pengguna mencapai 95% kasus penggunaan, ditambah informasi yang lebih mendetail tentang fitur yang bukan esensial (misalnya transisi, animasi), fitur untuk kenyamanan yang lebih kompleks (misalnya mixin, arahan khusus), dan peningkatan pengalaman pengembang (misalnya BEJ, plugin). 5% terakhir dari kasus penggunaan yang lebih khusus, kompleks, dan/atau rentan terhadap penyalahgunaan akan diserahkan ke buku petunjuk dan referensi API, yang dapat ditautkan dari panduan lanjutan ini.
+- **Referensi/API**: Menyediakan daftar fitur-fitur yang lengkap, termasuk informasi jenis, deskripsi masalah yang dipecahkan oleh masing-masing fitur, contoh setiap kombinasi opsi, serta tautan ke panduan, buku petunjuk, dan sumber daya internal lainnya yang memberikan detail lebih lanjut. Tidak seperti laman lain, laman ini tidak dimaksudkan untuk dibaca secara berurutan, sehingga banyak detail yang dapat diberikan. Referensi ini juga harus lebih mudah dibaca secara sepintas daripada panduan, jadi formatnya harus lebih seperti entri kamus dan bukan format panduan yang bercerita.
+- **Migrasi**:
+ - **Versi**: Saat perubahan penting dibuat, sebaiknya sertakan daftar lengkap perubahan, termasuk penjelasan mendetail tentang alasan perubahan itu dibuat dan cara memigrasikan proyek dari versi sebelumnya.
+ - **Dari proyek lain**: Bagaimana perangkat lunak ini dibandingkan dengan perangkat lunak serupa? Ini penting untuk membantu pengguna memahami masalah tambahan apa yang mungkin kita pecahkan atau ciptakan untuk mereka, dan sejauh mana mereka dapat mentransfer pengetahuan yang sudah mereka miliki.
+- **Panduan Gaya**: Pasti ada beberapa bagian penting dalam pengembangan yang memerlukan keputusan tetapi bukan inti dari API. Panduan gaya ini memberikan rekomendasi yang terdidik dan terdogma untuk membantu memandu keputusan-keputusan ini. Rekomendasi ini tidak boleh diikuti begitu saja, tetapi dapat membantu tim menghemat waktu dengan menyelaraskan detail yang lebih kecil.
+- **Buku Petunjuk**: Panduan dalam buku petunjuk ditulis dengan asumsi pengguna telah akrab dengan Vue dan ekosistemnya. Masing-masing buku petunjuk adalah dokumen yang sangat terstruktur yang menjelaskan beberapa detail implementasi umum yang mungkin dihadapi oleh pengembang Vue.
+
+## Penulisan & Tatabahasa
+
+### Gaya
+
+- **Tajuk harus menjelaskan masalah**, bukan solusi. Contoh tajuk yang kurang efektif seperti "Menggunakan props", karena menjelaskan solusi. Tajuk yang lebih baik adalah "Meneruskan Data ke Komponen Anak dengan Props", karena memberikan konteks masalah yang dipecahkan dengan menggunakan props. Pengguna tidak akan memperhatikan penjelasan suatu fitur sampai mereka mengetahui mengapa/kapan mereka menggunakannya.
+- **Saat Anda memberikan pengetahuan, nyatakan** di awal dan tautkan ke sumber daya untuk pengetahuan yang kurang umum yang Anda kira.
+- **Perkenalkan hanya satu konsep baru pada satu waktu bila memungkinkan** (termasuk teks dan contoh kode). Bahkan jika banyak orang dapat memahami ketika Anda memperkenalkan lebih dari satu konsep, akan ada banyak juga yang tidak paham - dan bahkan mereka yang paham akan lebih terkuras kapasitas kognitifnya.
+- **Hindari blok konten khusus untuk tips dan peringatan jika memungkinkan.** Biasanya lebih baik untuk memadukannya secara lebih alami ke dalam konten utama, misalnya dengan membangun contoh untuk mendemonstrasikan *edge case*.
+- **Jangan sertakan lebih dari dua tips dan peringatan yang terjalin per laman.** Jika Anda menemukan bahwa lebih dari dua tips diperlukan dalam satu laman, pertimbangkan untuk menambahkan bagian peringatan untuk mengatasi masalah ini. Panduan ini dimaksudkan untuk dibaca langsung, dan tips dan peringatan dapat menjadi membingungkan atau mengalihkan perhatian seseorang yang mencoba memahami konsep dasarnya.
+- **Hindari saran yang terkesan memengaruhi** (misalnya "Anda harus melakukan X, karena itu praktik terbaik" atau "X adalah yang terbaik karena memberi Anda pemisahan penuh dari masalah"). Sebaliknya, tunjukkan dengan contoh masalah tertentu yang manusiawi yang disebabkan dan/atau dipecahkan oleh suatu pola.
+- **Saat memutuskan apa yang akan diajarkan terlebih dahulu, pikirkan pengetahuan apa yang akan memberikan rasio kekuatan/usaha terbaik.** Itu berarti mengajarkan apa pun yang akan membantu pengguna memecahkan kesulitan terbesar atau jumlah masalah terbesar, dengan upaya yang relatif sedikit untuk dipelajari. Ini membantu orang yang belajar menjadi merasa pintar, kuat, dan ingin tahu, sehingga kapasitas kognitif mereka akan terkuras lebih lambat.
+- **Kecuali konteksnya memberikan templat untai atau sistem *build*, hanya tulis kode yang berfungsi di lingkungan perangkat lunak ini (misalnya Vue, Vuex, dll.).**
+- **Perlihatkan, jangan hanya beri tahu.** Misalnya, "Untuk menggunakan Vue di sebuah laman, Anda dapat menambahkan ini ke HTML Anda" (lalu tunjukkan tag skrip), alih-alih "Untuk menggunakan Vue di sebuah laman, Anda dapat menambahkan elemen skrip dengan atribut src, yang nilainya harus berupa tautan ke sumber yang disusun Vue".
+- **Sebisa mungkin hindari humor (untuk dokumentasi berbahasa Inggris)**, terutama referensi sarkasme dan budaya pop, karena tidak dapat diterjemahkan dengan baik lintas budaya.
+- **Jangan pernah memberikan konteks yang lebih kompleks dari yang seharusnya.**
+- **Dalam kebanyakan kasus, utamakan tautan antar bagian dokumentasi daripada mengulangi konten yang sama di beberapa bagian.** Beberapa pengulangan dalam konten memang tidak dapat dihindari dan bahkan penting sebagai pembelajaran. Namun, terlalu banyak pengulangan juga membuat dokumen lebih sulit dipelihara, karena perubahan di API akan memerlukan perubahan di banyak tempat dan membuatnya jadi mudah untuk melewatkan sesuatu. Ini memang keseimbangan yang sulit untuk dicapai.
+- **Spesifik lebih baik daripada generik.** Misalnya, contoh komponen `` lebih baik daripada ``.
+- **Yang dikenali lebih baik daripada yang tidak diketahui.** Misalnya, contoh komponen `` lebih baik daripada ``.
+- **Jadilah relevan secara emosional.** Penjelasan dan contoh yang berhubungan dengan sesuatu yang dialami dan diperhatikan seseorang akan selalu lebih efektif.
+- **Selalu utamakan bahasa yang lebih sederhana dan terus terang daripada bahasa yang rumit atau jargon.** Misalnya:
+ - "Anda dapat menggunakan Vue dengan elemen skrip" alih-alih "untuk memulai penggunaan Vue, satu opsi yang mungkin adalah dengan memasukkannya melalui elemen skrip HTML"
+ - "*function* yang mengembalikan *function*" alih-alih "*function* yang berurutan lebih tinggi"
+- **Hindari penggunaan bahasa yang terkesan menggampangkan**, seperti "mudah", "hanya", "jelas", dll. Untuk referensi, lihat [Words To Avoid in Educational Writing](https://css-tricks.com/words-avoid-educational-writing/).
+
+### Tatabahasa
+
+- **Hindari penggunaan singkatan** dalam penulisan dan contoh kode (misalnya `attribute` lebih baik daripada `attr`, `message` lebih baik daripada `msg`), kecuali jika Anda secara khusus merujuk singkatan dalam API (misalnya `$attrs `). Simbol singkatan yang disertakan pada keyboard standar (misalnya `@`, `#`, `&`) boleh digunakan.
+- **Saat merujuk contoh berikutnya secara langsung, gunakan titik dua (`:`) untuk mengakhiri kalimat**, bukan titik (`.`).
+- **Gunakan koma Oxford** (misalnya "a, b, dan c" alih-alih "a, b dan c"). 
+ - Sumber: [The Serial (Oxford) Comma: When and Why To Use It](https://www.inkonhand.com/2015/10/the-serial-oxford-comma-when-and-why-to-use-it/)
+- **Saat mereferensikan nama sebuah proyek, gunakan nama yang merujuk pada proyek itu sendiri sebagaimana adanya.** Misalnya, "webpack" dan "npm" keduanya harus menggunakan huruf kecil karena itulah yang dirujuk oleh dokumentasinya.
+- **Gunakan Kapitalisasi Judul untuk tajuk** - setidaknya untuk saat ini, karena itulah yang kami gunakan di seluruh dokumentasi. Ada penelitian yang menunjukkan bahwa kapitalisasi kalimat (hanya kata pertama dari judul yang dimulai dengan huruf kapital) sebenarnya lebih mudah dibaca dan juga mengurangi kognitif ekstra untuk penulis dokumentasi, karena mereka tidak harus mencoba mengingat apakah menggunakan huruf besar untuk kata-kata seperti "dan", "dengan", dan "tentang".
+- **Jangan menggunakan emoji (kecuali dalam diskusi).** Emoji terkesan lucu dan ramah, tetapi dapat menjadi pengalih perhatian dalam dokumentasi dan beberapa emoji bahkan bisa punya arti yang berbeda dalam budaya yang berbeda.
+
+## Iterasi & Komunikasi
+
+- **Keunggulan berasal dari iterasi/pengulangan.** Draf pertama selalu buruk, tetapi menulisnya termasuk bagian penting dari proses. Sangat sulit untuk menghindari perkembangan yang lambat dari Buruk -> Cukup Baik -> Baik -> Hebat -> Menginspirasi -> Luar Biasa.
+- **Tunggu sampai sesuatu itu "Bagus" sebelum dipublikasikan.** Komunitas akan membantu Anda lebih jauh.
+- **Cobalah untuk tidak bersikap defensif saat menerima umpan balik.** Tulisan kita bisa sangat pribadi bagi kita, tetapi jika kita kesal dengan orang-orang yang membantu kita membuatnya lebih baik, mereka akan berhenti memberi umpan balik atau mulai membatasi umpan balik yang mereka berikan.
+- **Koreksi karya Anda sendiri sebelum menunjukkannya kepada orang lain.** Jika Anda menunjukkan seseorang sebuah pekerjaan yang memiliki banyak kesalahan ejaan/tata bahasa, Anda akan mendapatkan umpan balik tentang tata bahasa/kesalahan ejaan alih-alih umpan balik yang lebih berharga tentang apakah tulisan yang Anda buat sudah sesuai dengan tujuan Anda.
+- **Saat Anda meminta masukan dari orang lain, beri tahu pengulas:**
+ - **apa yang sedang Anda coba lakukan**
+ - **apa yang Anda takuti**
+ - **seperti apa keseimbangan yang ingin Anda capai**
+- **Ketika seseorang melaporkan masalah, hampir selalu memang ada masalah**, meskipun solusi yang mereka ajukan tidak tepat. Tetap ajukan pertanyaan lanjutan untuk mempelajari lebih lanjut.
+- Orang perlu merasa aman untuk mengajukan pertanyaan saat berkontribusi/meninjau konten. Inilah cara Anda dapat melakukannya:
+ - **Berterima kasih kepada orang-orang atas kontribusi/ulasan mereka, bahkan jika Anda merasa kesal.** Misalnya:
+ - "Pertanyaan bagus!"
+ - "Terima kasih telah meluangkan waktu untuk menjelaskan. 🙂"
+ - "Ini sebenarnya disengaja, tapi terima kasih telah meluangkan waktu untuk berkontribusi. 😊"
+ - **Dengarkan apa yang orang katakan dan ulangi jika Anda tidak yakin bahwa Anda memahaminya dengan benar.** Ini dapat membantu memvalidasi perasaan dan pengalaman orang, sekaligus juga memahami kalau _Anda_ memahami _mereka_ dengan benar.
+ - **Gunakan banyak emoji yang positif dan berempati.** Lebih baik terlihat sedikit aneh daripada terlihat kasar atau tidak sabar.
+ - **Komunikasikan aturan/batasan dengan ramah.** Jika seseorang berperilaku kasar/tidak pantas, tanggapi hanya dengan keramahan dan kedewasaan, tetapi juga jelaskan bahwa perilaku ini tidak dapat diterima dan apa yang akan terjadi (sesuai dengan kode perilaku) jika mereka terus berperilaku buruk.
+
+### Tips, Info, Peringatan, dan Penyorotan Baris
+
+Kami memiliki beberapa gaya khusus untuk menunjukkan sesuatu yang layak disorot dengan cara tertentu. Ini diambil [dari halaman ini](https://v3.vuejs.org/guide/doc-style-guide.html#alerts). **Gaya-gaya ini tidak boleh terlalu sering digunakan.**
+
+Ada godaan tertentu untuk menyalahgunakan gaya ini, karena seseorang dapat dengan mudah menambahkan perubahan di dalam sebuah informasi. Namun, ini memecah aliran membaca pengguna, dan dengan demikian, hanya boleh digunakan dalam keadaan khusus. Sebisa mungkin, kita harus berusaha membuat narasi dan alur di dalam halaman untuk menghargai beban kognitif pembaca.
+
+Dalam situasi apa pun, 2 peringatan tidak boleh digunakan berdampingan, itu menjadi tanda bahwa kita tidak bisa menjelaskan konteks dengan cukup baik.
+
+### Berkontribusi
+
+Kami menghargai PR (*Pull Request*) yang kecil dan terfokus. Jika Anda ingin membuat perubahan yang sangat besar, harap komunikasikan dengan anggota tim sebelum melakukan *pull request*. Berikut adalah [tulisan yang merinci mengapa ini sangat penting](https://www.netlify.com/blog/2020/03/31/how-to-scope-down-prs/) agar kami dapat bekerja dengan baik di tim ini. Harap dipahami bahwa meskipun kami selalu menghargai kontribusi, pada akhirnya kami harus memprioritaskan apa yang terbaik untuk proyek secara keseluruhan.
+
+## Sumber
+
+### Perangkat Lunak
+
+- [Grammarly](https://www.grammarly.com/): Aplikasi desktop dan ekstensi browser untuk memeriksa ejaan dan tata bahasa (meskipun pemeriksaan tata bahasa tidak menangkap semuanya dan terkadang menunjukkan kesalahan). **Khusus untuk yang berbahasa Inggris**.
+- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker): Sebuah ekstensi untuk Kode VS yang membantu Anda memeriksa ejaan dalam markdown dan contoh kode.
+
+### Buku
+
+- [On Writing Well](https://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction-ebook/dp/B0090RVGW0) (lihat [kutipan populer](https://www.goodreads.com/work/quotes/1139032-on-writing-well-the-classic-guide-to-writing-nonfiction))
+- [Bird by Bird](https://www.amazon.com/Bird-Some-Instructions-Writing-Life/dp/0385480016) (lihat [kutipan populer](https://www.goodreads.com/work/quotes/841198-bird-by-bird-some-instructions-on-writing-and-life))
- [Cognitive Load Theory](https://www.amazon.com/Cognitive-Explorations-Instructional-Performance-Technologies/dp/144198125X/)
diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index 47156b48dc..4d7a0a6152 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -214,4 +214,4 @@ app.component('my-component', {
Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.
-With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md
index 4806bb5f8a..8c56a3f13d 100644
--- a/src/guide/data-methods.md
+++ b/src/guide/data-methods.md
@@ -1,10 +1,12 @@
-# Data Properties and Methods
+# Metode/Fungsi dan Properti Data
-Learn how to work with data and methods with a free Vue School lesson
+## Properti Data
+
+Belajar cara menggunakan data dan method dari Video gratis milik Vueschool
## Data Properties
-The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance:
+Properti `data` untuk komponen berbentuk fungsi. Vue memanggil fungsi ini sebagai bagian dari pembuatan _instance_ komponen baru. Properti ini harus mengembalikan nilai objek, yang kemudian Vue akan membungkusnya pada sistem reaktivitasnya dan menyimpan _instance_ komponen sebagai `$data`. Untuk kemudahan Anda, semua properti yang terletak pada level utama objek tersebut tersedia secara langsung melalui _instance_ komponen:
```js
const app = Vue.createApp({
@@ -18,24 +20,24 @@ const vm = app.mount('#app')
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
-// Assigning a value to vm.count will also update $data.count
+// Mengubah nilai vm.count juga akan mengubah $data.count
vm.count = 5
console.log(vm.$data.count) // => 5
-// ... and vice-versa
+// ... begitu juga sebaliknya
vm.$data.count = 6
console.log(vm.count) // => 6
```
-These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available.
+Properti _instance_ ini hanya ditambahkan ketika _instance_ pertama kali dibuat, sehingga Anda perlu memastikan mereka tersedia pada hasil kembalian fungsi `data`. Jika dibutuhkan, gunakan `null`, `undefined` atau nilai _placeholder_ lainnya untuk properti yang nilainya belum tersedia.
-It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html).
+Sangat memungkinkan untuk menambahkan properti secara langsung ke _instance_ komponen tanpa menambahkannya ke `data`. Namun, karena properti ini tidak tersedia sebagai objek `$data`, ia tidak akan terlacak secara otomatis oleh [sistem reaktivitas Vue](reactivity.html).
-Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters.
+Vue menggunakan awalan `$` untuk menyediakan API bawaannya sendiri melalui _instance_ komponen. Vue juga menyimpan awalan `_` untuk properti internal. Anda harus menghindari menggunakan nama dengan awalan karakter tersebut untuk properti level atas `data`.
-## Methods
+## Metode/Fungsi
-To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
+Untuk menambahkan metode pada sebuah _instance_ komponen, kita menggunakan opsi komponen bernama `methods`. Opsi tersebut harus berupa objek yang berisi metode/fungsi yang dimaksud:
```js
const app = Vue.createApp({
@@ -44,7 +46,7 @@ const app = Vue.createApp({
},
methods: {
increment() {
- // `this` will refer to the component instance
+ // `this` akan mengarah ke _instance_ komponen
this.count++
}
}
@@ -59,17 +61,17 @@ vm.increment()
console.log(vm.count) // => 5
```
-Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value.
+Vue memasang `this` secara otomatis untuk `methods` sehingga ia selalu mengarah ke _instance_ komponen. Hal tersebut memastikan metode/fungsi mengarah ke nilai `this` yang tepat jika digunakan pada _event listener_ atau _callback_. Anda harus menghindari penggunaan _arrow functions_ ketika mendeklarasikan `methods`, karena hal tersebut dapat mencegah Vue memasang nilai `this` yang sesuai.
-Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners:
+Seperti properti _instance_ komponen lainnya, `methods` dapat diakses di dalam templat komponen. Pada umumnya mereka digunakan sebagai _event listener_:
```html
Up vote
```
-In the example above, the method `increment` will be called when the `` is clicked.
+Pada contoh di atas, metode/fungsi `increment` akan dipanggil ketika `` diklik.
-It is also possible to call a method directly from a template. As we'll see shortly, it's usually better to use a [computed property](computed.html) instead. However, using a method can be useful in scenarios where computed properties aren't a viable option. You can call a method anywhere that a template supports JavaScript expressions:
+Selain itu, kita juga dapat memanggil metode/fungsi secara langsung melalui templat. Yang akan kita lihat sebentar lagi, pada umumnya akan lebih baik jika menggunakan [properti computed](computed.html) sebagai gantinya. Namun, menggunakan metode/fungsi dapat berguna pada kasus dimana properti _computed_ bukan merupakan opsi yang bijak. Anda dapat memanggil metode/fungsi dimanapun pada templat yang mendukung ekspresi JavaScript:
```html
@@ -77,45 +79,45 @@ It is also possible to call a method directly from a template. As we'll see shor
```
-If the methods `toTitleDate` or `formatDate` access any reactive data then it will be tracked as a rendering dependency, just as if it had been used in the template directly.
+Jika metode/fungsi `toTitleDate` atau `formatDate` mengakses data reaktif apapun, ia akan dilacak sebagai dependensi pe-_render_-an, begitu juga jika ia digunakan di templat secara langsung.
-Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a [lifecycle hook](instance.html#lifecycle-hooks) instead.
+Metode/fungsi yang dipanggil dari templat tidak boleh memiliki efek apapun, seperti mengubah data atau memicu proses asinkronus. Jika Anda ingin melakukan hal tersebut, Anda seharusnya menggunakan [_lifecycle hook_](instance.html#lifecycle-hooks) sebagai gantinya.
-### Debouncing and Throttling
+### _Debouncing_ dan _Throttling_
-Vue doesn't include built-in support for debouncing or throttling but it can be implemented using libraries such as [Lodash](https://lodash.com/).
+Vue tidak memiliki dukungan bawaan untuk _debouncing_ atau _throttling_ tetapi keduanya dapat diimplementasi menggunakan pustaka seperti [Lodash](https://lodash.com/).
-In cases where a component is only used once, the debouncing can be applied directly within `methods`:
+Pada kasus ketika komponen digunakan sekali, _debouncing_ dapat diterapkan secara langsung di dalam `methods`:
```html
```
-However, this approach is potentially problematic for components that are reused because they'll all share the same debounced function. To keep the component instances independent from each other, we can add the debounced function in the `created` lifecycle hook:
+Bagaimanapun juga, pendekatan ini berpotensi memiliki masalah untuk komponen yang digunakan berkali-kali karena mereka berbagi fungsi _debounce_ yang sama. Untuk menjaga _instance_ komponen mandiri satu sama lain, kita dapat menambahkan fungsi _debounce_ pada _lifecycle hook_ `created`:
```js
app.component('save-button', {
created() {
- // Debouncing with Lodash
+ // _Debouncing_ dengan Lodash
this.debouncedClick = _.debounce(this.click, 500)
},
unmounted() {
- // Cancel the timer when the component is removed
+ // Batalkan penghitung waktu ketika komponen dihilangkan
this.debouncedClick.cancel()
},
methods: {
click() {
- // ... respond to click ...
+ // ... merespon klik ...
}
},
template: `
diff --git a/src/guide/forms.md b/src/guide/forms.md
index d32402cb2e..41571c86a3 100644
--- a/src/guide/forms.md
+++ b/src/guide/forms.md
@@ -269,10 +269,10 @@ By default, `v-model` syncs the input with the data after each `input` event (wi
If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs:
```html
-
+
```
-This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string. If the value cannot be parsed with `parseFloat()`, then the original value is returned.
+This is often useful when the input type is `text`. If the input type is `number`, Vue can automatically convert the raw string value to a number, and you don't need to add the `.number` modifier to `v-model`. If the value cannot be parsed with `parseFloat()`, then the original value is returned.
### `.trim`
diff --git a/src/guide/installation.md b/src/guide/installation.md
index 1f680a0187..72b33c7051 100644
--- a/src/guide/installation.md
+++ b/src/guide/installation.md
@@ -1,43 +1,43 @@
-# Installation
+# Instalasi
-Vue.js is built by design to be incrementally adoptable. This means that it can be integrated into a project multiple ways depending on the requirements.
+Vue.js secara desain dibangun untuk dapat diadopsi secara bertahap. Hal tersebut berarti Vue dapat diintegrasi menjadi sebuah proyek dengan banyak cara tergantung dari persyaratannya.
-There are four primary ways of adding Vue.js to a project:
+Ada tiga cara utama untuk menambahkan Vue.js ke dalam suatu proyek:
-1. Import it as a [CDN package](#cdn) on the page
-2. Download the JavaScript files and [host them yourself](#download-and-self-host)
-3. Install it using [npm](#npm)
-4. Use the official [CLI](#cli) to scaffold a project, which provides batteries-included build setups for a modern frontend workflow (e.g., hot-reload, lint-on-save, and much more)
+1. Mengimpor Vue sebagai [paket CDN](#cdn) di dalam halaman
+2. Download berkas JavaScript dan [_host_ sendiri](#download-and-self-host)
+3. Memasang Vue menggunakan [npm](#npm)
+4. Menggunakan [Antarmuka Perintah Sebaris](#cli) untuk membangun proyek, yang menyediakan susunan lengkap untuk alur kerja frontend modern (contohnya: hot-reload, lint-saat-disimpan, dan masih banyak lagi)
-## Release Notes
+## Catatan Rilis
-Latest version: 
+Versi terakhir: 
-Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md).
+Catatan rilis yang detail untuk setiap versi terdapat pada [GitHub](https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md).
## Vue Devtools
-> Currently in Beta - Vuex and Router integration is still WIP
-
+> Saat ini pada tahap Beta - Integrasi VueX dan Router masih dalam proses pengerjaan
+
Learn how to install and use Vue Devtools in a free Vue School lesson
-When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.
+Ketika menggunakan Vue, kami merekomendasikan juga untuk memasang [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) pada peramban Anda, yang memungkinkan Anda untuk menginspeksi dan mendebug aplikasi Vue dengan antarmuka yang lebih ramah pengguna.
-[Get the Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)
+[Dapatkan Ekstensi Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg)
-[Get the Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
+[Dapatkan Addon Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-[Get the standalone Electron app](https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md)
+[Dapatkan Aplikasi Elektron](https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md)
## CDN
-For prototyping or learning purposes, you can use the latest version with:
+Untuk tujuan pembuatan prototipe atau pembelajaran, Anda dapat menggunakan versi terakhir dengan:
```html
```
-For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
+Untuk produksi, kami merekomendasikan untuk menggunakan versi angka spesifik dan _build_ tertentu untuk mencegah kerusakan pada versi terbaru.
## Download and Self Host
@@ -47,10 +47,10 @@ The files can be browsed and downloaded from a CDN such as [unpkg](https://unpkg
## npm
-npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/).
+npm adalah metode pemasangan yang direkomendasikan ketika membangun aplikasi skala besar dengan Vue. npm berpasangan dengan baik dengan _bundler_ modul seperti [Webpack](https://webpack.js.org/) atau [Rollup](https://rollupjs.org/).
```bash
-# latest stable
+# versi stabil terakhir
$ npm install vue@next
```
@@ -68,21 +68,22 @@ In most cases, the preferred way to create a webpack build with minimal configur
## CLI
-Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See [the Vue CLI docs](https://cli.vuejs.org) for more details.
+Vue provides an [official CLI](https://cli.vuejs.org/) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds.
+
-::: tip
-The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through [the guide](./introduction.html) without any build tools before using the CLI.
+:::tip
+CLI mengasumsikan pengetahuan sebelumnya tentang Node.js dan alat pembangun terkait. Jika Anda baru dalam Vue atau perangkat pembangun _front-end_, kami sangat menyarankan pergi ke [petunjuk](./introduction.html) tanpa perangkat pembangun apapun sebelum menggunakan CLI.
:::
-For Vue 3, you should use Vue CLI v4.5 available on `npm` as `@vue/cli`. To upgrade, you need to reinstall the latest version of `@vue/cli` globally:
+Untuk Vue 3, Anda harus menggunakan Vue CLI v4.5 yang tersedia di `npm` sebagai `@vue/cli`. Untuk memutakhirkan, Anda perlu memasang ulang versi terakhir dari `@vue/cli` secara global:
```bash
yarn global add @vue/cli
-# OR
+# Atau
npm install -g @vue/cli
```
-Then in the Vue projects, run
+Kemudian di proyek Vue, jalankan
```bash
vue upgrade --next
@@ -90,96 +91,95 @@ vue upgrade --next
## Vite
-[Vite](https://github.com/vitejs/vite) is a web development build tool that allows for lightning fast serving of code due its native ES Module import approach.
+[Vite](https://vitejs.dev/) is a web development build tool that allows for lightning fast serving of code due to its native ES Module import approach.
-Vue projects can quickly be set up with Vite by running the following commands in your terminal.
+Proyek Vue dapat diatur secara cepat dengan Vite dengan menjalankan perintah berikut di terminal Anda.
-With npm:
+Dengan npm:
```bash
-$ npm init @vitejs/app
+# npm 6.x
+$ npm init vite@latest --template vue
+
+# npm 7+, extra double-dash is needed:
+$ npm init vite@latest -- --template vue
+
$ cd
$ npm install
$ npm run dev
```
-Or with Yarn:
+Atau dengan Yarn:
```bash
-$ yarn create @vitejs/app
+$ yarn create vite --template vue
$ cd
$ yarn
$ yarn dev
```
-It might occur, that when your username has a space in it like 'Mike Baker', Vite cannot succeed. Have a try with
-
-```bash
-$ create-vite-app
-```
-
## Explanation of Different Builds
-In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case.
+Di dalam [direktori `dist/` dari paket npm](https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/), Anda dapat menemukan beberapa _build_ berbeda dari Vue.js. Berikut gambaran berkas `dist` yang mana yang harus digunakan berdasarkan studi kasus yang Anda miliki.
-### From CDN or without a Bundler
+### Dari CDN atau tanpa _Bundler_
#### `vue(.runtime).global(.prod).js`:
-- For direct use via `
```
-when used like this:
+Ketika digunakan seperti berikut:
```html
-
+
```
-...will generate this HTML:
+...maka Vue akan menghasilkan HTML berikut:
```html
-
-
+
+
```
-## 3.x Behavior
+## Perilaku pada Vue versi 3.x
-`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
+`$attrs` memuat seluruh atribut, dimana hal tersebut mempermudah cara penanganan atribut pada elemen-elemen yang berbeda. Pada Vue versi 3.x, contoh di atas akan menghasilkan HTML berikut:
```html
-
+
```
-## Migration Strategy
+## Strategi Migrasi
-In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element.
+Pada komponen-komponen yang menggunakan `inheritAttrs: false`, pastikan bahwa _styling_ tetap berjalan sesuai keinginan Anda. Jika Anda sebelumnya bergantung pada penanganan khusus pada `class` dan `style`, beberapa tampilan mungkin saja akan rusak karena atribut-atribut tersebut mungkin saja sekarang diterapkan pada elemen lain.
-[Migration build flag: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#compat-configuration)
+[_Migration build flag_: `INSTANCE_ATTRS_CLASS_STYLE`](migration-build.html#compat-configuration)
## See also
-- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$listeners` removed](./listeners-removed.md)
-- [Migration guide - New Emits Option](./emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [RFC Relevan](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Strategi Migrasi - `$listeners` dihapus](./listeners-removed.md)
+- [Strategi Migrasi - Opsi Emit Baru](./emits-option.md)
+- [Strategi Migrasi - Pengubah `.native` dihapus](./v-on-native-modifier-removed.md)
+- [Strategi Migrasi - Perubahan dalam API _render functions_](./render-function-api.md)
diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md
index 39464fae20..cc716dcc36 100644
--- a/src/guide/migration/children.md
+++ b/src/guide/migration/children.md
@@ -5,28 +5,28 @@ badges:
# $children
-## Overview
+## Gambaran Umum
-The `$children` instance property has been removed from Vue 3.0 and is no longer supported.
+Properti `$children` telah dihapus dari Vue versi 3.0 dan tidak didukung lagi.
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-In 2.x, developers could access direct child components of the current instance with `this.$children`:
+Pada Vue versi 2.x, pengembang dapat mengakses komponen turunan langsung dari sebuah objek menggunakan `this.$children`:
```vue
-
-
Change logo
+
+
Ubah logo
```
-## 3.x Update
+## Perubahan pada Vue versi 3.x
-In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs).
+Pada Vue versi 3.x, properti `$children` telah dihapus dan tidak didukung lagi. Sebagai gantinya, jika Anda butuh akses pada sebuah komponen turunan, kami menyarankan Anda untuk menggunakan [$refs](/guide/component-template-refs.html#template-refs).
## Migration Strategy
diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index 6b5a3656c7..f4feaa231f 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -5,24 +5,34 @@ badges:
# Custom Directives
-## Overview
+## Gambaran Umum
-The hook functions for directives have been renamed to better align with the component lifecycle.
+Fungsi _hook_ pada _directives_ telah berganti nama agar lebih selaras dengan siklus hidup komponen. Berikut merupakan gambaran singkat mengenai apa yang telah berubah:
+
+Additionally, the `expression` string is no longer passed as part of the `binding` object.
## 2.x Syntax
-In Vue 2, custom directives were created by using the hooks listed below to target an element’s lifecycle, all of which are optional:
+Lanjutkan membaca untuk penjelasan lebih lanjut.
-- **bind** - Occurs once the directive is bound to the element. Occurs only once.
-- **inserted** - Occurs once the element is inserted into the parent DOM.
+- **bind** - Called once the directive is bound to the element. Called only once.
+- **inserted** - Called once the element is inserted into the parent DOM.
- **update** - This hook is called when the element updates, but children haven't been updated yet.
- **componentUpdated** - This hook is called once the component and the children have been updated.
- **unbind** - This hook is called once the directive is removed. Also called only once.
-Here’s an example of this:
+Pada Vue versi 2, _custom directives_ dibuat menggunakan _hook-hook_ berikut untuk mengacu pada salah satu bagian dari siklus hidup komponen, dimana semuanya opsional:
+
+- **bind** - Dipanggil saat _directive_ terikat dengan elemen. Hanya diapnggil sekali.
+- **inserted** - Dipanggil sesudah elemen ditambahkan pada DOM induk.
+- **update** - _Hook_ ini dipanggil ketika elemen diperbarui, namun turunannya belum diperbarui.
+- **componentUpdated** - _Hook_ ini dipanggil sesudah komponen dan turunannya selesai diperbarui.
+- **unbind** - _Hook_ ini dipanggil sesudah _directive_ dihapus. Hanya dipanggil sekali.
+
+Berikut merupakan contoh dari _directives_:
```html
-Highlight this text bright yellow
+Sorot elemen ini supaya berlatar kuning cerah
```
```js
@@ -33,39 +43,39 @@ Vue.directive('highlight', {
})
```
-Here, in the initial setup for this element, the directive binds a style by passing in a value, that can be updated to different values through the application.
+Pada penyetelan awal untuk komponen di atas, _directive_ mengikat sebuah _style_ dengan meneruskan sebuah nilai yang dapat diperbarui menjadi nilai lain pada aplikasi.
-## 3.x Syntax
+## Sintaks Vue versi 3.x
-In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so:
+Namun pada Vue versi 3, kami telah membuat API yang lebih kohesif untuk _custom directives_. Seperti yang dapat Anda lihat, API pada versi sebelumnya berbeda jauh dengan siklus hidup komponen Vue walaupun sama-sama dihubungkan pada kejadian yang sejenis. Sekarang kami telah menyatukan kedua hal tersebut menjadi:
- **created** - new! This is called before the element's attributes or event listeners are applied.
- bind → **beforeMount**
- inserted → **mounted**
- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks.
-- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
+- update → removed! There were too many similarities to `updated`, so this is redundant. Please use `updated` instead.
- componentUpdated → **updated**
-- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: Baru! Mirip dengan _hook_ pada siklus hidup komponen, _hook_ ini akan dipanggil sebelum elemen dilepaskan dari DOM.
- unbind -> **unmounted**
-The final API is as follows:
+API akhir akan menjadi seperti berikut:
```js
const MyDirective = {
created(el, binding, vnode, prevVnode) {}, // new
beforeMount() {},
mounted() {},
- beforeUpdate() {}, // new
+ beforeUpdate() {}, // baru
updated() {},
- beforeUnmount() {}, // new
+ beforeUnmount() {}, // baru
unmounted() {}
}
```
-The resulting API could be used like this, mirroring the example from earlier:
+API yang dihasilkan dapat digunakan seperti berikut, mengikuti contoh sebelumnya:
```html
-Highlight this text bright yellow
+Sorot elemen ini supaya berlatar kuning cerah
```
```js
@@ -78,13 +88,13 @@ app.directive('highlight', {
})
```
-Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
+Sekarang _hook_ siklus hidup pada _custom directive_ telah mengikuti _hook_ siklus hidup pada komponen, sehingga _hook_ tersebut dapat lebih mudah diingat dan dibuat!
-### Edge Case: Accessing the component instance
+### Kasus Tepi: Mengakses Komponen
-It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
+Umumnya, Anda dianjurkan untuk memisahkan _directive_ dengan komponen tempat _directive_ tersebut digunakan. Mengakses komponen melalui sebuah _custom directive_ menunjukkan sebuah tanda bahwa _directive_ tersebut seharusnya merupakan sebuah komponen. Namun, ada beberapa kasus dimana hal tersebut menjadi masuk akal.
-In Vue 2, the component instance had to be accessed through the `vnode` argument:
+Pada Vue versi 2, komponen harus diakses melalui argumen `vnode`:
```js
bind(el, binding, vnode) {
@@ -92,7 +102,7 @@ bind(el, binding, vnode) {
}
```
-In Vue 3, the instance is now part of the `binding`:
+Pada Vue versi 3, komponen tersebut merupakan bagian dari argumen `binding`:
```js
mounted(el, binding, vnode) {
@@ -101,7 +111,7 @@ mounted(el, binding, vnode) {
```
:::warning
-With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a custom directive will be ignored and a warning will be logged.
+Dengan dukungan [fragments](/guide/migration/fragments.html#overview), komponen dapat memiliki lebih dari satu _node_ utama. Ketika digunakan pada komponen yang memiliki lebih dari satu _node_ inti, sebuah _directive_ akan dihiraukan dan sebuah peringatan akan dicatat.
:::
## Migration Strategy
diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md
index 3d2a9cd09b..12355bd77e 100644
--- a/src/guide/migration/custom-elements-interop.md
+++ b/src/guide/migration/custom-elements-interop.md
@@ -3,48 +3,48 @@ badges:
- breaking
---
-# Custom Elements Interop
+# Interoperabilitas Elemen Kustom
-## Overview
+## Gambaran Umum
-- **BREAKING:** The checks to determine whether tags should be treated as custom elements are now performed during template compilation, and should be configured via compiler options instead of runtime config.
-- **BREAKING:** Special `is` prop usage is restricted to the reserved `` tag only.
+- **MERUSAK:** Pengecekan untuk mengetahui jika _tag_ HTML harus di perlakukan seperti elemen kustom sekarang dilakukan pada saat kompilasi templat, dan harus dilakukan melalui opsi kompiler bukan pada konfigurasi _runtime_
+- **MERUSAK** Penggunaan properti khusus `is` dibatasi untuk _tag_ `` saja.
- **NEW:** To support 2.x use cases where `is` was used on native elements to work around native HTML parsing restrictions, prefix the value with `vue:` to resolve it as a Vue component.
-## Autonomous Custom Elements
+## Elemen Kustom Otonom
-If we want to add a custom element defined outside of Vue (e.g. using the Web Components API), we need to 'instruct' Vue to treat it as a custom element. Let's use the following template as an example.
+Apabila Anda ingin menambahkan sebuah elemen kustom yang didefiniskan di luar Vue (contoh: menggunakan API Web Components), Anda harus mengatur Vue supaya menganggap komponen tersebut sebagai sebuah elemen kustom. _Template_ berikut akan digunakan sebagai contoh untuk penjelasan selanjutnya.
```html
-
+
```
-### 2.x Syntax
+### Sintaks Vue versi 2.x
-In Vue 2.x, configuring tags as custom elements was done via `Vue.config.ignoredElements`:
+Pada Vue versi 2.x, pengaturan untuk menentukan _tag_ HTML kustom dilakukan melalui `Vue.config.ignoredElements`
```js
-// This will make Vue ignore custom element defined outside of Vue
-// (e.g., using the Web Components APIs)
+// Kode di bawah akan membuat Vue menghiraukan elemen kustom yang
+// didefiniskan diluar Vue (contoh: menggunakan API Web Components)
-Vue.config.ignoredElements = ['plastic-button']
+Vue.config.ignoredElements = ['tombol-plastik']
```
-### 3.x Syntax
+### Sintaks Vue versi 3.x
-**In Vue 3.0, this check is performed during template compilation.** To instruct the compiler to treat `` as a custom element:
+**Pada Vue versi 3.0, pemeriksaan elemen kustom akan dilakukan pada saat kompilasi _template_.** Untuk mengatur supaya kompilator menganggap `` sebagai elemen kustom:
-- If using a build step: pass the `isCustomElement` option to the Vue template compiler. If using `vue-loader`, this should be passed via `vue-loader`'s `compilerOptions` option:
+- Apabila terdapat sebuah proses pembangunan kode program: teruskan opsi `isCustomElement` pada kompilator _template_ Vue. Apabila Anda menggunakan `vue-loader`, opsi tersebut harus diteruskan melalui opsi `compilerOptions` pada `vue-loader`:
```js
- // in webpack config
+ // pada konfigurasi Webpack
rules: [
{
test: /\.vue$/,
use: 'vue-loader',
options: {
compilerOptions: {
- isCustomElement: tag => tag === 'plastic-button'
+ isCustomElement: tag => tag === 'tombol-plastik'
}
}
}
@@ -52,60 +52,60 @@ Vue.config.ignoredElements = ['plastic-button']
]
```
-- If using on-the-fly template compilation, pass it via `app.config.isCustomElement`:
+- If using on-the-fly template compilation, pass it via `app.config.compilerOptions.isCustomElement`:
```js
- const app = Vue.createApp({})
- app.config.isCustomElement = tag => tag === 'plastic-button'
+ const app = Vue.createApp({})
+ app.config.compilerOptions.isCustomElement = tag => tag === 'plastic-button'
```
- It's important to note the runtime config only affects runtime template compilation - it won't affect pre-compiled templates.
+ Perlu diingat bahwa konfigurasi waktu eksekusi hanya mempengaruhi kompilasi _template_ pada waktu eksekusi - konfigurasi tersebut tidak akan mempengaruhi _template_ yang sudah dikompilasi sebelumnya.
-## Customized Built-in Elements
+## Elemen Bawaan yang Dikustomisasi
-The Custom Elements specification provides a way to use custom elements as [Customized Built-in Element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) by adding the `is` attribute to a built-in element:
+Spesifikasi elemen kustom menyediakan sebuah cara untuk menggunakan elemen kustom sebagai [Elemen Bawaan yang Dikustomisasi](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example) dengan menambahkan atribut `is` pada pada sebuah elemen bawaan:
```html
-Click Me!
+Tekan Aku!
```
-Vue's usage of the `is` special prop was simulating what the native attribute does before it was made universally available in browsers. However, in 2.x it was interpreted as rendering a Vue component with the name `plastic-button`. This blocks the native usage of Customized Built-in Element mentioned above.
+Penggunaan properti khusus `is` oleh Vue adalah mensimulasikan fungsi atribut bawaan sebelum fungsi tersebut tersedia secara global pada perambah. Namun, pada Vue versi 2.x properti tersebut akan dianggap sebagai sebuah komponen Vue dengan nama `tombol-plastik`. Perilaku tersebut mencegah fungsi bawaan pada Elemen Bawaan yang Dikustomisasi.
-In 3.0, we are limiting Vue's special treatment of the `is` prop to the `` tag only.
+Pada Vue versi 3.0, kami membatasi perlakukan khusus Vue pada properti `is` hanya untuk _tag_ `` saja.
-- When used on the reserved `` tag, it will behave exactly the same as in 2.x;
-- When used on normal components, it will behave like a normal prop:
+- Ketika digunakan pada _tag_ ``, properti tersebut akan memiliki perilaku yang sama dengan pada Vue versi 2.x;
+- Ketika digunakan pada komponen biasa, properti tersebut akan dianggap sebagai sebuah properti biasa:
```html
```
- - 2.x behavior: renders the `bar` component.
- - 3.x behavior: renders the `foo` component and passing the `is` prop.
+ - Perilaku pada Vue versi 2.x: menampilkan komponen `bar`.
+ - Perilaku pada Vue versi 3.x: menampilkan komponen `foo` dan meneruskan properti `is`.
-- When used on plain elements, it will be passed to the `createElement` call as the `is` prop, and also rendered as a native attribute. This supports the usage of customized built-in elements.
+- Ketika digunakan pada elemen biasa, properti tersebut akan diteruskan pada pemanggilan fungsi `createElement` sebagai opsi `is`, dan juga ditampilkan sebagai atribut bawaan. Hal tersebut mendukung penggunaan dari elemen bawaan yang dikustomisasi.
```html
- Click Me!
+ Tekan Aku!
```
- - 2.x behavior: renders the `plastic-button` component.
- - 3.x behavior: renders a native button by calling
+ - Perilaku pada Vue versi 2.x: menampilkan komponen `tombol-plastik`.
+ - Perilaku pada Vue versi 3.x: menampilkan komponen tombol bawaan dengan memanggil fungsi
```js
- document.createElement('button', { is: 'plastic-button' })
+ document.createElement('button', { is: 'tombol-plastik' })
```
[Migration build flag: `COMPILER_IS_ON_ELEMENT`](migration-build.html#compat-configuration)
## `vue:` Prefix for In-DOM Template Parsing Workarounds
-> Note: this section only affects cases where Vue templates are directly written in the page's HTML.
-> When using in-DOM templates, the template is subject to native HTML parsing rules. Some HTML elements, such as ``, ``, `` and `` have restrictions on what elements can appear inside them, and some elements such as ``, ``, and `` can only appear inside certain other elements.
+> Catatan: bagian ini hanya mempengaruhi kasus-kasus di mana _template_ Vue ditulis secara langsung pada HTML dari halaman web.
+> Ketika menggunakan _template_ dalam DOM, _template_ tersebut akan diuraikan menggunakan aturan penguraian HTML bawaan. Beberapa eleme HTML, seperti ``, ``, ``, dan `` memiliki batasan-batasan mengenai elemen yang dapat ditampilkan di dalam elemen tersebut, dan beberapa elemen seperti ``, ``, dan `` hanya bisa tampil di dalam elemen lain tertentu.
-### 2.x Syntax
+### Sintaks Vue versi 2.x
-In Vue 2 we recommended working around with these restrictions by using the `is` prop on a native tag:
+Pada Vue versi 2, kami menyarankan untuk mengatasi batasan-batasan tersebut dengan menggunakan properti `is` pada sebuah _tag_ HTML bawaan:
```html
@@ -113,9 +113,9 @@ In Vue 2 we recommended working around with these restrictions by using the `is`
```
-### 3.x Syntax
+### Sintaks Vue versi 3.x
-With the behavior change of `is`, a `vue:` prefix is now required to resolve the element as a Vue component:
+Dengan diubahnya cara kerja `is`, seubuah prefix `vue:` sekarang wajib digunakan untuk _meresolve_ elemen pada komponen Vue:
```html
@@ -123,8 +123,23 @@ With the behavior change of `is`, a `vue:` prefix is now required to resolve the
```
-## Migration Strategy
+:::warning
+Fungsi `v-is` mengharapkan sebuah ikatan dinamis `:is` seperti pada Vue versi 2.x - sehingga untuk menampilkan sebuah komponen berdasarkan nama yang sudah didaftarkan, nilai dari `v-is` harus merupakan sebuah _string literal_ JavaScript:
-- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or `app.config.isCustomElement` (with on-the-fly template compilation)
-- Change all non-`` tags with `is` usage to `` (for SFC templates) or prefix it with `vue:` (for in-DOM templates).
+- Replace `config.ignoredElements` with either `vue-loader`'s `compilerOptions` (with the build step) or `app.config.compilerOptions.isCustomElement` (with on-the-fly template compilation)
+
+```html
+
+
+
+
+
+```
+
+:::
+
+## Strategi Migrasi
+
+- Ganti `config.ignoredElements` dengan `compilerOptions` milik `vue-loader` (dengan langkah pembangunan kode program) atau `app.config.isCustomElement` (dengan kompilasi _template_ secara _on-the-fly_).
+- Ganti seluruh penggunaan `is` pada _tag_ yang bukan `` dengan `` (untuk _template_ SFC) atau `v-is` (untuk _template_ dalam DOM).
\ No newline at end of file
diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index ca8f41ce3e..e18cd72c95 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -1,25 +1,25 @@
---
-title: Data Option
+title: Opsi Data
badges:
- breaking
---
# {{ $frontmatter.title }}
-## Overview
+## Gambaran Umum
-- **BREAKING**: `data` component option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration.
+- **MERUSAK**: deklarasi opsi `data` pada komponen tidak lagi menerima objek JavaScript murni dan mengharapkan sebuah deklarasi fungsi.
-- **BREAKING**: when merging multiple `data` return values from mixins or extends, the merge is now shallow instead of deep (only root-level properties are merged).
+- **MERUSAK**: ketika menggabungkan nilai kembalian `data` dari _mixins_ atau _extends_, penggabungan sekarang akan dilakukan secara dangkal, bukan dalam (hanya properti inti yang akan digabungkan).
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-In 2.x, developers could define the `data` option with either an `object` or a `function`.
+Pada Vue versi 2.x, pengembang dapat mendefinisikan opsi `data` dengan sebuah objek atau sebuah fungsi.
-For example:
+Sebagai contoh:
```html
-
+
-
+
```
-Though this provided some convenience in terms of root instances having a shared state, this has led to confusion due to the fact that its only possible on the root instance.
+Walaupun hal tersebut memberi kemudahan dalam hal komponen inti yang mempunyai _state_ bersama, namun kemampuan tersebut membingungkan karena hanya dapat digunakan pada komponen inti.
-## 3.x Update
+## Pembaruan pada Vue versi 3.x
-In 3.x, the `data` option has been standardized to only accept a `function` that returns an `object`.
+Pada Vue versi 3.x, opsi `data` telah distandarisasikan supaya hanya menerima sebuah fungsi yang mengembalikan sebuah objek.
-Using the example above, there would only be one possible implementation of the code:
+Berdasarkan contoh di atas, hanya akan ada satu implementasi yang mungkin untuk kode tersebut:
```html
```
-## Mixin Merge Behavior Change
+## Perubahan Perilaku Penggabungan Mixin
-In addition, when `data()` from a component and its mixins or extends base are merged, the merge is now performed *shallowly*:
+Sebagai tambahan, ketika `data()` dari sebuah komponen dan basis _mixins_ atau _extends_ digabungkan, penggabungan akan dilakukan secara *dangkal*:
```js
const Mixin = {
data() {
return {
- user: {
- name: 'Jack',
+ pengguna: {
+ nama: 'Jack',
id: 1
}
}
}
}
-const CompA = {
+const KomponenA = {
mixins: [Mixin],
data() {
return {
- user: {
+ pengguna: {
id: 2
}
}
@@ -90,23 +90,23 @@ const CompA = {
}
```
-In Vue 2.x, the resulting `$data` is:
+Pada Vue versi 2.x, `$data` yang dihasilkan adalah:
```json
{
- "user": {
- "id": 2,
- "name": "Jack"
+ pengguna: {
+ id: 2,
+ nama: 'Jack'
}
}
```
-In 3.0, the result will be:
+Pada Vue versi 3.0, hasilnya adalah:
```json
{
- "user": {
- "id": 2
+ pengguna: {
+ id: 2
}
}
```
@@ -115,10 +115,12 @@ In 3.0, the result will be:
## Migration Strategy
-For users relying on the object declaration, we recommend:
+Untuk pengguna yang bergantung pada deklarasi objek, kami menyarankan:
-- Extracting the shared data into an external object and using it as a property in `data`
-- Rewrite references to the shared data to point to a new shared object
+- Mengekstrak data bersama pada sebuah objek eksternal dan menggunakan objek tersebut sebagai sebuah properti pada `data`
+- Menulis ulang acuan pada data bersama untuk menunjuk pada objek bersama baru
+
+Untuk pengguna yang bergantung pada perilaku penggabungan _mixin_ yang dalam, kami menyarankan Anda untuk menstruktur ulang kode program Anda untuk menghindari ketergantungan tersebut, karena penggabungan _mixin_ yang dalam merupakan sesuatu yang sangat implisit dan mampu menyebabkan logika dalam kode program menjadi lebih sulit untuk dipahami dan di*debug*.
For users relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug.
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
index 35b40aea09..8b7b111a79 100644
--- a/src/guide/migration/emits-option.md
+++ b/src/guide/migration/emits-option.md
@@ -1,18 +1,18 @@
---
-title: emits Option
+title: Opsi emits
badges:
- new
---
-# `emits` Option
+# Opsi `emits`
-## Overview
+## Gambarang Umum
-Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
+Vue versi 3 menawarkan opsi `emits`, yang mirip dengan opsi `props` yang sudah ada. Opsi ini dapat digunakan untuk mendefinisikan kejadian yang dapat diteruskan pada komponen induk.
-## 2.x Behavior
+## Perilaku Vue versi 2.x
-In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit:
+Pada Vue versi 2, Anda dapat mendefinisikan properti-properti yang dapat diterima oleh sebuah komponen, namun Anda tidak dapat menentukan kejadian apa saja yang dapat diteruskan:
```vue
@@ -28,9 +28,9 @@ In Vue 2, you can define the props that a component receives, but you can't decl
```
-## 3.x Behavior
+## Perilaku Vue versi 3.x
-Similar to props, the events that the component emits can now be defined with the `emits` option:
+Mirip dengan properti, kejadian yang dapat diteruskan oleh komponen dapat didefinisikan menggunakan opsi `emits`:
```vue
@@ -47,19 +47,19 @@ Similar to props, the events that the component emits can now be defined with th
```
-The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props` definitions.
+Opsi tersebut juga menerima sebuah objek, yang memperbolehkan pengembang untuk menetapkan pemeriksa untuk argumen yang diberikan pada _event_ yang diteruskan, mirip dengan pemeriksa pada definisi `props`.
-For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits).
+Untuk informasi lebih lanjut mengenai hal ini, silahkan baca [dokumentasi API untuk fitur ini](../../api/options-data.md#emits).
-## Migration Strategy
+## Strategi Migrasi
-It is highly recommended that you document all of the events emitted by each of your components using `emits`.
+It is highly recommended that you document all the events emitted by each of your components using `emits`.
-This is especially important because of [the removal of the `.native` modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits` will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
+Hal tersebut menjadi sangat penting karena [penghapusan pengubah .native](./v-on-native-modifier-removed.md). Setiap _listener_ untuk _event_ yang tidak dideklarasikan menggunakan `emits` akan diikutsertakan pada `$attrs` milik komponen, yang secara umum akan terikat pada _node_ inti dari komponen.
-### Example
+### Contoh
-For components that re-emit native events to their parent, this would now lead to two events being fired:
+Untuk komponen-komponen yang meneruskan ulang _event_ bawaan pada komponen induk, perubahan tersebut akan menyebabkan adanya dua _event_ yang terjadi sekaligus:
```vue
@@ -67,31 +67,30 @@ For components that re-emit native events to their parent, this would now lead t
```
-When a parent listens for the `click` event on the component:
+Ketika sebuah komponen induk mendengar _event_ `click` pada komponen:
```html
-
+
```
-it would now be triggered _twice_:
+_Event_ tersebut akan terjadi sebanyak dua kali:
+- Sekali dari `$emit()`
+- Sekali dari _event listener_ bawaan yang ada pada elemen inti.
-- Once from `$emit()`.
-- Once from a native event listener applied to the root element.
+Disini Anda memiliki dua pilihan:
-Here you have two options:
+1. Mendeklarasikan _event_ `click` dengan jelas. Pilihan ini akan membantu jika Anda menambahkan beberapa logika pada responden _event_ di ``.
+2. Hapus penerusan ulang _event_, karena sekarang elemen induk dapat mendengarkan _event_ bawaan dengan mudah, tanpa menambahkan `.native`. Cocok digunakan bila Anda hanya akan meneruskan ulang _event_ tersebut.
-1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in ``.
-2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
+## Lihat Juga
-## See also
-
-- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
-- [Migration guide - `$listeners` removed](./listeners-removed.md)
-- [Migration guide - `$attrs` includes `class` & `style`](./attrs-includes-class-style.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [RFC yang relevan](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+- [Panduan migrasi - Pengubah `.native` dihapus](./v-on-native-modifier-removed.md)
+- [Panduan migrasi - `$listeners` dihapus](./listeners-removed.md)
+- [Panduan migrasi - `$attrs` memuat `class` dan `style`](./attrs-includes-class-style.md)
+- [Panduan migrasi - Perubahan pada API fungsi _render_](./render-function-api.md)
diff --git a/src/guide/migration/events-api.md b/src/guide/migration/events-api.md
index fd3afa994f..a8ab192840 100644
--- a/src/guide/migration/events-api.md
+++ b/src/guide/migration/events-api.md
@@ -3,81 +3,106 @@ badges:
- breaking
---
-# Events API
+# API Events
-## Overview
+## Gambaran Umum
-`$on`, `$off` and `$once` instance methods are removed. Application instances no longer implement the event emitter interface.
+_Method_ `$on`, `$off` dan `$once` dihapus. Objek aplikasi tidak perlu lagi untuk mengimplementasikan antarmuka _event emitter_.
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-In 2.x, Vue instance could be used to trigger handlers attached imperatively via the event emitter API (`$on`, `$off` and `$once`). This was used to create _event hubs_ to create global event listeners used across the whole application:
+In 2.x, a Vue instance could be used to trigger handlers attached imperatively via the event emitter API (`$on`, `$off` and `$once`). This could be used to create an _event bus_ to create global event listeners used across the whole application:
```js
-// eventHub.js
+// eventBus.js
-const eventHub = new Vue()
+const eventBus = new Vue()
-export default eventHub
+export default eventBus
```
```js
// ChildComponent.vue
-import eventHub from './eventHub'
+import eventBus from './eventBus'
export default {
mounted() {
- // adding eventHub listener
- eventHub.$on('custom-event', () => {
+ // adding eventBus listener
+ eventBus.$on('custom-event', () => {
console.log('Custom event triggered!')
})
},
beforeDestroy() {
- // removing eventHub listener
- eventHub.$off('custom-event')
+ // removing eventBus listener
+ eventBus.$off('custom-event')
}
}
```
```js
// ParentComponent.vue
-import eventHub from './eventHub'
+import eventBus from './eventBus'
export default {
methods: {
callGlobalCustomEvent() {
- eventHub.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
+ eventBus.$emit('custom-event') // if ChildComponent is mounted, we will have a message in the console
}
}
}
```
-## 3.x Update
+## Pembaruan Vue versi 3.x
-We removed `$on`, `$off` and `$once` methods from the instance completely. `$emit` is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component
+We removed `$on`, `$off` and `$once` methods from the instance completely. `$emit` is still a part of the existing API as it's used to trigger event handlers declaratively attached by a parent component.
-## Migration Strategy
+## Strategi Migrasi
-In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component, there is no migration path for that use case.
+[Migration build flag: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-configuration)
+
+In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component. There is no migration path for that use case.
+
+### Root Component Events
+
+Static event listeners can be added to the root component by passing them as props to `createApp`:
+
+```js
+createApp(App, {
+ // Listen for the 'expand' event
+ onExpand() {
+ console.log('expand')
+ }
+})
+```
+
+### Event Bus
-But the eventHub pattern can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt) or [tiny-emitter](https://github.com/scottcorgan/tiny-emitter).
+The event bus pattern can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt) or [tiny-emitter](https://github.com/scottcorgan/tiny-emitter).
-Example:
+Contoh:
```js
-//eventHub.js
+// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
- $emit: (...args) => emitter.emit(...args),
+ $emit: (...args) => emitter.emit(...args)
}
```
-This provides the same event emitter API as in Vue 2.
+Cara tersebut menghasilkan API _event emitter_ yang sama seperti pada Vue 2.
-These methods may also be supported in a future compatibility build of Vue 3.
+Cara tersebut mungkin akan didukung juga pada _build_ kompatibel dari Vue 3.
-[Migration build flag: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-configuration)
+[_Migration build flag_: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-configuration)
+
+In most circumstances, using a global event bus for communicating between components is discouraged. While it is often the simplest solution in the short term, it almost invariably proves to be a maintenance headache in the long term. Depending on the circumstances, there are various alternatives to using an event bus:
+
+* [Props](/guide/component-basics.html#passing-data-to-child-components-with-props) and [events](/guide/component-basics.html#listening-to-child-components-events) should be your first choice for parent-child communication. Siblings can communicate via their parent.
+* [Provide and inject](/guide/component-provide-inject.html) allow a component to communicate with its slot contents. This is useful for tightly-coupled components that are always used together.
+* `provide`/`inject` can also be used for long-distance communication between components. It can help to avoid 'prop drilling', where props need to be passed down through many levels of components that don't need those props themselves.
+* Prop drilling can also be avoided by refactoring to use slots. If an interim component doesn't need the props then it might indicate a problem with separation of concerns. Introducing a slot in that component allows the parent to create the content directly, so that props can be passed without the interim component needing to get involved.
+* [Global state management](/guide/state-management.html), such as [Vuex](https://next.vuex.vuejs.org/).
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
index b2541e1dca..ac48142a33 100644
--- a/src/guide/migration/filters.md
+++ b/src/guide/migration/filters.md
@@ -3,75 +3,75 @@ badges:
- removed
---
-# Filters
+# Filter
-## Overview
+## Gambaran Umum
-Filters are removed from Vue 3.0 and no longer supported.
+Fitur _filter_ dihapus dari Vue versi 3.0 dan tidak didukung lagi.
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-In 2.x, developers could use filters in order to apply common text formatting.
+Pada Vue versi 2.x, pengembang dapat menggunakan _filter_ untuk menampilkan teks dalam bentuk tertentu.
-For example:
+Sebagai contoh:
```html
- Bank Account Balance
- {{ accountBalance | currencyUSD }}
+ Saldo Akun Bank
+ {{ saldoAkun | mataUangIDR }}
```
-While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside of curly braces being "just JavaScript," which has both learning and implementation costs.
+While this seems like a convenience, it requires a custom syntax that breaks the assumption of expressions inside curly braces being "just JavaScript," which has both learning and implementation costs.
-## 3.x Update
+## Pembaruan Vue versi 3.x
-In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties.
+Pada Vue versi 3.x, _filter_ dihapus dan tidak didukung lagi. Sebaliknya, kami menyarankan Anda untuk mengganti _filter_ dengan pemanggilan _method_ atau properti _computed_.
-Using the example above, here is one example of how it could be implemented.
+Berdasarkan contoh di atas, berikut merupakan sebuah contoh bagaimana cara tersebut dapat diimplementasikan.
```html
- Bank Account Balance
- {{ accountInUSD }}
+ Saldo Akun Bank
+ {{ saldoDalamIDR }}
```
-## Migration Strategy
+## Strategi Migrasi
-Instead of using filters, we recommend replacing them with computed properties or methods.
+Dibandingkan menggunakan _filter_, kami menyarankan Anda untuk mengganti _filter_ dengan properti _computed_ atau _method_.
[Migration build flags:](migration-build.html#compat-configuration)
@@ -80,28 +80,29 @@ Instead of using filters, we recommend replacing them with computed properties o
### Global Filters
-If you are using filters that were globally registered and then used throughout your app, it's likely not convenient to replace them with computed properties or methods in each individual component.
+Apabila Anda menggunakan _filter_ yang didaftarkan secara global dan menggunakan _filter_ tersebut pada aplikasi Anda, tentunya mengganti _filter_ tersebut dengan properti _computed_ atau _method_ pada setiap komponen merupakan hal yang tidak praktis.
-Instead, you can make your global filters available to all components through [globalProperties](../../api/application-config.html#globalproperties):
+Sebaliknya, Anda dapat membuat _filter_ global Anda dapat diakses oleh seluruh komponen menggunakan[globalProperties](../../api/application-config.html#globalproperties):
```js
// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
- currencyUSD(value) {
- return '$' + value
+ mataUangIDR(value) {
+ return 'IDR ' + value
}
}
```
-Then you can fix all templates using this `$filters` object like this:
+Kemudian Anda dapat mengganti setiap _template_ menggunakan objek `$filters` tersebut seperti berikut:
```html
- Bank Account Balance
- {{ $filters.currencyUSD(accountBalance) }}
+ Saldo Akun Bank
+ {{ $filters.mataUangIDR(saldoAkun) }}
```
-Note that with this approach, you can only use methods, not computed properties, as the latter only make sense when defined in the context of an individual component.
+Perlu diingat bahwa dengan menggunakan pendekatan ini, Anda tidak dapat menggunakan properti _computed_.
+Anda hanya dapat menggunakan _method_, karena penggunaan _method_ merupakan hal yang masuk akal bila dilihat dalam konteks komponen secara individu.
diff --git a/src/guide/migration/fragments.md b/src/guide/migration/fragments.md
index c6a5af7c26..b15644ce97 100644
--- a/src/guide/migration/fragments.md
+++ b/src/guide/migration/fragments.md
@@ -5,13 +5,13 @@ badges:
# Fragments
-## Overview
+## Gambaran Umum
-In Vue 3, components now have official support for multi-root node components, i.e., fragments!
+Pada Vue versi 3, komponen memiliki dukungan resmi terhadap komponen _multi-root node_, atau dikenal sebagai _fragments_
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-In 2.x, multi-root components were not supported and would emit a warning when a user accidentally created one. As a result, many components are wrapped in a single `` in order to fix this error.
+Pada Vue versi 2.x, komponen _multi-root_ tidak didukung dan akan mengeluarkan sebuah peringatan ketika pengguna secara tidak sengaja membuat komponen tersebut. Untuk mengatasi masalah tersebut, banyak komponen yang dibungkus pada sebuah `
`.
```html
@@ -24,9 +24,9 @@ In 2.x, multi-root components were not supported and would emit a warning when a
```
-## 3.x Syntax
+## Sintaks Vue versi 3.x
-In 3.x, components now can have multiple root nodes! However, this does require developers to explicitly define where attributes should be distributed.
+Pada Vue versi 3.x, komponen dapat memiliki banyak _root node_. Namun, hal tersebut menuntut pengembang untuk menyatakan secara eksplisit di mana atribut harus didistribusikan.
```html
@@ -37,4 +37,4 @@ In 3.x, components now can have multiple root nodes! However, this does require
```
-For more information on how attribute inheritance works, see [Non-Prop Attributes](/guide/component-attrs.html).
+Untuk informasi lebih lanjut mengenai cara kerja pewarisan atribut, silahkan Anda membaca [Atribut Bukan Properti](/guide/component-attrs.html).
diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index f84aa94b20..fb0fa7dff3 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -3,36 +3,36 @@ badges:
- breaking
---
-# Functional Components
+# Komponen Fungsional
-## Overview
+## Gambaran Umum
-In terms of what has changed, at a high level:
+Berikut merupakan gambaran umum tentang perubahan yang terjadi:
-- Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
-- Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
-- **BREAKING:** `functional` attribute on single-file component (SFC) `
` is removed
-- **BREAKING:** `{ functional: true }` option in components created by functions is removed
+- Peningkatan performa komponen fungsional yang terdapat pada Vue versi 2.x dapat diabaikan pada Vue versi 3.x, sehingga kami menyarankan Anda untuk menggunakan komponen _stateful_.
+- Komponen fungsional hanya dapat dibuat menggunakan sebuah fungsi biasa yang menerima `props` dan `context` (yang di dalamnya terdapat `slots`, `attrs`, dan `emit`) sebagai parameter.
+- **MERUSAK** Atribut `fungsional` pada _tag_ `` milik _single-file component_ (SFC) dihapus.
+- **MERUSAK** Opsi `{ functional: true }` pada komponen yang dibuat dengan fungsi dihapus.
-For more information, read on!
+Lanjutkan membaca untuk informasi lebih lanjut.
-## Introduction
+## Pengenalan
-In Vue 2, functional components had two primary use cases:
+Pada Vue versi 2, komponen fungsional memiliki dua kasus penggunaan yaitu:
-- as a performance optimization, because they initialized much faster than stateful components
-- to return multiple root nodes
+- sebagai sebuah bentuk optimisasi performa, karena komponen fungsional akan diinisialisasi lebih cepat dibandingkan dengan komponen _stateful_.
+- agar dapat menghasilkan lebih dari satu _node_ utama.
-However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
+Namun, pada Vue versi 3, performa dari komponen _stateful_ telah ditingkatkan sehingga perbedaan performa antara komponen _stateful_ dan komponen fungsional dapat diabaikan. Sebagai tambahan, saat ini komponen _stateful_ juga sudah dapat menghasilkan lebih dari satu _node_ utama.
-As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.
+Sehingga, satu-satunya kasus penggunaan dari komponen fungsional adalah komponen-komponen sederhana, seperti sebuah komponen yang menghasilkan _heading_ yang dinamis. Selain itu, kami menyarankan Anda untuk menggunakan komponen _stateful_ seperti biasanya.
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-Using the `` component, which is responsible for rendering out the appropriate heading (i.e., `h1`, `h2`, `h3`, etc.), this could have been written as a single-file component in 2.x as:
+Pada komponen ``, yang berfungsi untuk menghasilkan _heading_ yang sesuai (entah `h1`, `h2`, `h3`, dan lain-lain), komponen tersebut dapat ditulis dalam sebuah _single-file component_ pada Vue versi 2.x sebagai:
```js
-// Vue 2 Functional Component Example
+// Contoh komponen fungsional Vue versi 2
export default {
functional: true,
props: ['level'],
@@ -42,10 +42,10 @@ export default {
}
```
-Or, for those who preferred the `` in a single-file component:
+Atau, bagi Anda yang lebih suka menggunakan `` dalam _single-file component_:
```vue
-
+// Contoh komponen fungsional Vue versi 2 menggunakan
```
-## 3.x Syntax
+## Sintaks Vue versi 3.x
-### Components Created by Functions
+### Komponen yang Dibuat oleh Fungsi
-Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }` component option.
+Sekarang pada Vue versi 3, seluruh komponen fungsional dibuat menggunakan sebuah fungsi biasa. Dengan kata lain, Anda tidak perlu untuk mendefinisikan `{ functional: true }` pada pengaturan komponen.
-They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
+Fungsi tersebut akan menerima dua argumen: `props` dan `context`. Argumen `context` adalah sebuah objek yang memuat properti `attrs`, `slots`, dan `emit` untuk komponen tersebut.
-In addition, rather than implicitly provide `h` in a `render` function, `h` is now imported globally.
+Sebagai tambahan, dibandingkan dengan menyediakan `h` dalam fungsi `render` secara implisit, sekarang `h` akan diimpor secara global.
-Using the previously mentioned example of a `` component, here is how it looks now.
+Mengacu pada komponen `` sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:
```js
import { h } from 'vue'
@@ -87,9 +87,9 @@ export default DynamicHeading
### Single File Components (SFCs)
-In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute and rename all references of `props` to `$props` and `attrs` to `$attrs`.
+Pada Vue versi 2.x, perbedaan performa antara komponen _stateful_ dan fungsional berkurang secara drastis dan tidak signifikan untuk sebagian besar kasus penggunaan. Sehingga, cara migrasi bagi pengembang yang menggunakan atribut `functional` pada SFC adalah dengan menghapus atribut tersebut dan menamai ulang segala acuan pada `props` menjadi `$props` dan `attrs` menjadi `$attrs`.
-Using our `` example from before, here is how it would look now.
+Mengacu pada contoh `` sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:
```vue{1,3,4}
@@ -106,15 +106,15 @@ export default {
```
-The main differences are that:
+Perbedaan utama dari kedua cara penulisan tersebut adalah:
-1. `functional` attribute removed on ``
-1. `listeners` are now passed as part of `$attrs` and can be removed
+1. Atribut `functional` dihapus dari ``
+1. Sekarang, `listeners` diteruskan sebagai bagian dari `$attrs` dan dapat dihapus
-## Next Steps
+## Langkah Selanjutnya
-For more information on the usage of the new functional components and the changes to render functions in general, see:
+Anda dapat memperoleh informasi lebih lanjut mengenai penggunaan komponen fungsional yang baru dan perubahan pada fungsi _render_ melalui:
-- [Migration: Render Functions](/guide/migration/render-function-api.html)
-- [Guide: Render Functions](/guide/render-function.html)
-- [Migration build flag: `COMPONENT_FUNCTIONAL`](migration-build.html#compat-configuration)
+- [Migrasi: Fungsi Render](/guide/migration/render-function-api.html)
+- [Panduan: Fungsi Render](/guide/render-function.html)
+- [_Migration build flag_: `COMPONENT_FUNCTIONAL`](migration-build.html#compat-configuration)
diff --git a/src/guide/migration/global-api-treeshaking.md b/src/guide/migration/global-api-treeshaking.md
index d730cf71e6..ba03f93044 100644
--- a/src/guide/migration/global-api-treeshaking.md
+++ b/src/guide/migration/global-api-treeshaking.md
@@ -3,119 +3,123 @@ badges:
- breaking
---
-# Global API Treeshaking
+# Treeshaking API Global
-## 2.x Syntax
+## Sintaks Vue versi 2.x
-If you’ve ever had to manually manipulate DOM in Vue, you might have come across this pattern:
+Apabila Anda pernah melakukan manipulasi DOM secara manual pada Vue, mungkin Anda pernah menggunakan pola berikut:
```js
import Vue from 'vue'
Vue.nextTick(() => {
- // something DOM-related
+ // sesuatu yang berhubungan dengan DOM
})
```
-Or, if you’ve been unit-testing an application involving [async components](/guide/component-dynamic-async.html), chances are you’ve written something like this:
+Atau, apabila Anda pernah melakukan _unit testing_ pada sebuah aplikasi yang melibatakan [komponen asinkron](/guide/component-dynamic-async.html), kemungkinan Anda pernah menulis kode program seperti berikut:
```js
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
-test('an async feature', async () => {
+test('sebuah fitur asinkron', async () => {
const wrapper = shallowMount(MyComponent)
- // execute some DOM-related tasks
+ // lakukan beberapa hal yang berkaitan dengan DOM
await wrapper.vm.$nextTick()
- // run your assertions
+ // jalankan tuntutan Anda
})
```
-`Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current instance for convenience.
+`Vue.nextTick()` merupakan sebuah API global yang diekspos secara langsung pada sebuah objek Vue – nyatanya, _method_ `$nextTick` merupakan sebuah _wrapper_ untuk fungsi `Vue.nextTick()` dengan konteks `this` pada _callback_ yang diikat secara otomatis pada objek tempat fungsi tersebut dipanggil untuk mempermudah proses pengembangan.
-But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in your app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
+Tapi bagaimana bila Anda tidak pernah berurusan dengan manipulasi DOM secara manual, atau Anda tidak menggunakan atau menguji komponen asinkron pada aplikasi Anda? Atau bagaimana bila, dengan alasan tertentu, Anda lebih suka menggunakan `window.setTimeout()`? Dalam kasus tersebut, kode `nextTick()` akan menjadi kode mati – yang merupakan kode yang sudah ditulis namun tidak pernah dipakai. Ingat bahwa kode mati bukanlah sesuaty yang baik, khususnya dalam konteks sisi klien dimana setiap _kilobyte_ penting.
-Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
+_Module bundler_ seperti [webpack](https://webpack.js.org/) mendukung fitur [_tree-shaking_](https://webpack.js.org/guides/tree-shaking/), yang merupakan sebuah istilah untuk pemangkasan kode mati. Sayangnya, karena cara kode Vue ditulis pada versi sebelumnya, API global seperti `Vue.nextTick()` tidak dapat dipangkas dan tetap diikutsertakan pada kode akhir terlepas API tersebut digunakan atau tidak.
-## 3.x Syntax
+## Sintaks Vue versi 3.x
-In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind. As a result, the global APIs can now only be accessed as named exports for the ES Modules build. For example, our previous snippets should now look like this:
+Pada Vue versi 3, API global dan internal telah ditrusktur ulang supaya mendukung fitur _tree-shaking_. Sehingga, API global sekarang dapat diakses melalui _named export_ untuk pembangunan modul ES. Sebagai contoh, kode program di atas dapat ditulis ulang menjadi seperti berikut:
```js
import { nextTick } from 'vue'
nextTick(() => {
- // something DOM-related
+ // sesuatu yang berkaitan dengan DOM
})
```
-and
+dan
```js
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'
-test('an async feature', async () => {
+test('sebuah fitur asinkron', async () => {
const wrapper = shallowMount(MyComponent)
- // execute some DOM-related tasks
+ // lakukan beberapa hal yang berkaitan dengan DOM
- await nextTick()
+ await wrapper.vm.$nextTick()
- // run your assertions
+ // jalankan tuntutan Anda
})
```
-Calling `Vue.nextTick()` directly will now result in the infamous `undefined is not a function` error.
+Memanggil `Vue.nextTick()` secara langsung sekarang akan menghasilkan galat `undefined is not a function`.
-With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
+Dengan perubahan tersebut, dengan catatan bahwa _bundler_ modul mendukung fitur _tree-shaking_, API global yang tidak digunakan pada aplikasi Vue akan dipangkas dari kode akhir, menghasilkan ukuran berkas yang optimal.
-## Affected APIs
+## API yang Terdampak
-These global APIs in Vue 2.x are affected by this change:
+Berikut merupakan API global pada Vue versi 2.x yang terdampak oleh perubahan tersebut:
- `Vue.nextTick`
-- `Vue.observable` (replaced by `Vue.reactive`)
+- `Vue.observable` (diganti dengan `Vue.reactive`)
- `Vue.version`
-- `Vue.compile` (only in full builds)
-- `Vue.set` (only in compat builds)
-- `Vue.delete` (only in compat builds)
+- `Vue.compile` (hanya pada distribusi Vue yang lengkap)
+- `Vue.set` (hanya pada distribusi Vue yang ringkas)
+- `Vue.delete` (hanya pada distribusi Vue yang ringkas)
-## Internal Helpers
+## Bantuan INternal
-In addition to public APIs, many of the internal components/helpers are now exported as named exports as well. This allows the compiler to output code that only imports features when they are used. For example the following template:
+Selain API publik, banyak komponen atau fungsi bantuan internal yang sekarang diekspor sebagai _named export_. Hal tersebut memungkinkan kompilator untuk menghasilkan kode program yang hanya mengimpor fitur yang dibutuhkan. Sebagai contoh, pada _template_ berikut:
```html
- hello
+ halo
```
-is compiled into something similar to the following:
+akan dikompilasi menjadi kode berikut:
```js
import { h, Transition, withDirectives, vShow } from 'vue'
export function render() {
- return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
+ return h(Transition, [withDirectives(h('div', 'halo'), [[vShow, this.ok]])])
}
```
-This essentially means the `Transition` component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `` component, the code supporting this feature will not be present in the final bundle.
+Hal tersebut menandakan bahwa komponen `Transition` hanya akan diimpor apabila aplikasi yang Anda buat menggunakan komponen tersebut. Dengan kata lain, apabila aplikasi yang Anda buat tidak menggunakan komponen `Transition`, kode yang mendukung fitur tersebut tidak akan ada pada kode akhir.
-With global tree-shaking, the user only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
+<<<<<<< HEAD
+Dengan _tree-shaking_ global, pengguna hanya akan "membayar" untuk fitur yang benar-benar mereka gunakan. Selain itu, karena fitur yang tidak wajib tidak akan menambah ukuran kode program pada aplikasi yang tidak menggunakan fitur tersebut, ukuran _framework_ tidak lagi menjadi masalah apabila terdapat penambahan fitur utama baru pada versi-versi selanjutnya.
+=======
+With global tree-shaking, the users only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
+>>>>>>> beecaad1bfd9fa3716b504a5a6d526c23b98ad4d
-::: warning Important
-The above only applies to the [ES Modules builds](/guide/installation.html#explanation-of-different-builds) for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
+::: warning Penting
+Keuntungan di atas hanya berlaku bagi kode program yang memanfaatkan [modul ES](/guide/installation.html#explanation-of-different-builds) yang dibangun menggunakan _bundler_ yang mendukung fitur _tree-shaking_ - kode program yang dibangun menggunakan modul UMD tetap memasukkan seluruh fitur dan mengekspos seluruh variabel global dari Vue (dan kompilator tetap akan menghasilkan kode program yang sebisa mungkin menggunakan API global dibandingkan mengimpor API).
:::
-## Usage in Plugins
+## Penggunaan pada Plugin
-If your plugin relies on an affected Vue 2.x global API, for instance:
+Apabila _plugin_ Anda bergantung pada API global yang terdampak pada Vue versi 2.x, seperti:
```js
const plugin = {
@@ -127,7 +131,7 @@ const plugin = {
}
```
-In Vue 3, you’ll have to import it explicitly:
+Pada Vue versi 3, Anda harus mengimpor fitur tersebut secara eksplisit:
```js
import { nextTick } from 'vue'
@@ -141,7 +145,7 @@ const plugin = {
}
```
-If you use a module bundle like webpack, this may cause Vue’s source code to be bundled into the plugin, and more often than not that’s not what you'd expect. A common practice to prevent this from happening is to configure the module bundler to exclude Vue from the final bundle. In webpack's case, you can use the [`externals`](https://webpack.js.org/configuration/externals/) configuration option:
+Apabila Anda menggunakan _bundler_ modul seperti webpack, _bundler_ tersebut dapat menyebabkan kode sumber Vue diikutsertakan pada _plugin_ tersebut, dimana seringkali Anda tidak mengharapkan perilaku tersebut. Cara yang umum digunakan untuk mencegah perilaku tersebut adalah dengan mengatur _bundler_ untuk tidak mengikutsertakan Vue pada kode akhir. Pada webpack, Anda dapat menggunakna opsi [`externals`](https://webpack.js.org/configuration/externals/):
```js
// webpack.config.js
@@ -153,9 +157,9 @@ module.exports = {
}
```
-This will tell webpack to treat the Vue module as an external library and not bundle it.
+Konfigurasi tersebut akan menyebabkan webpack mengenali modul Vue sebagai pustaka eksternal dan tidak mengikutsertakannya.
-If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) warning, which can be suppressed with the `external` option:
+Apabila Anda menggunakan [Rollup](https://rollupjs.org/) sebagai _bundler_ modul Anda, Anda dapat mendapatkan fitur yang sama seperti webpack, karena secara bawaan Rollup akan menganggap ID dari modul absolut (`'vue'` dalam kasus ini) sebagai _dependency_ eksternal dan tidak mengikutsertakannya pada kode akhir. Dalam proses pembentukan kode program, Rollup mungkin akan mengeluarkan peringatan [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency), yang dapat diabaikan menggunakan opsi `external`:
```js
// rollup.config.js
diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md
index 564247dcb1..7a8395e2b1 100644
--- a/src/guide/migration/global-api.md
+++ b/src/guide/migration/global-api.md
@@ -3,20 +3,20 @@ badges:
- breaking
---
-# Global API
+# API Global
-Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to register a global component, you would use the `Vue.component` API like this:
+Vue versi 2.x memiliki beberapa API dan konfigurasi yang secara global mengubah perilaku Vue. Sebagai contoh, untuk membuat sebuah komponen global, Anda akan menggunakan API `Vue.component` seperti berikut:
```js
Vue.component('button-counter', {
data: () => ({
count: 0
}),
- template: 'Clicked {{ count }} times. '
+ template: 'Ditekan sebanyak {{ count }} kali. '
})
```
-Similarly, this is how a global directive is declared:
+Mirip dengan komponen global, berikut merupakan bagaimana sebuah _directive_ global dideklarasikan:
```js
Vue.directive('focus', {
@@ -24,27 +24,27 @@ Vue.directive('focus', {
})
```
-While this approach is convenient, it leads to a couple of problems. Technically, Vue 2 doesn't have a concept of an "app". What we define as an app is simply a root Vue instance created via `new Vue()`. Every root instance created from the same Vue constructor **shares the same global configuration**. As a result:
+Walaupun cara di atas cenderung praktis, namun cara tersebut menimbulkan beberapa masalah. Secara teknis, Vue versi 2 tidak memiliki konsep "aplikasi". Apa yang Anda definisikan sebagai sebuah aplikasi sebenarnya merupakan sebuah objek Vue utama yang dibuat menggunakan `new Vue()`. Setiap objek Vue dibuat dari konstruktor Vue yang sama **akan memiliki konfigurasi global yang sama**. Sehingga:
-- Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
+- Konfigurasi global mempermudah adanya intervensi pada kasus uji lain selama proses pengujian secara tidak sengaja. Pengguna harus berhati-hati dalam menyimpan konfigurasi global yang asli dan mengembalikan konfigurasi tersebut setelah setiap kasus uji dijalankan (sebagai contoh, mengembalikan `Vue.config.errorHandler` seperti sedia kala). Bahkan, beberapa API seperti `Vue.use` dan `Vue.mixin` tidak memiliki cara untuk mengembalikan perubahan yang mereka lakukan. Hal tersebut membuat pengujian yang melibatkan _plugin_ menjadi rumit. Nyatanya, `vue-test-utils` harus mengimplementasikan sebuah API khusus bernama `createLocalVue` untuk mengatasi masalah tersebut:
```js
import { createLocalVue, mount } from '@vue/test-utils'
- // create an extended `Vue` constructor
- const localVue = createLocalVue()
+// buat sebuah konstruktor `Vue` khusus
+const vueLokal = createLocalVue()
- // install a plugin “globally” on the “local” Vue constructor
- localVue.use(MyPlugin)
+// tambahkan sebuah _plugin_ secara global pada konstruktor Vue lokal
+vueLokal.use(PluginKu)
- // pass the `localVue` to the mount options
- mount(Component, { localVue })
- ```
+// teruskan `localVue` pada opsi _mount_
+mount(Component, { vueLokal })
+```
-- Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations.
+- Konfigurasi global mempersulit untuk mendistribusikan objek Vue yang sama pada lebih dari satu aplikasi pada halaman yang sama, namun memiliki konfigurasi global yang berbeda.
```js
- // this affects both root instances
+ // Kode dibawah ini akan berpengaruh pada kedua objek di bawah
Vue.mixin({
/* ... */
})
@@ -53,11 +53,11 @@ While this approach is convenient, it leads to a couple of problems. Technically
const app2 = new Vue({ el: '#app-2' })
```
-To avoid these problems, in Vue 3 we introduce…
+Untuk mengatasi masalah tersebut, pada Vue 3 kami memperkenalkan
-## A New Global API: `createApp`
+## Sebuah API Global Baru: `createApp`
-Calling `createApp` returns an _app instance_, a new concept in Vue 3.
+_Method_ `createApp` akan mengembalikan sebuah objek aplikasi, sebuah konsep baru pada Vue versi 3.
```js
import { createApp } from 'vue'
@@ -65,7 +65,7 @@ import { createApp } from 'vue'
const app = createApp({})
```
-If you're using a [CDN](/guide/installation.html#cdn) build of Vue then `createApp` is exposed via the global `Vue` object:
+Jika Anda menggunakan versi [CDN](/guide/installation.html#cdn) Vue, fungsi `createApp` dapat diakses melalui objek global `Vue`:
```js
const { createApp } = Vue
@@ -73,71 +73,71 @@ const { createApp } = Vue
const app = createApp({})
```
-An app instance exposes a subset of the Vue 2 global APIs. The rule of thumb is _any APIs that globally mutate Vue's behavior are now moved to the app instance_. Here is a table of the Vue 2 global APIs and their corresponding instance APIs:
+Sebuah objek aplikasi merupakan bagian dari API global pada versi sebelumnya. Secara praktis, hal tersebut berarti bahwa setiap API yang mengubah perilaku Vue secara global telah dipindahkan pada objek aplikasi. Berikut merupakan tabel perbandingan antara API global saat ini dan API pada objek aplikasi:
-| 2.x Global API | 3.x Instance API (`app`) |
-| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| Vue.config | app.config |
-| Vue.config.productionTip | _removed_ ([see below](#config-productiontip-removed)) |
-| Vue.config.ignoredElements | app.config.compilerOptions.isCustomElement ([see below](#config-ignoredelements-is-now-config-compileroptions-iscustomelement)) |
-| Vue.component | app.component |
-| Vue.directive | app.directive |
-| Vue.mixin | app.mixin |
-| Vue.use | app.use ([see below](#a-note-for-plugin-authors)) |
-| Vue.prototype | app.config.globalProperties ([see below](#vue-prototype-replaced-by-config-globalproperties)) |
-| Vue.extend | _removed_ ([see below](#vue-extend-removed)) |
+| API Global Vue versi 2.x | API objek Vue versi 3.x (`app`) |
+| -------------------------- | ----------------------------------------------------------------------------------------------- |
+| Vue.config | app.config |
+| Vue.config.productionTip | dihapus ([lihat penjelasan](#config-productiontip-removed)) |
+| Vue.config.ignoredElements | app.config.isCustomElement ([lihat penjelasan](#config-ignoredelements-is-now-config-iscustomelement)) |
+| Vue.component | app.component |
+| Vue.directive | app.directive |
+| Vue.mixin | app.mixin |
+| Vue.use | app.use ([lihat penjelasan](#a-note-for-plugin-authors)) |
+| Vue.prototype | app.config.globalProperties ([lihat penjelasan](#vue-prototype-replaced-by-config-globalproperties)) |
+| Vue.extend | dihapus ([lihat penjelasan](#vue-extend-removed)) |
-All other global APIs that do not globally mutate behavior are now named exports, as documented in [Global API Treeshaking](./global-api-treeshaking.html).
+API global lainnya yang tidak mengubah perilaku Vue secara global telah dipindahkan menjadi _named export_, seperti yang tertera pada [Treeshaking API Global](./global-api-treeshaking.html).
-### `config.productionTip` Removed
+### `config.productionTip` Dihapus
-In Vue 3.x, the "use production build" tip will only show up when using the "dev + full build" (the build that includes the runtime compiler and has warnings).
+Pada Vue versi 3.x, saran "gunakan produksi build" hanya akan muncul apabila Anda menggunakan kode produksi selama pengembangan dan kode produksi penuh (kode program yang menyertakan kompilator waktu eksekusi dan memiliki peringatan)
-For ES modules builds, since they are used with bundlers, and in most cases a CLI or boilerplate would have configured the production env properly, this tip will no longer show up.
+Untuk kode Vue yang memanfaatkan modul ES, karena kode tersebut digunakan dengan _bundler_, dan karena kebanyakan sebuah CLI atau _boilerplate_ telah mengatur variabel produksi dengan benar, saran tersebut tidak akan muncul kembali.
[Migration build flag: `CONFIG_PRODUCTION_TIP`](migration-build.html#compat-configuration)
### `config.ignoredElements` Is Now `config.compilerOptions.isCustomElement`
-This config option was introduced with the intention to support native custom elements, so the renaming better conveys what it does. The new option also expects a function which provides more flexibility than the old string / RegExp approach:
+Opsi ini diperkenalkan dengan tujuan untuk menyediakan dukungan pada elemen kustom bawaan, sehingga perubahan nama yang dilakukan lebih mencerminkan kegunaan dari opsi ini. Opsi yang baru juga mampu menerima sebuah fungsi sehingga lebih fleksibel dibandingkan cara lama yang hanya menerima string atau RegExp:
```js
-// before
+// sebelum
Vue.config.ignoredElements = ['my-el', /^ion-/]
-// after
+// sesudah
const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
```
-::: tip Important
+::: tip Penting
-In Vue 3, the check of whether an element is a component or not has been moved to the template compilation phase, therefore this config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
+Pada Vue versi 3.0, pemeriksaan pada elemen untuk memeriksa apakah elemen tersebut merupakan sebuah komponen atau bukan telah dipindahkan pada fase kompilasi _template_, sehingga opsi ini hanya berpengaruh apabila Anda menggunakan kompilator pada waktu eksekusi. Apabila Anda menggunakan kode program yang telah dibangun sepenuhnya, opsi `isCustomElement` harus diteruskan pada `@vue/compiler-dom` pada penyetelan pembangunan kode program - sebagai contoh, melalui [opsi `compilerOptions` pada vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
-- If `config.compilerOptions.isCustomElement` is assigned to when using a runtime-only build, a warning will be emitted instructing the user to pass the option in the build setup instead;
-- This will be a new top-level option in the Vue CLI config.
-:::
+- Apabila `config.compilerOptions.isCustomElement` ditetapkan saat Anda menggunakan kode program yang telah dibangun sepenuhnya, sebuah peringatan akan muncul dan meminta pengguna untuk meneruskan opsi tersebut pada penyetelan pembangunan kode program.
+- Opsi ini akan menjadi opsi utama baru pada konfigurasi Vue CLI.
+ :::
-[Migration build flag: `CONFIG_IGNORED_ELEMENTS`](migration-build.html#compat-configuration)
+[_Migration build flag_: `CONFIG_IGNORED_ELEMENTS`](migration-build.html#compat-configuration)
-### `Vue.prototype` Replaced by `config.globalProperties`
+### `Vue.prototype` Diganti Dengan `config.globalProperties`
-In Vue 2, `Vue.prototype` was commonly used to add properties that would be accessible in all components.
+Pada Vue versi 2, `Vue.prototype` biasanya digunakan untuk menambahkan properti baru yang dapat digunakan pada seluruh komponen yang ada pada aplikasi.
-The equivalent in Vue 3 is [`config.globalProperties`](/api/application-config.html#globalproperties). These properties will be copied across as part of instantiating a component within the application:
+Opsi yang sama dengan opsi tersebut pada Vue 3 adalah [`config.globalProperties`](/api/application-config.html#globalproperties). Properti-properti yang didaftarkan menggunakan opsi ini akan disalin sebagai bagian dari instansiasi komponen pada aplikasi:
```js
-// before - Vue 2
+// sebelum - Vue versi 2
Vue.prototype.$http = () => {}
```
```js
-// after - Vue 3
+// sesudah - Vue versi 3
const app = createApp({})
app.config.globalProperties.$http = () => {}
```
-Using `provide` (discussed [below](#provide-inject)) should also be considered as an alternative to `globalProperties`.
+Opsi `provide` (lihat [penjelasan berikut](#provide-inject)) juga dapat menjadi alternatif dari `globalProperties`.
[Migration build flag: `GLOBAL_PROTOTYPE`](migration-build.html#compat-configuration)
@@ -191,9 +191,9 @@ In Vue 3, we strongly recommend favoring composition via [Composition API](/api/
[Migration build flag: `GLOBAL_EXTEND`](migration-build.html#compat-configuration)
-### A Note for Plugin Authors
+### Catatan untuk pengembang plugin
-It is a common practice for plugin authors to install the plugins automatically in their UMD builds using `Vue.use`. For instance, this is how the official `vue-router` plugin installs itself in a browser environment:
+Biasanya, pengembang _plugin_ memilih untuk melakukan instalasi _plugin_ secara otomatis pada kode UMD menggunakan `Vue.use`. Sebagai contoh, berikut merupakan cara _plugin_ resmi `vue-router` melakukan instalasi pada lingkungan perambah:
```js
var inBrowser = typeof window !== 'undefined'
@@ -203,26 +203,26 @@ if (inBrowser && window.Vue) {
}
```
-As the `use` global API is no longer available in Vue 3, this method will cease to work and calling `Vue.use()` will now trigger a warning. Instead, the end-user will now have to explicitly specify using the plugin on the app instance:
+Karena API global `use` sudah tidak tersedia pada Vue versi 3, cara ini tidak dapat digunakan lagi dan memanggil `Vue.use` akan menghasilkan sebuah peringatan. Sebaliknya, pengguna akhir sekarang harus menyatakan penggunaan _plugin_ secara eksplisit pada objek aplikasi:
```js
const app = createApp(MyApp)
app.use(VueRouter)
```
-## Mounting App Instance
+## Memasang Objek Aplikasi
-After being initialized with `createApp(/* options */)`, the app instance `app` can be used to mount a root component instance with `app.mount(domTarget)`:
+Setelah diinisialisasi menggunakan `createApp(/* opsi */)`, objek aplikasi `app` dapat digunakan untuk memasang objek utama Vue menggunakan `app.mount(domTarget)`:
```js
import { createApp } from 'vue'
-import MyApp from './MyApp.vue'
+import AplikasiKu from './AplikasiKu.vue'
-const app = createApp(MyApp)
+const app = createApp(AplikasiKu)
app.mount('#app')
```
-With all these changes, the component and directive we have at the beginning of the guide will be rewritten into something like this:
+Dengan seluruh perubahan yang terjadi, komponen dan _directive_ yang sudah ditulis pada awal panduan ini dapat ditulis ulang menjadi seperti berikut:
```js
const app = createApp(MyApp)
@@ -231,16 +231,16 @@ app.component('button-counter', {
data: () => ({
count: 0
}),
- template: 'Clicked {{ count }} times. '
+ template: 'Ditekan sebanyak {{ count }} kali. '
})
app.directive('focus', {
mounted: el => el.focus()
})
-// now every application instance mounted with app.mount(), along with its
-// component tree, will have the same “button-counter” component
-// and “focus” directive without polluting the global environment
+// sekarang setiap objek aplikasi dipasang menggunakan app.mount(), bersama
+// dengan seluruh komponen, akan memiliki komponen `button-counter` yang sama
+// dan directive `focus` tanpa mempengaruhi objek Vue global
app.mount('#app')
```
@@ -248,43 +248,43 @@ app.mount('#app')
## Provide / Inject
-Similar to using the `provide` option in a 2.x root instance, a Vue 3 app instance can also provide dependencies that can be injected by any component inside the app:
+Mirip dengan penggunaan opsi `provide` pada objek utama Vue versi 2.x, sebuah objek aplikasi yang dibangun menggunakan Vue versi 3 juga dapat menyediakan _dependency_ yang dapat diteruskan oleh segala komponen yang ada pada aplikasi:
```js
-// in the entry
-app.provide('guide', 'Vue 3 Guide')
+// pada berkas utama
+app.provide('panduan', 'Panduan Vue 3')
-// in a child component
+// pada komponen turunan
export default {
inject: {
- book: {
- from: 'guide'
+ buku: {
+ from: 'panduan'
}
},
- template: `{{ book }}
`
+ template: `{{ buku }}
`
}
```
-Using `provide` is especially useful when writing a plugin, as an alternative to `globalProperties`.
+Menggunakan `provide` akan sangat berguna ketika sedang membangun sebuah _plugin_, sebagai alternatif dari `globalProperties`.
-## Share Configurations Among Apps
+## Mendistribusikan Konfigurasi Antar Aplikasi
-One way to share configurations e.g. components or directives among apps is to create a factory function, like this:
+Salah satu cara untuk mendistribusikan konfigurasi — seperti komponen dan _directive — antar aplikasi adalah dengan membuat fungsi _factory_ seperti berikut:
```js
import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
-const createMyApp = options => {
+const buatAplikasi = opsi => {
const app = createApp(options)
app.directive('focus' /* ... */)
return app
}
-createMyApp(Foo).mount('#foo')
-createMyApp(Bar).mount('#bar')
+buatAplikasi(Foo).mount('#foo')
+buatAplikasi(Bar).mount('#bar')
```
-Now the `focus` directive will be available in both `Foo` and `Bar` instances and their descendants.
+Sekarang, _directive_ `focus` akan tersedia pada objek Foo dan Bar beserta seluruh turunannya.
diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index 05cf6f126c..0a870e616a 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -3,15 +3,15 @@ badges:
- breaking
---
-# Inline Template Attribute
+# Atribut Templat Inline
-## Overview
+## Gambaran Umum
-Support for the [inline-template feature](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) has been removed.
+Dukungan untuk [fitur inline-template](https://vuejs.org/v2/guide/components-edge-cases.html#Inline-Templates) telah dihapuskan.
-## 2.x Syntax
+## 2.x Sintaksis
-In 2.x, Vue provided the `inline-template` attribute on child components to use its inner content as its template instead of treating it as distributed content.
+Di 2.x, Vue menyediakan atribut `inline-template` pada komponen anak/turunan. Komponen turunan ini menggunakan konten didalamnya sebagai templat komponen daripada memperlakukannya sebagai konten terdistribusi.
```html
@@ -22,19 +22,19 @@ In 2.x, Vue provided the `inline-template` attribute on child components to use
```
-## 3.x Syntax
+## 3.x Sintaksis
-This feature will no longer be supported.
+Fitur ini tidak lagi didukung
-## Migration Strategy
+## Strategi dalam Migrasi
-Most of the use cases for `inline-template` assumes a no-build-tool setup, where all templates are written directly inside the HTML page.
+Banyak penggunaan `inline-template` diasumsikan menggunakan sebuah no-build-tool, dimana semua templat ditulis langsung ke dalam halaman HTML.
[Migration build flag: `COMPILER_INLINE_TEMPLATE`](migration-build.html#compat-configuration)
-### Option #1: Use `
```
-And in the component, target the template using a selector:
+Dan dalam komponen, target templat tersebut menggunakan sebuah selector:
```js
const MyComp = {
@@ -51,11 +51,11 @@ const MyComp = {
}
```
-This doesn't require any build setup, works in all browsers, is not subject to any in-DOM HTML parsing caveats (e.g. you can use camelCase prop names), and provides proper syntax highlighting in most IDEs. In traditional server-side frameworks, these templates can be split out into server template partials (included into the main HTML template) for better maintainability.
+Opsi ini tidak memerlukan suatu build setup, bekerja di semua peramban, bukan subjek dari suatu in-DOM HTML parsing caveats (contoh Anda dapat menggunakan camelCase pada penamaan prop), dan memberikan sorotan sintaksis yang benar pada kebanyakan IDEs. Pada kerangka kerja sisi-peladen tradisional, template ini dapat dipisah menjadi partisi templat peladen (termasuk templat HTML utama) agar mempermudah dalam pemeliharaan.
-### Option #2: Default Slot
+### Pilihan #2: Default Slot
-A component previously using `inline-template` can also be refactored using the default slot - which makes the data scoping more explicit while preserving the convenience of writing child content inline:
+Komponen yang sebelumnya menggunakan `inline-template` juga dapat direfaktor menggunakan default slot - Yang mana membuat jangkauan data menjadi lebih jelas sementara menjaga kemudahanan dalam menulis konten anak secara inline:
```html
@@ -69,7 +69,7 @@ A component previously using `inline-template` can also be refactored using the
```
-The child, instead of providing no template, should now render the default slot\*:
+Anak tersebut, daripada menyediakan templat kosong, sekarang seharusnya menampilkan default slot\*:
```html
@@ -28,7 +28,7 @@ In Vue 2.x, it was recommended to use `key`s on `v-if`/`v-else`/`v-else-if` bran
No
```
-The example above still works in Vue 3.x. However, we no longer recommend using the `key` attribute on `v-if`/`v-else`/`v-else-if` branches, since unique `key`s are now automatically generated on conditional branches if you don't provide them.
+Contoh diatas tetap bekerja di Vue 3.x. Namun, Kami tidak lagi merekomendasikan untuk memakai atribut `key` pada cabang `v-if`/`v-else`/`v-else-if`, karena `key` unik telah dibuat secara otomatis pada cabang kondisional jika Anda tidak memberikan atribut `key`.
```html
@@ -36,25 +36,25 @@ The example above still works in Vue 3.x. However, we no longer recommend using
No
```
-The breaking change is that if you manually provide `key`s, each branch must use a unique `key`. In most cases, you can remove these `key`s.
+Perubahan yang berbeda adalah Jika Anda Secara manual memberikan `key`, pada setiap cabang harus memiliki sebuah `key` unik. Pada banyak kasus, Anda dapat menghapus `key` tersebut.
```html
Yes
No
-
+
Yes
No
-
+
Yes
No
```
-## With ``
+## Dengan ``
-In Vue 2.x, a `` tag could not have a `key`. Instead, you could place the `key`s on each of its children.
+Pada Vue 2.x, sebuah tag `` tidak dapat memilki sebuah `key`. Sehingga, Anda dapat meletakkan `key` pada setiap anaknya.
```html
@@ -64,7 +64,7 @@ In Vue 2.x, a `` tag could not have a `key`. Instead, you could place
```
-In Vue 3.x, the `key` should be placed on the `` tag instead.
+Pada Vue 3.x, `key` tersebut dapat diletakkan pada tag ``.
```html
@@ -74,7 +74,7 @@ In Vue 3.x, the `key` should be placed on the `` tag instead.
```
-Similarly, when using `` with a child that uses `v-if`, the `key` should be moved up to the `` tag.
+Dengan mirip, ketika menggunakan `` dengan anaknya yang menggunakan `v-if`, `key` harus dinaikkan ke dalam tag ``.
```html
diff --git a/src/guide/migration/keycode-modifiers.md b/src/guide/migration/keycode-modifiers.md
index e7ceed4831..3f965c28f2 100644
--- a/src/guide/migration/keycode-modifiers.md
+++ b/src/guide/migration/keycode-modifiers.md
@@ -3,28 +3,28 @@ badges:
- breaking
---
-# KeyCode Modifiers
+# Pengubah KeyCode
-## Overview
+## Gambaran Umum
-Here is a quick summary of what has changed:
+Berikut adalah ringkasan singkat tentang apa yang telah berubah:
-- **BREAKING**: Using numbers, i.e. keyCodes, as `v-on` modifiers is no longer supported
-- **BREAKING**: `config.keyCodes` is no longer supported
+- **MERUSAK**: Pengunaan angka-angka, contoh. keyCodes, sebagai pengubah `v-on` tidak lagi didukung
+- **MERUSAK**: `config.keyCodes` tidak lagi didukung
-## 2.x Syntax
+## 2.x Sintaksis
-In Vue 2, `keyCodes` were supported as a way to modify a `v-on` method.
+Pada Vue 2, `keyCodes` didukung sebagai satu cara untuk mengubah suatu metode `v-on`.
```html
-
+
-
+
```
-In addition, you could define your own aliases via the global `config.keyCodes` option.
+Tambahan, Anda dapat mendefinisikan alias Anda sendiri melalui opsi global `config.keyCodes`.
```js
Vue.config.keyCodes = {
@@ -33,29 +33,40 @@ Vue.config.keyCodes = {
```
```html
-
+
-
+
```
-## 3.x Syntax
+## 3.x Sintaksis
-Since [`KeyboardEvent.keyCode` has been deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), it no longer makes sense for Vue 3 to continue supporting this as well. As a result, it is now recommended to use the kebab-case name for any key you want to use as a modifier.
+Dikarenakan [`KeyboardEvent.keyCode` telah usang](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), sangat tidak masuk akal jika Vue 3 tetap mendukung hal ini. Sebagai gantinya, direkomendasikan untuk penggunaan nama kebab-case untuk semua key yang Anda akan gunakan sebagai pengubah.
```html
-
-
+
+
+
+
+
```
-As a result, this means that `config.keyCodes` is now also deprecated and will no longer be supported.
+Hasilnya, hal ini berarti bahwa `config.keyCodes` juga telah usang dan tidak lagi didukung.
+
+## Strategi dalam Migrasi
+
+Untuk semua yang memakai `keyCode` pada codebase kalian, kami merekomendasikan pengubahaan `keyCode` menjadi penamaan kebab-cased yang setara.
-## Migration Strategy
+keys sebagai tanda baca dapat dituliskan secara literal. contoh. untuk key `,`:
+
+```html
+
+```
-For those using `keyCode` in their codebase, we recommend converting them to their kebab-cased named equivalents.
+Limitasi dari sintaksis mencegah beberapa karakter untuk dicocokan, seperti `"`, `'`, `/`, `=`, `>`, dan `.`. Sebagai gantinya, untuk karakter-karakter tersebut Anda dapat cek `event.key` di dalam listener.
-[Migration build flags:](migration-build.html#compat-configuration)
+[Flag build migrasi:](migration-build.html#compat-configuration)
- `CONFIG_KEY_CODES`
- `V_ON_KEYCODE_MODIFIER`
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
index 12dd8c6cee..121f3808f6 100644
--- a/src/guide/migration/listeners-removed.md
+++ b/src/guide/migration/listeners-removed.md
@@ -1,14 +1,14 @@
---
-title: $listeners removed
+title: Penghapusan $listeners
badges:
- breaking
---
-# `$listeners` removed
+# `$listeners` telah dihapus
-## Overview
+## Gambaran Umum
-The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`:
+Objek `$listeners` telah dihapuskan pada Vue 3. Event listeners sekarang bagian dari `$attrs`:
```js
{
@@ -17,10 +17,10 @@ The `$listeners` object has been removed in Vue 3. Event listeners are now part
}
```
-## 2.x Syntax
+## 2.x Sintaksis
-In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`.
-In combination with `inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element:
+Pada Vue 2, Anda dapat mengakses atribut-atribut yang disuguhkan ke komponen-komponen Anda melalui `this.$attrs`, dan event listeners dengan `this.$listeners`.
+Pengkombinasian dengan `inheritAttrs: false`, mereka membolehkan para pengembang untuk mengaplikasikan atribut-atribut dan listener-listener ini ke semua elemen lain daripada ke elemen root:
```html
@@ -35,9 +35,9 @@ In combination with `inheritAttrs: false`, they allow the developer to apply the
```
-## 3.x Syntax
+## 3.x Sintaksis
-In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with `on`, and as such are part of the `$attrs` object, so `$listeners` has been removed.
+Pada Vue 3's virtual DOM, event listeners sekarang hanyalah sebuah atribut, diawali dengan `on`, dan merupakan bagian dari objek `$attrs`, sehingga `$listeners` telah dihapuskan.
```vue
@@ -52,7 +52,7 @@ export default {
```
-If this component received an `id` attribute and a `v-on:close` listener, the `$attrs` object will now look like this:
+jika komponen ini mendapatkan sebuah atribut `id` dan sebuah listener `v-on:close`, objek `$attrs` sekarang akan tampak seperti ini:
```js
{
@@ -61,16 +61,16 @@ If this component received an `id` attribute and a `v-on:close` listener, the `$
}
```
-## Migration Strategy
+## Strategi Migrasi
-Remove all usages of `$listeners`.
+Hapus semua penggunaan dari `$listeners`.
-[Migration build flag: `INSTANCE_LISTENERS`](migration-build.html#compat-configuration)
+[Flag build Migrasi: `INSTANCE_LISTENERS`](migration-build.html#compat-configuration)
-## See also
+## Baca juga
- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
-- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-includes-class-style.md)
-- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
-- [Migration guide - New Emits Option](./emits-option.md)
-- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
+- [Panduan Migrasi - `$attrs` memuat `class` & `style` ](./attrs-includes-class-style.md)
+- [Panduan Migrasi - Perubahan pada Render Functions API](./render-function-api.md)
+- [Panduan Migrasi - Opsi baru Emits](./emits-option.md)
+- [Panduan Migrasi - Pengubah `.native` dihapuskan](./v-on-native-modifier-removed.md)
diff --git a/src/guide/migration/migration-build.md b/src/guide/migration/migration-build.md
index 496718e87d..8df38f2903 100644
--- a/src/guide/migration/migration-build.md
+++ b/src/guide/migration/migration-build.md
@@ -155,11 +155,22 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
-4. At this point, your application may encounter some compile-time errors / warnings (e.g. use of filters). Fix them first. If all compiler warnings are gone, you can also set the compiler to Vue 3 mode.
+4. If you are using TypeScript, you will also need to modify `vue`'s typing to expose the default export (which is no longer present in Vue 3) by adding a `*.d.ts` file with the following:
+
+ ```ts
+ declare module 'vue' {
+ import { CompatVue } from '@vue/runtime-dom'
+ const Vue: CompatVue
+ export default Vue
+ export * from '@vue/runtime-dom'
+ }
+ ```
+
+5. At this point, your application may encounter some compile-time errors / warnings (e.g. use of filters). Fix them first. If all compiler warnings are gone, you can also set the compiler to Vue 3 mode.
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/b05d9555f6e115dea7016d7e5a1a80e8f825be52)
-5. After fixing the errors, the app should be able to run if it is not subject to the [limitations](#known-limitations) mentioned above.
+6. After fixing the errors, the app should be able to run if it is not subject to the [limitations](#known-limitations) mentioned above.
You will likely see a LOT of warnings from both the command line and the browser console. Here are some general tips:
@@ -171,29 +182,29 @@ The following workflow walks through the steps of migrating an actual Vue 2 app
- If you are using `vue-router`, note `` and `` will not work with `` until you upgrade to `vue-router` v4.
-6. Update [`` class names](/guide/migration/transition.html). This is the only feature that does not have a runtime warning. You can do a project-wide search for `.*-enter` and `.*-leave` CSS class names.
+7. Update [`` class names](/guide/migration/transition.html). This is the only feature that does not have a runtime warning. You can do a project-wide search for `.*-enter` and `.*-leave` CSS class names.
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/d300103ba622ae26ac26a82cd688e0f70b6c1d8f)
-7. Update app entry to use [new global mounting API](/guide/migration/global-api.html#a-new-global-api-createapp).
+8. Update app entry to use [new global mounting API](/guide/migration/global-api.html#a-new-global-api-createapp).
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/a6e0c9ac7b1f4131908a4b1e43641f608593f714)
-8. [Upgrade `vuex` to v4](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html).
+9. [Upgrade `vuex` to v4](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html).
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/5bfd4c61ee50f358cd5daebaa584f2c3f91e0205)
-9. [Upgrade `vue-router` to v4](https://next.router.vuejs.org/guide/migration/index.html). If you also use `vuex-router-sync`, you can replace it with a store getter.
+10. [Upgrade `vue-router` to v4](https://next.router.vuejs.org/guide/migration/index.html). If you also use `vuex-router-sync`, you can replace it with a store getter.
- After the upgrade, to use `` and `` with `` requires using the new [scoped-slot based syntax](https://next.router.vuejs.org/guide/migration/index.html#router-view-keep-alive-and-transition).
+ After the upgrade, to use `` and `` with `` requires using the new [scoped-slot based syntax](https://next.router.vuejs.org/guide/migration/index.html#router-view-keep-alive-and-transition).
- [Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/758961e73ac4089890079d4ce14996741cf9344b)
+ [Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/758961e73ac4089890079d4ce14996741cf9344b)
-10. Pick off individual warnings. Note some features have conflicting behavior between Vue 2 and Vue 3 - for example, the render function API, or the functional component vs. async component change. To migrate to Vue 3 API without affecting the rest of the application, you can opt-in to Vue 3 behavior on a per-component basis with the [`compatConfig` option](#per-component-config).
+11. Pick off individual warnings. Note some features have conflicting behavior between Vue 2 and Vue 3 - for example, the render function API, or the functional component vs. async component change. To migrate to Vue 3 API without affecting the rest of the application, you can opt-in to Vue 3 behavior on a per-component basis with the [`compatConfig` option](#per-component-config).
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/d0c7d3ae789be71b8fd56ce79cb4cb1f921f893b)
-11. When all warnings are fixed, you can remove the migration build and switch to Vue 3 proper. Note you may not be able to do so if you still have dependencies that rely on Vue 2 behavior.
+12. When all warnings are fixed, you can remove the migration build and switch to Vue 3 proper. Note you may not be able to do so if you still have dependencies that rely on Vue 2 behavior.
[Example commit](https://github.com/vuejs/vue-hackernews-2.0/commit/9beb45490bc5f938c9e87b4ac1357cfb799565bd)
@@ -314,7 +325,7 @@ Features that start with `COMPILER_` are compiler-specific: if you are using the
| V_ON_KEYCODE_MODIFIER | ✔ | `v-on` no longer supports keyCode modifiers | [link](/guide/migration/keycode-modifiers.html) |
| CUSTOM_DIR | ✔ | Custom directive hook names changed | [link](/guide/migration/custom-directives.html) |
| ATTR_FALSE_VALUE | ✔ | No longer removes attribute if binding value is boolean `false` | [link](/guide/migration/attribute-coercion.html) |
-| ATTR_ENUMERATED_COERSION | ✔ | No longer special case enumerated attributes | [link](/guide/migration/attribute-coercion.html) |
+| ATTR_ENUMERATED_COERCION | ✔ | No longer special case enumerated attributes | [link](/guide/migration/attribute-coercion.html) |
| TRANSITION_GROUP_ROOT | ✔ | `` no longer renders a root element by default | [link](/guide/migration/transition-group.html) |
| COMPONENT_ASYNC | ✔ | Async component API changed (now requires `defineAsyncComponent`) | [link](/guide/migration/async-components.html) |
| COMPONENT_FUNCTIONAL | ✔ | Functional component API changed (now must be plain functions) | [link](/guide/migration/functional-components.html) |
diff --git a/src/guide/migration/props-default-this.md b/src/guide/migration/props-default-this.md
index fd4485d93f..60df66fcb0 100644
--- a/src/guide/migration/props-default-this.md
+++ b/src/guide/migration/props-default-this.md
@@ -1,18 +1,18 @@
---
-title: Props Default Function this Access
+title: Akses Props Fungsi Bawaan this
badges:
- breaking
---
-# Props Default Function `this` Access
+# Akses Props Fungsi Bawaan `this`
-Props default value factory functions no longer have access to `this`.
+Nilai bawaan props fungsi-fungsi factory tidak lagi memilki akses terhadap `this`.
-Instead:
+Melainkan:
-- Raw props received by the component are passed to the default function as argument;
+- Raw props didapatkan dari komponen yang dilewatkan menuju fungsi bawaan sebagai argumen;
-- The [inject](../composition-api-provide-inject.md) API can be used inside default functions.
+- [inject](../composition-api-provide-inject.md) API dapat digunakan di dalam fungsi-fungsi bawaan.
```js
import { inject } from 'vue'
@@ -21,9 +21,9 @@ export default {
props: {
theme: {
default (props) {
- // `props` is the raw values passed to the component,
- // before any type / default coercions
- // can also use `inject` to access injected properties
+ // `props` merupakan nilai raw dilewatkan menuju komponen,
+ // sebelum dilakukan type / default coercions
+ // dapat juga menggunaan `inject` untuk mengakses properti yang diinjeksikan
return inject('theme', 'default-theme')
}
}
@@ -31,6 +31,6 @@ export default {
}
```
-## Migration Strategy
+## Stategi Migrasi
-[Migration build flag: `PROPS_DEFAULT_THIS`](migration-build.html#compat-configuration)
+[Flag build migrasi: `PROPS_DEFAULT_THIS`](migration-build.html#compat-configuration)
diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
index e6ca6ae29c..4137ae4d5f 100644
--- a/src/guide/migration/transition-group.md
+++ b/src/guide/migration/transition-group.md
@@ -8,11 +8,11 @@ badges:
## Overview
-`` no longer renders a root element by default, but can still create one with the `tag` prop.
+`` no longer renders a root element by default, but can still create one with the `tag` attribute.
## 2.x Syntax
-In Vue 2, ``, like other custom components, needed a root element, which by default was a `` but was customizable via the `tag` prop.
+In Vue 2, ``, like other custom components, needed a root element, which by default was a `` but was customizable via the `tag` attribute.
```html
@@ -26,7 +26,7 @@ In Vue 2, ``, like other custom components, needed a root elem
In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `` no longer renders one by default.
-- If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
+- If you already have the `tag` attribute defined in your Vue 2 code, like in the example above, everything will work as before
- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `` root element to work properly, simply add `tag="span"` to the ``:
```html
diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md
index c5acdb82aa..902e2ce4cb 100644
--- a/src/guide/migration/v-bind.md
+++ b/src/guide/migration/v-bind.md
@@ -12,11 +12,11 @@ badges:
## Introduction
-When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual properties in the same element. However, this raises questions as far as the priority of merging.
+When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual attributes in the same element. However, this raises questions as far as the priority of merging.
## 2.x Syntax
-In 2.x, if an element has both `v-bind="object"` and an identical individual property defined, the individual property would always overwrite bindings in the `object`.
+In 2.x, if an element has both `v-bind="object"` and an identical individual attribute defined, the individual attribute would always overwrite bindings in the `object`.
```html
@@ -27,7 +27,7 @@ In 2.x, if an element has both `v-bind="object"` and an identical individual pro
## 3.x Syntax
-In 3x, if an element has both `v-bind="object"` and an identical individual property defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual property to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
+In 3x, if an element has both `v-bind="object"` and an identical individual attribute defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual attribute to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
```html
@@ -43,6 +43,6 @@ In 3x, if an element has both `v-bind="object"` and an identical individual prop
## Migration Strategy
-If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual properties.
+If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual attributes.
[Migration build flag: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-configuration)
diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md
index 680bc5d005..928a2b3169 100644
--- a/src/guide/migration/v-model.md
+++ b/src/guide/migration/v-model.md
@@ -86,7 +86,7 @@ Then the parent could listen to that event and update a local data property, if
```
-For convenience, we had a shorthand for this pattern with the .sync modifier:
+For convenience, we had a shorthand for this pattern with the `.sync` modifier:
```html
diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md
index 25202ae338..8ad0b231b9 100644
--- a/src/guide/migration/vnode-lifecycle-events.md
+++ b/src/guide/migration/vnode-lifecycle-events.md
@@ -31,7 +31,7 @@ In Vue 3, the event name is prefixed with `vnode-`:
```
-Or just `vnode` if you're using camel case:
+Or just `vnode` if you're using camelCase:
```html
diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md
index 0b155ac6f8..56d93be663 100644
--- a/src/guide/migration/watch.md
+++ b/src/guide/migration/watch.md
@@ -27,6 +27,6 @@ watch: {
## Migration Strategy
-If you rely on watching array mutations, add the `deep` property to ensure that your callback is triggered correctly.
+If you rely on watching array mutations, add the `deep` option to ensure that your callback is triggered correctly.
[Migration build flag: `WATCH_ARRAY`](migration-build.html#compat-configuration)
diff --git a/src/guide/mobile.md b/src/guide/mobile.md
index b9b1188c16..8ed7e3e34c 100644
--- a/src/guide/mobile.md
+++ b/src/guide/mobile.md
@@ -20,4 +20,4 @@ While Vue.js does not natively support mobile app development, there are a numbe
**Resources**
-- [NativeScript + Vue.js Guide](https://nativescript.org/vue/)
+- [NativeScript + Vue.js Guide](https://nativescript-vue.org/)
diff --git a/src/guide/plugins.md b/src/guide/plugins.md
index 48481a9587..aa3b44f847 100644
--- a/src/guide/plugins.md
+++ b/src/guide/plugins.md
@@ -6,7 +6,7 @@ There is no strictly defined scope for a plugin, but common scenarios where plug
1. Add some global methods or properties, e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element).
-2. Add one or more global assets: directives/filters/transitions etc. (e.g. [vue-touch](https://github.com/vuejs/vue-touch)).
+2. Add one or more global assets: directives/transitions etc. (e.g. [vue-touch](https://github.com/vuejs/vue-touch)).
3. Add some component options by global mixin (e.g. [vue-router](https://github.com/vuejs/vue-router)).
diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md
index 97f48ae241..b1860b03ef 100644
--- a/src/guide/reactivity-computed-watchers.md
+++ b/src/guide/reactivity-computed-watchers.md
@@ -4,7 +4,7 @@
## Computed values
-Sometimes we need state that depends on other state - in Vue this is handled with component [computed properties](computed.html#computed-properties). To directly create a computed value, we can use the `computed` method: it takes a getter function and returns an immutable reactive [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) object for the returned value from the getter.
+Sometimes we need state that depends on other state - in Vue this is handled with component [computed properties](computed.html#computed-properties). To directly create a computed value, we can use the `computed` function: it takes a getter function and returns an immutable reactive [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) object for the returned value from the getter.
```js
const count = ref(1)
@@ -30,9 +30,39 @@ plusOne.value = 1
console.log(count.value) // 0
```
+### Computed Debugging
+
+`computed` accepts a second argument with `onTrack` and `onTrigger` options:
+
+- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
+- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
+
+Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
+
+```js
+const plusOne = computed(() => count.value + 1, {
+ onTrack(e) {
+ // triggered when count.value is tracked as a dependency
+ debugger
+ },
+ onTrigger(e) {
+ // triggered when count.value is mutated
+ debugger
+ }
+})
+
+// access plusOne, should trigger onTrack
+console.log(plusOne.value)
+
+// mutate count.value, should trigger onTrigger
+count.value++
+```
+
+`onTrack` and `onTrigger` only work in development mode.
+
## `watchEffect`
-To apply and _automatically re-apply_ a side effect based on reactive state, we can use the `watchEffect` method. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
+To apply and _automatically re-apply_ a side effect based on reactive state, we can use the `watchEffect` function. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
```js
const count = ref(0)
@@ -83,8 +113,10 @@ We are registering the invalidation callback via a passed-in function instead of
```js
const data = ref(null)
-watchEffect(async (onInvalidate) => {
- onInvalidate(() => { /* ... */ }) // we register cleanup function before Promise resolves
+watchEffect(async onInvalidate => {
+ onInvalidate(() => {
+ /* ... */
+ }) // we register cleanup function before Promise resolves
data.value = await fetchData(props.id)
})
```
@@ -95,26 +127,25 @@ An async function implicitly returns a Promise, but the cleanup function needs t
Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick". Internally, a component's `update` function is also a watched effect. When a user effect is queued, it is by default invoked **before** all component `update` effects:
-```html
-
+```vue
{{ count }}
```
@@ -141,6 +172,8 @@ watchEffect(
The `flush` option also accepts `'sync'`, which forces the effect to always trigger synchronously. This is however inefficient and should be rarely needed.
+In Vue >= 3.2.0, `watchPostEffect` and `watchSyncEffect` aliases can also be used to make the code intention more obvious.
+
### Watcher Debugging
The `onTrack` and `onTrigger` options can be used to debug a watcher's behavior.
@@ -201,15 +234,48 @@ watch(count, (count, prevCount) => {
A watcher can also watch multiple sources at the same time using an array:
```js
-const firstName = ref('');
-const lastName = ref('');
+const firstName = ref('')
+const lastName = ref('')
watch([firstName, lastName], (newValues, prevValues) => {
- console.log(newValues, prevValues);
+ console.log(newValues, prevValues)
})
-firstName.value = "John"; // logs: ["John",""] ["", ""]
-lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]
+firstName.value = 'John' // logs: ["John", ""] ["", ""]
+lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
+```
+
+However, if you are changing both watched sources simultaneously in the same function, the watcher will be executed only once:
+
+```js{9-13}
+setup() {
+ const firstName = ref('')
+ const lastName = ref('')
+
+ watch([firstName, lastName], (newValues, prevValues) => {
+ console.log(newValues, prevValues)
+ })
+
+ const changeValues = () => {
+ firstName.value = 'John'
+ lastName.value = 'Smith'
+ // logs: ["John", "Smith"] ["", ""]
+ }
+
+ return { changeValues }
+}
+```
+
+Note that multiple synchronous changes will only trigger the watcher once.
+
+It is possible to force the watcher to trigger after every change by using the setting `flush: 'sync'`, though that isn't usually recommended. Alternatively, [nextTick](/api/global-api.html#nexttick) can be used to wait for the watcher to run before making further changes. e.g.:
+
+```js
+const changeValues = async () => {
+ firstName.value = 'John' // logs: ["John", ""] ["", ""]
+ await nextTick()
+ lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
+}
```
### Watching Reactive Objects
@@ -222,8 +288,9 @@ const numbers = reactive([1, 2, 3, 4])
watch(
() => [...numbers],
(numbers, prevNumbers) => {
- console.log(numbers, prevNumbers);
- })
+ console.log(numbers, prevNumbers)
+ }
+)
numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
```
@@ -231,62 +298,51 @@ numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
Attempting to check for changes of properties in a deeply nested object or array will still require the `deep` option to be true:
```js
-const state = reactive({
- id: 1,
- attributes: {
- name: "",
- },
-});
+const state = reactive({
+ id: 1,
+ attributes: {
+ name: ''
+ }
+})
watch(
() => state,
(state, prevState) => {
- console.log(
- "not deep ",
- state.attributes.name,
- prevState.attributes.name
- );
+ console.log('not deep', state.attributes.name, prevState.attributes.name)
}
-);
+)
watch(
() => state,
(state, prevState) => {
- console.log(
- "deep ",
- state.attributes.name,
- prevState.attributes.name
- );
+ console.log('deep', state.attributes.name, prevState.attributes.name)
},
{ deep: true }
-);
+)
-state.attributes.name = "Alex"; // Logs: "deep " "Alex" "Alex"
+state.attributes.name = 'Alex' // Logs: "deep" "Alex" "Alex"
```
However, watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as [lodash.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
```js
-import _ from 'lodash';
+import _ from 'lodash'
const state = reactive({
id: 1,
attributes: {
- name: "",
- },
-});
+ name: ''
+ }
+})
watch(
() => _.cloneDeep(state),
(state, prevState) => {
- console.log(
- state.attributes.name,
- prevState.attributes.name
- );
+ console.log(state.attributes.name, prevState.attributes.name)
}
-);
+)
-state.attributes.name = "Alex"; // Logs: "Alex" ""
+state.attributes.name = 'Alex' // Logs: "Alex" ""
```
### Shared Behavior with `watchEffect`
diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md
index 49caf3256f..bbaef88a95 100644
--- a/src/guide/reactivity-fundamentals.md
+++ b/src/guide/reactivity-fundamentals.md
@@ -1,5 +1,7 @@
# Reactivity Fundamentals
+> This section uses [single-file component](single-file-component.html) syntax for code examples
+
## Declaring Reactive State
To create a reactive state from a JavaScript object, we can use a `reactive` method:
@@ -74,7 +76,7 @@ When a ref is returned as a property on the render context (the object returned
```
:::tip
-If you don't need to access the actual object instance, you can wrap it in a `reactive`:
+If you don't want to access the actual object instance, you can wrap it in a `reactive`:
```js
nested: reactive({
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index fda002f2e2..902f229421 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -350,7 +350,7 @@ render() {
#### Event Modifiers
-For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camel case.
+For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camelCase.
For example:
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index df5927be3a..55c7b8a07a 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -1,174 +1,88 @@
# Single File Components
-## Introduction
-
-In many Vue projects, global components will be defined using `app.component()`, followed by `app.mount('#app')` to target a container element in the body of every page.
-
-This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:
-
-- **Global definitions** force unique names for every component
-- **String templates** lack syntax highlighting and require ugly slashes for multiline HTML
-- **No CSS support** means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
-- **No build step** restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel
-
-All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify.
-
-Here's an example of a file we'll call `Hello.vue`:
-
-
-
-Now we get:
-
-- [Complete syntax highlighting](https://github.com/vuejs/awesome-vue#source-code-editing)
-- [CommonJS modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
-- [Component-scoped CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
-
-As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
-
-
+Learn about single file components with a free video lesson on Vue School
-These specific languages are only examples. You could as easily use TypeScript, SCSS, PostCSS, or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules.
-
-### What About Separation of Concerns?
+## Introduction
-One important thing to note is that **separation of concerns is not equal to separation of file types.** In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable.
+Vue Single File Components (aka `*.vue` files, abbreviated as **SFC**) is a special file format that allows us to encapsulate the template, logic, **and** styling of a Vue component in a single file. Here's an example SFC:
-Even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
+```vue
+
-```html
-
- This will be pre-compiled
+ {{ greeting }}
-
-
-```
-
-## Getting Started
-
-### Example Sandbox
-
-If you want to dive right in and start playing with single-file components, check out [this simple todo app](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue) on CodeSandbox.
-
-### For Users New to Module Build Systems in JavaScript
-With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already:
-
-- **Node Package Manager (npm)**: Read the [Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) section about how to get packages from the registry.
-
-- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/en/learn). You don't have to memorize every feature right now, but keep this page as a reference you can come back to.
-
-After you've taken a day to dive into these resources, we recommend checking out [Vue CLI](https://cli.vuejs.org/). Follow the instructions and you should have a Vue project with `.vue` components, ES2015, webpack and hot-reloading in no time!
-
-### For Advanced Users
-
-The CLI takes care of most of the tooling configurations for you, but also allows fine-grained customization through its own [config options](https://cli.vuejs.org/config/).
-
-In case you prefer setting up your own build setup from scratch, you will need to manually configure webpack with [vue-loader](https://vue-loader.vuejs.org). To learn more about webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [webpack learning academy](https://webpack.academy/p/the-core-concepts).
-
-### Building with rollup
-
-Most of the time when developing a third-party library we want to build it in a way that allows the consumers of the library to [tree shake](https://webpack.js.org/guides/tree-shaking/) it. To enable tree-shaking we need to build `esm` modules. Since webpack and, in turn, vue-cli do not support building `esm` modules we need to rely on [rollup](https://rollupjs.org/).
-
-#### Installing Rollup
-
-We will need to install Rollup and a few dependencies:
-
-```bash
-npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue
+
```
-These are the minimal amount of rollup plugins that we need to use to compile the code in an `esm` module. We may want to also add [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) to transpile their code and [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) if we use dependencies that we want to bundle with our library.
+As we can see, Vue SFC is a natural extension of the classic trio of HTML, CSS and JavaScript. Each `*.vue` file consists of three types of top-level language blocks: ``, `
```
### `entry-client.js`
-The client entry creates the application using the root component factory and mounts it to the DOM:
+The client entry creates the application using the `App.vue` component and mounts it to the DOM:
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
// client-specific bootstrapping logic...
-const { app } = createApp({
- // here we can pass additional arguments to app factory
-})
+const app = createSSRApp(App)
// this assumes App.vue template root element has `id="app"`
app.mount('#app')
@@ -122,12 +143,11 @@ app.mount('#app')
The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here.
```js
-import createApp from './app'
+import { createSSRApp } from 'vue'
+import App from './App.vue'
-export default function() {
- const { app } = createApp({
- /*...*/
- })
+export default function () {
+ const app = createSSRApp(App)
return {
app
diff --git a/src/guide/template-syntax.md b/src/guide/template-syntax.md
index 9b2c55a555..63209894fd 100644
--- a/src/guide/template-syntax.md
+++ b/src/guide/template-syntax.md
@@ -1,67 +1,67 @@
-# Template Syntax
+# Sintaksis Templat
-Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
+Vue.js menggunakan sintaksis templat yang berbasis HTML yang memungkinkan Anda menghubungkan DOM yang di-_render_ dengan data _instance_ komponen secara deklaratif. Semua templat Vue.js merupakan HTML yang valid dan dapat diterjemahkan oleh peramban (_browser_) dan _parser_ HTML yang sesuai spesifikasi.
-Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
+Pada dasarnya, Vue mengompilasi templat menjadi fungsi _render_ DOM Virtual. Dikombinasikan dengan sistem reaktivitas, Vue mampu mencari tahu secara cerdas jumlah minimum komponen yang perlu di-_render_ ulang dan menerapkan manipulasi DOM secara minimal ketika _state_ aplikasi berubah.
-If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also [directly write render functions](render-function.html) instead of templates, with optional JSX support.
+Jika Anda terbiasa dengan konsep DOM Virtual dan lebih suka menggunakan JavaScript, Anda juga dapat [menulis fungsi _render_ secara langsung](render-function.html) sebagai pengganti templat, dengan pilihan dukungan JSX juga.
-## Interpolations
+## Interpolasi
-### Text
+### Teks
-The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
+Bentuk paling mendasar dari _binding_ data adalah interpolasi teks menggunakan sintaksis "Mustache" (kurung kurawal ganda):
```html
-Message: {{ msg }}
+Pesan: {{ msg }}
```
-The mustache tag will be replaced with the value of the `msg` property from the corresponding component instance. It will also be updated whenever the `msg` property changes.
+Tag _mustache_ akan diganti dengan nilai properti `msg` yang berasal dari _instance_ komponen yang sesuai. Nilai tag _mustache_ juga akan dimutakhirkan kapanpun nilai properti `msg` berubah.
-You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/directives.html#v-once), but keep in mind this will also affect any other bindings on the same node:
+Anda juga dapat melakukan interpolasi syang hanya dijalankan sekali. Dan tidak akan dimutakhirkan ketika terjadi perubahan data menggunakan [direktif `v-once`](../api/directives.html#v-once), tetapi perlu diingat cara ini juga berdampak pada _binding_ lain pada _node_ yang sama.
```html
-This will never change: {{ msg }}
+Msg tidak akan berubah jika nilai variabelnya berubah: {{ msg }}
```
-### Raw HTML
+### HTML Raw
-The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the [`v-html` directive](../api/directives.html#v-html):
+Tanda _mustaches_ menerjemahkan data sebagai teks biasa, bukan sebagai HTML. Untuk menampilkan HTML sebenarnya, Anda perlu menggunakan [direktif `v-html`](../api/directives.html#v-html):
```html
-Using mustaches: {{ rawHtml }}
-Using v-html directive:
+Menggunakan tanda mustaches : {{ rawHtml }}
+Menggunakan direktif v-html:
```
-
+
-The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
+Konten dari `span` akan diganti dengan nilai properti `rawHtml`, diterjemahkan sebagai HTML biasa - _binding_ data diabaikan. Perlu diingat bahwa Anda tidak dapat menggunakan `v-html` untuk membuat sebagian templat, karena Vue bukanlah mesin _templating_ berbasis string. Sebaliknya, komponen dianggap sebagai unit dasar dari antar muka pengguna (UI) untuk dapat digunakan kembali dan dikomposisi.
::: tip
-Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content
+Me-_render_ HTML yang berubah-ubah secara dinamis pada situs Anda sangat berbahaya karena hal tersebut dapat memicu [kerentanan XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). Hanya gunakan interpolasi HTML pada konten terpecaya dan **jangan pernah** pada konten yang disediakan oleh pengguna.
:::
-### Attributes
+### Atribut
-Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/directives.html#v-bind):
+Tanda _mustache_ tidak dapat digunakan di dalam atribut HTML. Sebagai gantinya, gunakan [direktif `v-bind`](../api/directives.html#v-bind):
```html
```
-If the bound value is `null` or `undefined` then the attribute will not be included on the rendered element.
+Jika nilai yang terhubung berupa `null` atau `undefined`, maka atribut tidak akan disertakan pada elemen yang di-_render_.
-In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. For example:
+Pada kasus atribut bernilai boolean, dimana keberadaan nilainya berupa `true`, `v-bind` bekerja sedikit berbeda. Sebagai contoh:
```html
-Button
+Tombol
```
-The `disabled` attribute will be included if `isButtonDisabled` has a truthy value. It will also be included if the value is an empty string, maintaining consistency with ``. For other falsy values the attribute will be omitted.
+Atribut `disabled` akan disertakan jika `isButtonDisabled` memiliki nilai _truthy_. Atribut tersebut juga akan disertakan jika nilai nya string kosong, menjaga kekonsistesian dengan ``. Untuk nilai _falsy_ lainnya, atribut tersebut akan dihilangkan.
-### Using JavaScript Expressions
+### Menggunakan Ekspresi JavaScript
-So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
+Sejauh ini kita hanya melakukan _binding_ ke properti sederhana di templat. Tetapi Vue.js sebenarnya juga mendukung fitur penuh ekspresi JavaScript di dalam semua _binding_ data:
```html
{{ number + 1 }}
@@ -73,137 +73,138 @@ So far we've only been binding to simple property keys in our templates. But Vue
```
-These expressions will be evaluated as JavaScript in the data scope of the current active instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
+Ekspresi akan dijalankan sebagai JavaScript pada cakupan _instance_ aktif sekarang. Batasannya adalah setiap _binding_ hanya boleh berisi **satu jenis ekspresi**, sehingga contoh berikut **tidak** akan bekerja:
```html
-
+
{{ var a = 1 }}
-
+
{{ if (ok) { return message } }}
```
-## Directives
+## Direktif
-Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **a single JavaScript expression** (with the exception of `v-for` and `v-on`, which will be discussed later). A directive's job is to reactively apply side effects to the DOM when the value of its expression changes. Let's review the example we saw in the introduction:
+Direktif adalah atribut spesial dengan awalan `v-`. Nilai atribut direktif diharapkan menjadi **suatu ekspresi JavaScript** (dengan pengecualian untuk `v-for` dan `v-on`, yang akan didiskusikan nanti). Tugas direktif adalah menerapkan efek samping (_side effect_) secara reaktif ke DOM ketika nilai dari ekspresi berubah. Mari kita lihat contoh yang terdapat pada bagian perkenalan:
```html
-Now you see me
+Sekarang Anda melihatku
```
-Here, the `v-if` directive would remove/insert the `` element based on the truthiness of the value of the expression `seen`.
+Pada contoh tersebut, direktif `v-if` akan menghapus/memasukkan elemen `
` berdasarkan kebenaran nilai ekspresi `seen`.
-### Arguments
+### Argumen
-Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:
+Beberapa direktif dapat menerima sebuah "argumen", ditulis sebagai titik dua setelah nama direktif. Sebagai contoh, direktif `v-bind` digunakan untuk memutakhirkan atribut HTML secara reaktif:
```html
...
```
-Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`.
+Pada contoh tersebut, `href` adalah argumen, yang memberitahukan direktif `v-bind` untuk melakukan _binding_ atribut elemen `href` ke nilai ekspresi `url`.
-Another example is the `v-on` directive, which listens to DOM events:
+Contoh lain adalah direktif `v-on`, yang akan menambahkan _listener_ ke _event_ DOM:
```html
...
```
-Here the argument is the event name to listen to. We will talk about event handling in more detail too.
+Pada contoh tersebut, argumen adalah nama _event_ yang di-_listen_. Kita juga akan membahas mengenai penanganan _event_ lebih dalam.
-### Dynamic Arguments
+### Argumen Dinamis
-It is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:
+Memungkinkan juga untuk menggunakan ekspresi JavaScript pada argumen direktif dengan cara membungkusnya dengan kurung siku:
```html
...
```
-Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your component instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
+Pada contoh tersebut, `attributeName` akan diterjemahkan sebagai ekspresi JavaScript, dan nilai terjemahannya akan digunakan sebagai nilai final untuk argumen. Sebagai contoh, jika _instance_ komponen Anda memiliki properti data, `attributeName`, yang memiliki nilai `"href"`, maka _binding_ ini akan sama seperti `v-bind:href`.
-Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
+Demikian pula, jika Anda menggunakan argumen dinamis untuk melakukan _binding_ penanganan untuk nama _event_ dinamis:
```html
...
```
-In this example, when `eventName`'s value is `"focus"`, `v-on:[eventName]` will be equivalent to `v-on:focus`.
+Pada contoh tersebut, ketika `eventName` bernilai `"focus"`, maka `v-on:[eventName]` akan sama seperti `v-on:focus`.
-### Modifiers
+### _Modifier_
-Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` on the triggered event:
+_Modifier_ adalah akhiran spesial ditulis sebagai titik setelah nama argumen direktif. Modifier menunjukkan sebuah direktif harus dihubungkan dengan cara tertentu. Sebagai contoh _modifier_ `.prevent` memberitahu direktif `v-on` untuk memanggil `event.preventDefault()` pada _event_ yang terpicu:
```html
```
-You'll see other examples of modifiers later, [for `v-on`](events.md#event-modifiers) and [for `v-model`](forms.md#modifiers), when we explore those features.
+Anda akan melihat contoh _modifier_ lain nantinya, [untuk `v-on`](events.md#event-modifiers) dan [untuk `v-model`](forms.md#modifiers), ketika kita menjelajahi fitur-fitur tersebut.
-## Shorthands
+## Singkatan
-The `v-` prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building a [SPA](https://en.wikipedia.org/wiki/Single-page_application), where Vue manages every template. Therefore, Vue provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
+Awalan `v-` berfungsi sebagai isyarat visual untuk mengidentifikasi atribut sepesifik Vue pada templat Anda. Cara tersebut berguna ketika Anda menggunakan Vue.js untuk menerapkan perilaku dinamis pada markah yang ada, tetapi dapat terasa bertele-tele untuk beberapa direktif yang sering digunakan. Pada saat yang sama, kebutuhan untuk awalan `v-` menjadi tidak terlalu penting ketika Anda membangun [SPA](https://en.wikipedia.org/wiki/Single-page_application), dimana Vue mengatur setiap templat. Sehingga, Vue menyediakan singkatan spesial untuk dua direktif yang paling sering digunakan, `v-bind` dan `v-on`:
-### `v-bind` Shorthand
+### Singkatan `v-bind`
```html
-
+
...
-
+
...
-
+
...
```
-### `v-on` Shorthand
+### Singkatan `v-on`
```html
-
+
...
-
+
...
-
+
...
```
-They may look a bit different from normal HTML, but `:` and `@` are valid characters for attribute names and all Vue-supported browsers can parse it correctly. In addition, they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.
+Cara tersebut mungkin terlihat berbeda dari HTML pada umumnya, tetapi `:` dan `@` adalah karakter valid untuk nama atribut dan peramban yang didukung oleh Vue dapat menerjemahkannya secara benar. Selain itu, mereka tidak akan muncul pada markah final yang ter-_render_. Sintaksis singkatan sangat opsional, tetapi Anda akan mengapresiasinya ketika Anda mempelajari mengenai penggunaannya nanti.
-> From the next page on, we'll use the shorthand in our examples, as that's the most common usage for Vue developers.
+> Dari halaman selanjutnya hingga seterusnya, kita akan menggunakan singkatan pada contoh kita, karena hal tersebut merupakan penggunaan yang paling umum untuk pengembang Vue.
-### Caveats
+### Peringatan
-#### Dynamic Argument Value Constraints
+#### Batasan Nilai Argumen Dinamis
-Dynamic arguments are expected to evaluate to a string, with the exception of `null`. The special value `null` can be used to explicitly remove the binding. Any other non-string value will trigger a warning.
+Argumen dinamis diharapkan diterjemahkan sebagai string, dengan pengecualian nilai `null`. Nilai spesial `null` dapat digunakan untuk menghilangkan _binding_ secara jelas. Nilai bukan string lainnya akan memicu peringatan.
-#### Dynamic Argument Expression Constraints
+#### Batasan Ekspresi Argumen Dinamis
-Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names. For example, the following is invalid:
+Ekspresi argumen dinamis memiliki batasan sintaksi karena karakter tertentu, seperti spasi dan tanda kutip, tidak valid di dalam nama atribut HTML. Sebagai contoh, contoh kode berikut tidaklah valid:
```html
-
+
...
```
-We recommend replacing any complex expressions with a [computed property](computed.html), one of the most fundamental pieces of Vue, which we'll cover shortly.
+Kita merekomendasikan mengganti ekspresi kompleks apapun dengan [properti _computed_](computed.html), salah satu dasar Vue, yang akan kita bahas dalam waktu dekat.
-When using in-DOM templates (templates directly written in an HTML file), you should also avoid naming keys with uppercase characters, as browsers will coerce attribute names into lowercase:
+Ketika menggunakan templat di dalam DOM (templat yang secara langsung ditulis pada berkas HTML), Anda juga harus menghindari penamaan kunci dengan karakter huruf besar, karena peramban (_browser_) akan memaksa nama atribut menjadi huruf kecil:
```html
...
```
-#### JavaScript Expressions
+#### Ekspresi JavaScript
+
+Ekspresi templat dijalankan di dalam _sandbox_ dan hanya dapat mengakses [beberapa daftar global](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) seperti `Math` dan `Date`. Anda tidak boleh mencoba mengakses _global_ yang didefinisikan oleh pengembang sendiri pada ekspresi templat.
-Template expressions are sandboxed and only have access to a [restricted list of globals](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.
diff --git a/src/guide/testing.md b/src/guide/testing.md
index ade7ba4910..3b5f3516fb 100644
--- a/src/guide/testing.md
+++ b/src/guide/testing.md
@@ -58,7 +58,7 @@ Mocha is a JavaScript test framework that is focused on being flexible. Because
### Introduction
-To test most Vue components, they must be mounted to the DOM (either virtual or real) in order to fully assert that they are working. This is another framework-agnostic concept. As a result, component testing frameworks were created to give users the ability to do this in a reliable way while also providing Vue-specific conveniences such as integrations for Vuex, Vue Router, and other Vue plugins.
+To test most Vue components, they must be mounted to the DOM (either virtual or real) in order to fully assert that they are working. This is another framework-agnostic concept. As a result, component testing frameworks were created to give users the ability to do this reliably while also providing Vue-specific conveniences such as integrations for Vuex, Vue Router, and other Vue plugins.
### Choosing Your Framework
@@ -70,7 +70,7 @@ It should be no surprise that one of the first criteria is that a component test
#### First-class error reporting
-When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provides context for why a test fails, e.g., what is expected vs what was received.
+When tests fail, it is critical that your component testing framework provides useful error logs that help to minimize the amount of time it takes to debug the problem. In addition to simply telling you what test fails, they should also provide context for why a test fails, e.g., what is expected vs what was received.
### Recommendations
diff --git a/src/guide/tooling/deployment.md b/src/guide/tooling/deployment.md
index c721f0100c..434a11f79b 100644
--- a/src/guide/tooling/deployment.md
+++ b/src/guide/tooling/deployment.md
@@ -1,24 +1,24 @@
-# Production Deployment
+# Proses Produksi
::: info
-Most of the tips below are enabled by default if you are using [Vue CLI](https://cli.vuejs.org). This section is only relevant if you are using a custom build setup.
+Sebagian besar tips di bawah ini diaktifkan secara bawaan jika Anda menggunakan [Vue CLI](https://cli.vuejs.org). Bagian ini cocok jika Anda membangun penyiapan dengan cara yang berbeda.
:::
-## Turn on Production Mode
+## Menghidupkan Mode Produksi
-During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in [production mode](https://cli.vuejs.org/guide/mode-and-env.html#modes).
+Selama pengembangan, Vue menyediakan banyak peringatan untuk membantu Anda mengatasi galat dan kesalahan umum. Namun, peringatan ini menjadi tidak berguna dalam mode produksi dan akan memperbesar ukuran muatan aplikasi Anda. Selain itu, beberapa pemeriksaan peringatan ini memiliki waktu proses yang rendah dan dapat terelakkan saat [mode produksi](https://cli.vuejs.org/guide/mode-and-env.html#modes).
-### Without Build Tools
+### Tanpa Alat Bangun
-If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version for production. This can be found in the [Installation guide](/guide/installation.html#cdn).
+Jika Anda membangun langsung, yaitu menyertakan Vue melalui tag skrip tanpa alat bangun. Pastikan untuk mengecilkan versi produksi. Ini dapat melihat di [panduan Instalasi](/guide/installation.html#cdn).
-### With Build Tools
+### Dengan Alat Bangun
-When using a build tool like Webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. Vue CLI has this pre-configured for you, but it would be beneficial to know how it is done:
+Ketika menggunakan alat Bangun seperti _Webpack_ atau _Browserify_, mode produksi akan ditentukan oleh `process.env.NODE_ENV` di dalam kode sumber Vue dan itu akan berada dalam mode pengembangan secara bawaan. Kedua alat bangun menyediakan cara untuk menimpa variabel ini agar mengaktifkan mode produksi Vue, dan peringatan akan dihilangkan oleh _minifiers_ selama proses membangun. Vue CLI memiliki pra-konfigurasi ini untuk Anda, tetapi akan bermanfaat jika mengetahui cara melakukannya:
#### Webpack
-In Webpack 4+, you can use the `mode` option:
+Di Webpack 4+, Anda dapat menggunakan opsi `mode`:
```js
module.exports = {
@@ -28,45 +28,45 @@ module.exports = {
#### Browserify
-- Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code.
+- Jalankan perintah _bundling_ Anda di berkas `NODE_ENV` lingkungan variabel menetapkan ke `"production"`. Ini memberikan `vueify` untuk menghindari memasukkan _hot-reload_ dan kode terkait pengembangan.
-- Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example:
+- Terapkan _global_ [envify](https://github.com/hughsk/envify) ubah ke bundel Anda. Ini memungkinkan _minifier_ untuk menghapus semua peringatan dalam kode sumber Vue yang membungkus dalam blok bersyarat di _env_ variabel. Sebagai contoh:
```bash
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
-- Or, using [envify](https://github.com/hughsk/envify) with Gulp:
+- Atau, menggunakan [envify](https://github.com/hughsk/envify) dengan Gulp:
```js
- // Use the envify custom module to specify environment variables
+ // Gunakan modul kustom envify untuk menentukan lingkungan variabel
const envify = require('envify/custom')
browserify(browserifyOptions)
.transform(vueify)
.transform(
- // Required in order to process node_modules files
+ // Diperlukan untuk memproses berkas node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()
```
-- Or, using [envify](https://github.com/hughsk/envify) with Grunt and [grunt-browserify](https://github.com/jmreidy/grunt-browserify):
+- Atau, menggunakan [envify](https://github.com/hughsk/envify) dengan Grunt dan [grunt-browserify](https://github.com/jmreidy/grunt-browserify):
```js
- // Use the envify custom module to specify environment variables
+ // Gunakan modul kustom envify untuk menentukan lingkungan variabel
const envify = require('envify/custom')
browserify: {
dist: {
options: {
- // Function to deviate from grunt-browserify's default order
- configure: (b) =>
+ // Berfungsi untuk menyimpang dari urutan bawaan grunt-browserify
+ configure: b =>
b
.transform('vueify')
.transform(
- // Required in order to process node_modules files
+ // Diperlukan untuk memproses berkas node_modules
{ global: true },
envify({ NODE_ENV: 'production' })
)
@@ -78,7 +78,7 @@ module.exports = {
#### Rollup
-Use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace):
+Menggunakan [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace):
```js
const replace = require('@rollup/plugin-replace')
@@ -93,24 +93,24 @@ rollup({
}).then(...)
```
-## Pre-Compiling Templates
+## Templat Pra-Kompilasi
-When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
+Ketika menggunakan di-DOM templat atau di-JavaScript templat untai, kompilasi _template-to-render-function_ dilakukan dengan cepat. Ini biasanya cukup cepat dalam banyak kasus, tetapi sebaiknya dihindari jika aplikasi Anda _performance-sensitive_.
-The easiest way to pre-compile templates is using [Single-File Components](/guide/single-file-component.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
+Cara termudah untuk mengkompilasi templat menggunakan [Komponen Berkas-Tunggal](/guide/single-file-component.html) - penyiapan membangun secara otomatis dengan melakukan pra-kompilasi untuk Anda. Jadi kode yang dibangun berisi fungsi _render_ yang sudah dikompilasi, bukan untai templat mentah.
-If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step.
+Jika Anda menggunakan _Webpack_, lebih suka memisahkan JavaScript dan berkas templat, kamu bisa menggunakan [vue-template-loader](https://github.com/ktsn/vue-template-loader), yang juga mengubah berkas templat menjadi fungsi _render_ JavaScript selama langkah membangun.
-## Extracting Component CSS
+## Mengekstrak Komponen CSS
-When using Single-File Components, the CSS inside components are injected dynamically as `