From c4243434f815e7ff07265f4a70bc841af2c2a170 Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Tue, 5 Mar 2019 17:04:34 +0700 Subject: [PATCH 1/7] mulai kerjakan join.md --- src/v2/guide/join.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/join.md b/src/v2/guide/join.md index 105e216251..8960970d7e 100644 --- a/src/v2/guide/join.md +++ b/src/v2/guide/join.md @@ -1,18 +1,18 @@ --- -title: Join the Vue.js Community! +title: Join Komunitas Vue.js! type: guide order: 802 --- -Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome! +Komunitas Vuejs berkembang sangat pesat dan jika Anda membaca halaman ini, ada kesempatan bisa bergabung dengan komunitas Vue. Selamat datang !! -Now we'll answer both what the community can do for you and what you can do for the community. +Sekarang kami akan menjawab apa yang dapat dilakukan komunitas untuk Anda dan apa yang bisa Anda lakukan untuk komunitas. -## Resources +## Sumber Daya -### Code of Conduct +### Kode Etik -Our [Code of Conduct](/coc) is a guide to make it easier to enrich all of us and the technical communities in which we participate. +[Kode Etik](/coc) kami adalah sebuah panduan untuk mempermudah kita semua dalam belajar dan komunitas yang membahas segala hal tentang teknis di tempat kita berpartisipasi. ### Get Support From 51c49c2f1a070cd124b703f81561f76a6322b1c4 Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Tue, 5 Mar 2019 23:18:02 +0700 Subject: [PATCH 2/7] Fixes #42 halaman join the community --- src/v2/guide/join.md | 60 ++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/src/v2/guide/join.md b/src/v2/guide/join.md index 8960970d7e..3e5ffcf282 100644 --- a/src/v2/guide/join.md +++ b/src/v2/guide/join.md @@ -14,53 +14,53 @@ Sekarang kami akan menjawab apa yang dapat dilakukan komunitas untuk Anda dan ap [Kode Etik](/coc) kami adalah sebuah panduan untuk mempermudah kita semua dalam belajar dan komunitas yang membahas segala hal tentang teknis di tempat kita berpartisipasi. -### Get Support +### Dapatkan Bantuan -- [Forum](https://forum.vuejs.org/): The best place to ask questions and get answers about Vue and its ecosystem. -- [Chat](https://chat.vuejs.org/): A place for Vue devs to meet and chat in real time. -- [Meetups](https://www.vuemeetups.org): Want to find local Vue.js enthusiasts like yourself? Interested in becoming a community leader? We have the help and support you need right here! -- [GitHub](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests! +- [Forum](https://forum.vuejs.org/): Tempat yang tepat untuk menanyakan beberapa pertanyaan dan mendapatkan jawaban tentang Vue dan ekosistem nya. +- [Chat](https://chat.vuejs.org/): Tempate Developer Vue untuk bertemu dan ngobrol secara real time. +- [Meetups](https://www.vuemeetups.org): Ingin mencari penggemar Vuejs di lokal area seperti anda? Tertarik menjadi ketua komunitas? Kami disini bisa memberikan bantuan dan dukungan kepada anda ! +- [GitHub](https://github.com/vuejs): Jika anda menemukan `bug` untuk di laporkan dan meminta sebuah fitur baru di Vuejs, komunikasikan dengan kami melalui Github Issues. Kami juga menerima Pull Request dari Anda! -### Explore the Ecosystem +### Jelajahi Ekosistem -- [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people. -- [The "Show and Tell" Subforum](https://forum.vuejs.org/c/show-and-tell): Another great place to check out what others have built with and for the growing Vue ecosystem. +- [Halaman Awesome Vue](https://github.com/vuejs/awesome-vue): Temukan sumberdaya / library keren lainnya yang telah di luncurkan oleh orang orang keren. +- [The "Show and Tell" Subforum](https://forum.vuejs.org/c/show-and-tell): Tempat bagus lainnya untuk melihat apa yang telah dibuat oleh orang lain dan perkembangan Ekosistem Vuejs. -## What You Can Do +## Apa yang bisa anda lakukan -### Contribute Code +### Kontribusi kode -As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md). +Seperti halnya project yang lain, ada beberapa peraturan dalam berkontribusi. Untuk memastikan kita bisa membantu atau menerima Pull Request dari anda secepat dan setanggap mungkin, dimohon untuk baca ini terlebih dahulu [the contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md). -After that, you'll be ready to contribute to Vue's core repositories: +Setelah itu, Anda sudah siap untuk berkontribusi ke repository inti Vue: -- [vue](https://github.com/vuejs/vue): the core library -- [vuex](https://github.com/vuejs/vuex): Flux-inspired state management -- [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs +- [vue](https://github.com/vuejs/vue): Pustaka inti Vuejs +- [vuex](https://github.com/vuejs/vuex): State Management yang terinspirasi dari Flux +- [vue-router](https://github.com/vuejs/vue-router): Sistem routing untuk SPA -...as well as many smaller official [companion libraries](https://github.com/vuejs). +... serta masih banyak lagi official [pustaka pendamping](https://github.com/vuejs). -### Share (and Build) Your Experience +### Bagikan (dan Bangun) Pengalamanmu -Apart from answering questions and sharing resources in the forum and chat, there are a few other less obvious ways to share and expand what you know: +Selain menjawab beberapa pertanyaan dan berbagi sumber daya di forum dan obrolan, ada beberapa cara lagi untuk bisa berbagi dan memperluas pengetahuan anda: -- **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even publishing a gist that you share on social media. -- **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests. +- **Buat materi pembelajaran.** Seringkali pepatah mengatakan bahwa cara terbaik untuk belajar adalah dengan cara mengajar. Jika ada sesuatu yang menarik yang bisa anda lakukan dengan Vue, perkuat keahlian anda dengan menulis blog, membuat lokakarya, atau bahkan menerbitkan `gist` yang bisa anda bagikan di sosial media. +- **Pantau repo yang anda gemari.** Anda akan menerima notifikasi ketika ada aktivitas di repository tersebut, ini akan memberikan anda pengetahuan / informasi lebih terkait diskusi yang sedang berjalan dan fitur yang akan datang. Ini adalah cara yang fantastis untuk membangun skill / keahlian anda, sehingga anda pada akhirnya dapat membantu mengatasi beberapa masalah dan mampu menerbitkan Pull Request. -### Translate Docs +### Terjemahkan Dokumentasi -Vue has already spread across the globe, with even the core team in at least half a dozen timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org). We're very proud of Vue's international reach, but we can do even better. +Vue telah tersebar keseluruh dunia, bahkan hanya dengan tim inti setidaknya dalam setengah lusin zona waktu. [Forum](https://forum.vuejs.org/) ini berisi 7 bahasa dan akan terus bertambah, dan banyak dokumentasi kami memiliki beberapa [terjemahan yang dikelola secara aktif](https://github.com/vuejs?utf8=%E2%9C%93&query=vuejs.org). Kami sangat bangga dengan jangkauan Vue di kancah Internasional, tetapi kami masih bisa melakukannya lebih baik lagi. -I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there? +Saat ini kami berharap bahwa anda membaca kalimat ini dalam bahasa pilihan anda. Jika tidak, apakah anda bersedia untuk membantu kami sampai kesana? -If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out. +Jika iya, jangan ragu untuk fork repo [dokumentasi ini](https://github.com/vuejs/vuejs.org/) atau dokumentasi lain yang dikelola secara resmi, kemudian mulailah untuk menerjemahkan. Setelah terjemahan anda mengalami kemajuan, silakan untuk membuat sebuah issue atau Pull Request di repo utama dan kami akan menghubungi beberapa kontributor untuk membantu anda. -### Become a Community Leader +### Menjadi Ketua Komunitas -There's a lot you can do to help Vue grow in your community: +Banyak hal yang bisa anda lakukan untuk mengembangkan vue di komunitas anda: -- **Present at your local meetup.** Whether it's giving a talk or running a workshop, you can bring a lot of value to your community by helping both new and experienced Vue developers continue to grow. -- **Start your own meetup.** If there's not already a Vue meetup in your area, you can start your own! Use the [resources at vuemeetups.org](https://www.vuemeetups.org/resources/#introduction) to help you succeed! -- **Help meetup organizers.** There can never be too much help when it comes to running an event, so offer a hand to help out local organizers to help make every event a success. +- **Hadir di pertemuan (lokal meetup).** Entah itu berbagi ilmu / pengalaman maupun menjalankan sebuah workshop, anda bisa membawa dampak yang besar untuk komunitas anda dengan membantu vue developer pemula maupun yang berpengalaman untuk lebih maju lagi. +- **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. -If you have any questions on how you can get more involved with your local Vue community, reach out at [hello@vuemeetups.org](mailto:hello@vuemeetups.org) or [@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)! From 6a7d9639b964dfb46adb7ca1b8a90dbd9c1750cf Mon Sep 17 00:00:00 2001 From: Nusendra Hanggarawan Date: Tue, 5 Mar 2019 23:52:25 +0700 Subject: [PATCH 3/7] memulai pengerjaan halaman introduction, masih sekitar 10% --- src/v2/guide/index.md | 29 +++++++++++++++-------------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 9f81c29936..7983a0cd83 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -1,40 +1,41 @@ --- -title: Introduction +title: Pengantar 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 **progressive framework** untuk membangun antarmuka pengguna. Tidak seperti beberapa framework monolitik yang lain, Vue dirancang dari bawah keatas agar dapat diadopsi secara bertahap. Pustaka inti nya di fokuskan 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 sebelum menyelam lebih dalam, 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). -
Watch a free video course on Vue Mastery
+Jika anda adalah seorang frontend developer yang berpengalaman dan ingin tahu bagaimana Vue dibandingkan dengan pustaka/framework yang lain, silakan kunjungi [Perbandingan dengan framework yang lain](comparison.html). -## Getting Started +
Tonton video kursus gratis di Vue Mastery
-

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 pembaca 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 framework sebagai langkah pertama anda. Pelajari terlebih dahulu dasar - dasar nya, kemudian kembali kesini!! Pengalaman menggunakan framework 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. +Halaman [Instalasi](installation.html) menyedikan lebih banyak opsi dalam memulai instalasi Vue. Catatan: Kami **tidak** menyarankan para pemula untuk memulai dengan `vue-cli`, terlebih lagi jika anda masih belum terbiasa / familiar dengan build tools yang bernama 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 From 0fb65b9689416f499ee86e044555323e396ef7d9 Mon Sep 17 00:00:00 2001 From: nusendra Date: Thu, 7 Mar 2019 20:14:16 +0700 Subject: [PATCH 4/7] Fixes #7 Introduction page --- src/v2/guide/index.md | 194 +++++++++++++++++++++--------------------- 1 file changed, 98 insertions(+), 96 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 7983a0cd83..4c3d4e15b2 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -33,52 +33,52 @@ atau: ``` -Halaman [Instalasi](installation.html) menyedikan lebih banyak opsi dalam memulai instalasi Vue. Catatan: Kami **tidak** menyarankan para pemula untuk memulai dengan `vue-cli`, terlebih lagi jika anda masih belum terbiasa / familiar dengan build tools yang bernama Node.js. +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 bernama Node.js. 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* -
Try this lesson on Scrimba
+
Coba tutorial ini di Scrimba
-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 console pada peramban/*browser* 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
``` @@ -86,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`". -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. +Jika Anda buka javascript console lagi dan tekan enter `app2.pesan = 'ini adalah pesan baru'`, maka Anda akan melihat atribute `title` telah terupdate dengan pesan baru tersebut. -## Conditionals and Loops +## Kondisi dan Perulangan -
Try this lesson on Scrimba
+
Pelajari ini di Scrimba
+ +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
``` @@ -126,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 console di browser 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
  1. - {{ todo.text }} + {{ todo.teks }}
@@ -165,9 +166,9 @@ 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' } ] } }) @@ -176,7 +177,7 @@ var app4 = new Vue({
  1. - {{ todo.text }} + {{ todo.teks }}
@@ -185,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 console, 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 -
Try this lesson on Scrimba
+
Pelajari ini di Scrimba
-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 %}
-

{{ message }}

- +

{{ pesan }}

+
{% endraw %} -## Composing with Components +## Menyusun Komponen -
Try this lesson on Scrimba
+
Pelajari ini di Scrimba
-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: -![Component Tree](/images/components.png) +![Komponen Diagram Pohon](/images/components.png) 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
      @@ -334,16 +336,16 @@ Now we can pass the todo into each repeated component using `v-bind`: ``` js Vue.component('todo-item', { props: ['todo'], - template: '
    1. {{ todo.text }}
      2. ' + template: '
    2. {{ todo.barang }}
      3. ' }) var app7 = new Vue({ el: '#app-7', data: { - groceryList: [ - { id: 0, text: 'Vegetables' }, - { id: 1, text: 'Cheese' }, - { id: 2, text: 'Whatever else humans are supposed to eat' } + barangBelanjaan: [ + { id: 0, barang: 'Sayuran' }, + { id: 1, barang: 'Keju' }, + { id: 2, barang: 'Makanan yang lain' } ] } }) @@ -351,30 +353,30 @@ var app7 = new Vue({ {% raw %}
        - +
      {% 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
      @@ -386,16 +388,16 @@ 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 browser 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 browser (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*. -## 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!! From daff7e4a9e9d4636eb5ed950cca827c5d39f46b1 Mon Sep 17 00:00:00 2001 From: nusendra Date: Thu, 7 Mar 2019 20:22:35 +0700 Subject: [PATCH 5/7] ada part yang ketinggalan di introduction page --- src/v2/guide/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index 4c3d4e15b2..daf002495d 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -396,6 +396,8 @@ Anda pasti menyadari bahwa komponen pada Vue sangat mirip dengan **Elemen Kustom 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*. +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*. + ## Siap untuk belajar lebih? 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!! From b4b595fe38c20ab25765ef290deca8ca0d10d831 Mon Sep 17 00:00:00 2001 From: nusendra Date: Thu, 7 Mar 2019 21:05:42 +0700 Subject: [PATCH 6/7] fix some words in introduction page --- src/v2/guide/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index daf002495d..a8fbb91b44 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -1,17 +1,17 @@ --- -title: Pengantar +title: Perkenalan type: guide order: 2 --- ## Apa itu Vue.js? -Vue (cara pengucapannya /vjuː/, seperti **view**) adalah sebuah **progressive framework** untuk membangun antarmuka pengguna. Tidak seperti beberapa framework monolitik yang lain, Vue dirancang dari bawah keatas agar dapat diadopsi secara bertahap. Pustaka inti nya di fokuskan 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). +Vue (cara pengucapannya /vjuː/, seperti **view**) adalah sebuah kerangka kerja nan progresif untuk membangun antarmuka pengguna. Tidak seperti beberapa framework monolitik yang lain, Vue dirancang dari dasar sekali agar dapat diadopsi secara bertahap. Pustaka inti nya di fokuskan 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). -Jika anda ingin mempelajari lebih lanjut tentang Vue sebelum menyelam lebih dalam, kami membuat sebuah video tentang prinsip - prinsip inti dan contoh proyek. +Jika anda ingin mempelajari lebih lanjut tentang Vue, kami membuat sebuah video tentang prinsip - prinsip inti dan contoh proyek. -Jika anda adalah seorang frontend developer yang berpengalaman dan ingin tahu bagaimana Vue dibandingkan dengan pustaka/framework yang lain, silakan kunjungi [Perbandingan dengan framework yang lain](comparison.html). +Jika anda adalah seorang *frontend developer* yang berpengalaman dan ingin tahu bagaimana Vue dibandingkan dengan pustaka/framework yang lain, silakan kunjungi [Perbandingan dengan framework yang lain](comparison.html).
      Tonton video kursus gratis di Vue Mastery
      From 6c9fbdfbe7931213689bf2c435c3b39aa376f0ab Mon Sep 17 00:00:00 2001 From: nusendra Date: Fri, 8 Mar 2019 07:10:54 +0700 Subject: [PATCH 7/7] Fix konsol, peramban, kerangka kerja --- src/v2/guide/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/v2/guide/index.md b/src/v2/guide/index.md index a8fbb91b44..e742c5b59e 100644 --- a/src/v2/guide/index.md +++ b/src/v2/guide/index.md @@ -6,18 +6,18 @@ order: 2 ## Apa itu Vue.js? -Vue (cara pengucapannya /vjuː/, seperti **view**) adalah sebuah kerangka kerja nan progresif untuk membangun antarmuka pengguna. Tidak seperti beberapa framework monolitik yang lain, Vue dirancang dari dasar sekali agar dapat diadopsi secara bertahap. Pustaka inti nya di fokuskan 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). +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). Jika anda ingin mempelajari lebih lanjut tentang Vue, kami membuat sebuah video tentang prinsip - prinsip inti dan contoh proyek. -Jika anda adalah seorang *frontend developer* yang berpengalaman dan ingin tahu bagaimana Vue dibandingkan dengan pustaka/framework yang lain, silakan kunjungi [Perbandingan dengan framework yang lain](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).
      Tonton video kursus gratis di Vue Mastery
      ## Memulai -

      Panduan resmi ini mengasumsikan bahwa pengetahuan pembaca 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 framework sebagai langkah pertama anda. Pelajari terlebih dahulu dasar - dasar nya, kemudian kembali kesini!! Pengalaman menggunakan framework yang lain sangat membantu, tapi bukan sebuah kewajiban.

      +

      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: @@ -33,7 +33,7 @@ atau: ``` -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 bernama Node.js. +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. 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. @@ -70,7 +70,7 @@ var app = new Vue({ {% endraw %} -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 console pada peramban/*browser* 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. +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. Selain interpolasi teks, kita juga bisa langsung *binding* attribute pada elemen seperti dibawah ini: @@ -108,7 +108,7 @@ var app2 = new Vue({ 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 console lagi dan tekan enter `app2.pesan = 'ini adalah pesan baru'`, maka Anda akan melihat atribute `title` telah terupdate dengan pesan baru tersebut. +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. ## Kondisi dan Perulangan @@ -146,7 +146,7 @@ var app3 = new Vue({ {% endraw %} -Cobalah buka console di browser Anda sekali lagi, dan ketikkan `app3.terlihat = false` kemudian tekan enter. Maka pesan yang tadi akan hilang +Cobalah buka konsol di peramban Anda sekali lagi, dan ketikkan `app3.terlihat = false` kemudian tekan enter. Maka pesan yang tadi akan hilang 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. @@ -195,7 +195,7 @@ var app4 = new Vue({ {% endraw %} -Di console, ketik dan enter `app4.todos.push({ text: 'Hasilkan uang' })`. Maka anda akan melihat *item* baru akan muncul dalam daftar. +Di konsol, ketik dan enter `app4.todos.push({ text: 'Hasilkan uang' })`. Maka anda akan melihat *item* baru akan muncul dalam daftar. ## Menangani Inputan Pengguna @@ -392,7 +392,7 @@ di Aplikasi yang berskala besar, sangat penting untuk membagi keseluruhan aspek 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. Spesifikasi dari *Web Components* sudah final, tetapi dia masih belum tersedia / bisa diimplementasikan di setiap browser 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 browser (IE9 keatas). Ketika dibutuhkan, komponen pada Vue juga bisa di bungkus kedalam *native* elemen kustom. +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. 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*.