diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md
index 2445ace4c4..e742c5b59e 100644
--- a/src/v2/guide/index.md
+++ b/src/v2/guide/index.md
@@ -1,83 +1,84 @@
---
-title: Introduction
+title: Perkenalan
type: guide
order: 2
---
-## What is Vue.js?
+## Apa itu Vue.js?
-Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
+Vue (cara pengucapannya /vjuː/, seperti **view**) adalah sebuah kerangka kerja nan progresif untuk membangun antarmuka pengguna. Tidak seperti beberapa kerangka kerja monolitik yang lain, Vue dirancang dari dasar sekali agar dapat diadopsi secara bertahap. Pustaka intinya difokuskan pada layer tampilan saja, dan sangat mudah untuk diintegrasikan dengan pustaka yang lain atau dengan proyek yang sudah ada. Di sisi lain, Vue sangat mampu memberikan dan mendukung `Single Page Application` yang canggih ketika dikombinasikan dengan [perkakas modern](single-file-components.html) dan [dukungan pustaka](https://github.com/vuejs/awesome-vue#components--libraries).
-If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project.
+Jika anda ingin mempelajari lebih lanjut tentang Vue, kami membuat sebuah video tentang prinsip - prinsip inti dan contoh proyek.
-If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
-
+Jika anda adalah seorang *frontend developer* yang berpengalaman dan ingin tahu bagaimana Vue dibandingkan dengan pustaka/kerangka kerja yang lain, silakan kunjungi [Perbandingan dengan kerangka kerja yang lain](comparison.html).
-## Getting Started
+
The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back! Prior experience with other frameworks helps, but is not required.
+## Memulai
-The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can create an index.html file and include Vue with:
+
Panduan resmi ini mengasumsikan bahwa pengetahuan Anda berada di tingkat menengah tentang HTML, CSS, dan Javascript. Jika anda benar - benar baru di pengembangan aplikasi frontend, ini mungkin bukan keputusan yang tepat untuk langsung mencoba kerangka kerja sebagai langkah pertama anda. Pelajari terlebih dahulu dasar - dasar nya, kemudian kembali kesini!! Pengalaman menggunakan kerangka kerja yang lain sangat membantu, tapi bukan sebuah kewajiban.
+
+Cara yang paling mudah untuk mencoba Vue.js adalah dengan menggunakan [JSFiddle Contoh Hello World](https://jsfiddle.net/chrisvfritz/50wL7mdz/). Jangan ragu untuk mencobanya di tab lain dan ikuti bagaimana kami memberikan contoh dasar. Atau, anda bisa membuat sebuah fileindex.html dan isikan script dibawah ini:
``` html
-
+
```
-or:
+atau:
``` html
-
+
```
-The [Installation](installation.html) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.
+Pada halaman [Instalasi](installation.html) tersedia lebih banyak opsi ketika memulai instalasi Vue. Catatan: Kami **tidak** menyarankan para pemula untuk memulai proyek dengan menggunakan `vue-cli`, terlebih lagi jika anda masih belum terbiasa / familiar dengan *build tools* yang berbasiskan Node.js.
-If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/playlist/pXKqta), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+Jika anda lebih tertarik dengan hal hal yang lebih interaktif, anda bisa melihat [seri tutorial ini di Scrimba](https://scrimba.com/playlist/pXKqta), yang mana akan memberikan anda campuran beberapa screencast dan `code playground` yang bisa anda jeda dan mainkan kapan saja.
-## Declarative Rendering
+## *Render Secara Deklaratif*
-
-At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
+Inti dari Vue.js adalah sistem yang mampu membantu kita dalam me *render* data kedalam DOM secara deklaratif menggunakan sintaks *template* yang mudah dan jelas:
``` html
- {{ message }}
+ {{ pesan }}
```
``` js
var app = new Vue({
el: '#app',
data: {
- message: 'Hello Vue!'
+ pesan: 'Hai, ini Vue!'
}
})
```
{% raw %}
- {{ message }}
+ {{ pesan }}
{% endraw %}
-We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Open your browser's JavaScript console (right now, on this page) and set `app.message` to a different value. You should see the rendered example above update accordingly.
+Kita telah berhasil membuat aplikasi Vue pertama kita! Jika kita perhatikan proses *rendering* nya masih sama seperti *string template* yang biasa, tetapi Vue disini sudah membantu banyak pekerjaan kita secara ajaib. Data yang ditampilkan sudah terhubung dengan DOM, dan semuanya bersifat reaktif. Bagaimana kita bisa tahu hal tersebut? Silakan buka JavaScript konsol pada peramban anda (di halaman yang anda baca sekarang ini) dan *set* `app.pesan` dengan nilai yang berbeda. Anda akan langsung melihat perubahan pesan yang baru saja Anda ketikkan/ubah.
-In addition to text interpolation, we can also bind element attributes like this:
+Selain interpolasi teks, kita juga bisa langsung *binding* attribute pada elemen seperti dibawah ini:
``` html
-
- Hover your mouse over me for a few seconds
- to see my dynamically bound title!
+
+ Arahkan mouse Anda kesini dan tunggu dalam beberapa detik
+ untuk melihat judul pesan yang dinamis
```
@@ -85,39 +86,40 @@ In addition to text interpolation, we can also bind element attributes like this
var app2 = new Vue({
el: '#app-2',
data: {
- message: 'You loaded this page on ' + new Date().toLocaleString()
+ pesan: 'Anda memuat halaman ini pada jam ' + new Date().toLocaleString()
}
})
```
{% raw %}
-
- Hover your mouse over me for a few seconds to see my dynamically bound title!
+
+ Arahkan mouse Anda kesini dan tunggu dalam beberapa detik untuk melihat judul pesan yang dinamis
{% endraw %}
-Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance."
+Sekarang kita telah mempelajari hal baru. Atribut `v-bind` yang telah Anda lihat dinamakan **directive**. **Directive** diawali dengan huruf `v-` untuk mengindikasikan/menginformasikan bahwa dia adalah atribut spesial yang dibawa oleh Vue, dan seperti yang bisa anda tebak, dia menerapkan perilaku yang reaktif di DOM yang sudah dirender. Ibarat kata, "Jaga atribut `title` ini agar tetap *update* dengan properti `pesan`".
+
+Jika Anda buka JavaScript konsol lagi dan tekan enter `app2.pesan = 'ini adalah pesan baru'`, maka Anda akan melihat atribute `title` telah terupdate dengan pesan baru tersebut.
-If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated.
+## Kondisi dan Perulangan
-## Conditionals and Loops
+
+Sangat mudah untuk menerapkan pengkondisian pada suatu elemen:
-It's easy to toggle the presence of an element, too:
``` html
- Now you see me
+ Saya bisa dilihat
```
@@ -125,36 +127,36 @@ It's easy to toggle the presence of an element, too:
var app3 = new Vue({
el: '#app-3',
data: {
- seen: true
+ terlihat: true
}
})
```
{% raw %}
- Now you see me
+ Saya bisa dilihat
{% endraw %}
-Go ahead and enter `app3.seen = false` in the console. You should see the message disappear.
+Cobalah buka konsol di peramban Anda sekali lagi, dan ketikkan `app3.terlihat = false` kemudian tekan enter. Maka pesan yang tadi akan hilang
-This example demonstrates that we can bind data to not only text and attributes, but also the **structure** of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply [transition effects](transitions.html) when elements are inserted/updated/removed by Vue.
+Contoh ini mendemonstrasikan kepada kita bahwa tidak hanya teks dan atribut yang bisa kita *binding*, tetapi juga struktur dari DOM. Bahkan, Vue juga mampu menyediakan transisi yang keren pada sistem efek yang secara otomatis bisa dipakai di [efek transisi](transitions.html) ketika elemen ditambahkan/diperbaharui/dihapus oleh Vue.
-There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used for displaying a list of items using the data from an Array:
+Selain itu juga terdapat *directive* yang lain, masing - masing memiliki fungsi yang spesial. Contohnya seperti, *directive* `v-for` bisa digunakan untuk menampilkan daftar *item* yang didapatkan dari data *Array*:
``` html
@@ -184,146 +186,147 @@ var app4 = new Vue({
el: '#app-4',
data: {
todos: [
- { text: 'Learn JavaScript' },
- { text: 'Learn Vue' },
- { text: 'Build something awesome' }
+ { teks: 'Belajar JavaScript' },
+ { teks: 'Belajar Vue' },
+ { teks: 'Buat proyek keren' }
]
}
})
{% endraw %}
-In the console, enter `app4.todos.push({ text: 'New item' })`. You should see a new item appended to the list.
+Di konsol, ketik dan enter `app4.todos.push({ text: 'Hasilkan uang' })`. Maka anda akan melihat *item* baru akan muncul dalam daftar.
-## Handling User Input
+## Menangani Inputan Pengguna
-
-To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances:
+Untuk mencoba para pengguna berinteraksi dengan aplikasi Anda, kita bisa menggunakan *directive* `v-on` untuk melampirkan *event listener* yang bisa menjalankan suatu fungsi/metode pada *instance* Vue kita.
``` html
-
{{ message }}
-
+
{{ pesan }}
+
```
``` js
var app5 = new Vue({
el: '#app-5',
data: {
- message: 'Hello Vue.js!'
+ pesan: 'Hai Vue.js!'
},
methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
+ balikkanPesan: function () {
+ this.pesan = this.pesan.split('').reverse().join('')
}
}
})
```
{% raw %}
-
{{ message }}
-
+
{{ pesan }}
+
{% endraw %}
-Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
+Perlu diingat bahwa metode ini memperbaharui *state* di aplikasi kita tanpa menyentuh DOM sama sekali. Semua proses manipulasi DOM ditangani oleh Vue, dan kode yang Anda tulis hanya berfokus pada logika saja.
-Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze:
+Vue juga menyediakan *directive* `v-model` yang mampu melakukan *binding* secara dua arah antara pengisian formulir dengan *state* pada aplikasi:
``` html
-
{{ message }}
-
+
{{ pesan }}
+
```
``` js
var app6 = new Vue({
el: '#app-6',
data: {
- message: 'Hello Vue!'
+ pesan: 'Hai Vue!'
}
})
```
{% raw %}
-The component system is another important concept in Vue, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
+Sistem komponen juga termasuk salah satu hal penting yang ada di konsep Vue, karena komponen tersebut adalah sebuah abstraksi yang memudahkan kita untuk membangun aplikasi skala besar dengan menyusun komponen menjadi bagian yang lebih kecil, mandiri, dan bisa digunakan kembali. Jika kita pikirkan lebih lanjut, hampir semua tipe aplikasi antarmuka bisa kita abstraksikan menjadi komponen diagram pohon:
-
+
In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:
+Di Vue, pada dasarnya komponen adalah *instance* Vue yang sudah dilengkapi dengan opsi yang telah di definisikan sebelumnya. Mendaftarkan sebuah komponen di Vue sangatlah mudah:
``` js
-// Define a new component called todo-item
+// Definisikan komponen baru yang bernama todo-item
Vue.component('todo-item', {
- template: '
This is a todo
'
+ template: '
Ini adalah hal hal yang harus dilakukan
'
})
```
-Now you can compose it in another component's template:
+Sekarang kita bisa pasang ke templat komponen yang lain:
``` html
-
+
```
-But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a [prop](components.html#Props):
+Tetapi ini hanya akan merender sebuah teks yang sama di setiap komponen todo, yang mana hal ini sama sekali tidak menarik. Kita harus bisa menyematkan data dari komponen *parent* ke komponen *child*. Mari kita coba modifikasi komponen tersebut agar bisa menerima [prop](components.html#Props):
``` js
Vue.component('todo-item', {
- // The todo-item component now accepts a
- // "prop", which is like a custom attribute.
- // This prop is called todo.
+ // Komponen todo-item sekarang bisa menerima
+ // "prop", yang mana ini adalah atribut kustom.
+ // Prop ini kita namakan todo.
props: ['todo'],
template: '
{{ todo.text }}
'
})
```
-Now we can pass the todo into each repeated component using `v-bind`:
+Sekarang kita bisa menyematkan todo di masing - masing komponen menggunakan `v-bind`:
``` html
@@ -333,16 +336,16 @@ Now we can pass the todo into each repeated component using `v-bind`:
``` js
Vue.component('todo-item', {
props: ['todo'],
- template: '
{% endraw %}
-This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `` component with more complex template and logic without affecting the parent app.
+Ini salah satu contoh untuk percobaan, tetapi kita coba untuk memisahkan aplikasi kita menjadi dua *unit* yang lebih kecil, dan komponen *child* dipisahkan dari *parent* melalui penghubung *props*. Sekarang kita bisa memperbaiki komponen `` kita menjadi templat yang lebih kompleks dan logika yang kita buat di *child* tidak mempengarahui komponen *parent*.
-In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components [later in the guide](components.html), but here's an (imaginary) example of what an app's template might look like with components:
+di Aplikasi yang berskala besar, sangat penting untuk membagi keseluruhan aspek aplikasi menjadi komponen mandiri agar proses developmen semakin mudah untuk di kelola. Kita akan banyak membahas tentang komponen [nanti di panduan](components.html). Berikut ini adalah salah satu contoh seperti apa bentuk suatu templat menggunakan komponen:
``` html
@@ -385,18 +388,18 @@ In a large application, it is necessary to divide the whole app into components
```
-### Relation to Custom Elements
+### Relasi untuk Elemen Kustom
-You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](https://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences:
+Anda pasti menyadari bahwa komponen pada Vue sangat mirip dengan **Elemen Kustom**, yang mana adalah bagian dari [Spesifikasi Web Components](https://www.w3.org/wiki/WebComponents/). Hal itu dikarenakan sintaks di komponen Vue sangatlah fleksibel. Sebagai contoh, komponen Vue mengimplementasikan [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) dan atribut spesial `is`. Tetapi bagaimanapun, terdapat perbedaan di beberapa sisi:
-1. The Web Components Spec has been finalized, but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don't require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.
+1. Spesifikasi dari *Web Components* sudah final, tetapi dia masih belum tersedia / bisa diimplementasikan di setiap peramban secara *native*. Safari 10.1+, Chrome 54+ dan Firefox 63+ sudah mendukung *Web Components* secara *native*. Jika dibandingkan, komponen pada Vue tidak membutuhkan *polyfill* apapun dan bekerja secara konsisten di semua peramban (IE9 keatas). Ketika dibutuhkan, komponen pada Vue juga bisa di bungkus kedalam *native* elemen kustom.
-2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
+2. Komponen pada vue menyediakan fitur penting yang tidak tersedia di elemen kustom murni, terutama pada komponen lintas data, komunikasi *event* kustom dan integrasi *build tool*.
-Although Vue doesn't use custom elements internally, it has [great interoperability](https://custom-elements-everywhere.com/#vue) when it comes to consuming or distributing as custom elements. Vue CLI also supports building Vue components that register themselves as native custom elements.
+Meskipun Vue tidak menggunakan elemen khusus secara internal, Vue memiliki interopabilitas yang sangat baik dalam hal mengkonsumsi atau mendistribusikan elemen kustom. Vue CLI juga mendukung pengembangan Komponen Vue yang didaftarkan sebagai elemen kustom secara *native*.
-## Ready for More?
+## Siap untuk belajar lebih?
-We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
+Kita telah memperkenalkan secara singkat fitur - fitur dasar yang ada di Vue.js - sisanya akan dipandu melalui dokumentasi ini dan fitur yang lebih lanjut akan dijelaskan secara rinci, jadi pastikan untuk membaca semuanya!!
diff --git a/src/v2/guide/join.md b/src/v2/guide/join.md
index 661fe1bd26..0794b8d63a 100644
--- a/src/v2/guide/join.md
+++ b/src/v2/guide/join.md
@@ -63,4 +63,4 @@ Banyak hal yang bisa Anda lakukan untuk mengembangkan Vue di komunitas Anda:
- **Mulai jalankan pertemuan (*meetup*) Anda.** Jika disana masih belum ada meetup yang membahas tentang Vue di area Anda, Anda bisa memulainya! Gunakan [sumber daya di Vuemeetups.org](https://www.Vuemeetups.org/resources/#introduction) untuk membantu mensukseskan acara Anda!
- **Bantu tim meetup organizer.** Biasanya tidak akan ada banyak bantuan ketika akan diadakan sebuah acara, jadi tawarkan bantuan untuk membantu para *organizer* dalam mensukseskan acara tersebut.
-Jika Anda mempunyai beberapa pertanyaan tentang bagaimana Anda bisa terlibat dalam kegiatan komunitas Vue lokal di tempat Anda, kunjungi [hello@Vuemeetups.org](mailto:hello@Vuemeetups.org) atau [@VueMeetups](https://www.twitter.com/Vuemeetups)!
+Jika Anda mempunyai beberapa pertanyaan tentang bagaimana Anda bisa terlibat dalam kegiatan komunitas Vue lokal di tempat Anda, kunjungi [hello@Vuemeetups.org](mailto:hello@Vuemeetups.org) atau [@VueMeetups](https://www.twitter.com/Vuemeetups)!
\ No newline at end of file