diff --git a/README.md b/README.md index 4ef988a0d8..882e9ec6d9 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -# vuejs.org +# docs.vuejs.id -This site is built with [hexo](http://hexo.io/). Site content is written in Markdown format located in `src`. Pull requests welcome! +Situs ini dibangun dengan [hexo](http://hexo.io/). Konten situs ditulis menggunakan format Markdown yang bertempat di folder `src`. Pull request dipersilakan! -## Developing +## Pengembangan -Start a dev server at `localhost:4000`: +Memulai server pengembangan pada `localhost:4000`: ``` $ npm install -g hexo-cli diff --git a/package.json b/package.json index 7720ec92de..36b3cfa2b7 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.18", "private": true, "hexo": { - "version": "3.2.0" + "version": "3.2.2" }, "dependencies": { "hexo": "^3.2.0", @@ -18,4 +18,4 @@ "hexo-renderer-stylus": "^0.3.1", "hexo-server": "^0.2.0" } -} +} \ No newline at end of file diff --git a/src/guide/index.md b/src/guide/index.md index d23b1903f3..3e99a76a9f 100644 --- a/src/guide/index.md +++ b/src/guide/index.md @@ -1,12 +1,14 @@ --- -title: Getting Started +title: Memulai type: guide order: 1 --- -Let's start with a quick tour of Vue's data binding features. If you are more interested in a high-level overview first, check out this [blog post](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/). + +Mari kita mulai dengan tour ringkas penggunaan fitur data binding pada Vue.js. Jika anda lebih tertarik untuk ikhtisar yang lebih tinggi levelnya, cek [postingan blog ini](http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/). -The easiest way to try out Vue.js is using the [JSFiddle Hello World example](https://jsfiddle.net/yyx990803/okv0rgrk/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page. + +Cara termudah untuk mencoba Vue.js adalah melalui [contoh Hello World pada JSFiddle](https://jsfiddle.net/yyx990803/okv0rgrk/). Silakan membuka tab baru dan ikuti sebagaimana yang telah kami contohkan. ### Hello World @@ -37,7 +39,8 @@ new Vue({ {% endraw %} -### Two-way Binding + +### Data Binding Dua Arah ``` html
@@ -68,7 +71,7 @@ new Vue({ {% endraw %} -### Render a List +### Render sebuah List ``` html
@@ -84,9 +87,9 @@ new Vue({ el: '#app', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue.js' }, - { text: 'Build Something Awesome' } + { text: 'Belajar JavaScript' }, + { text: 'Belajar Vue.js' }, + { text: 'Buat sesuatu yang mengagumkan' } ] } }) @@ -104,21 +107,22 @@ new Vue({ el: '#app3', data: { todos: [ - { text: 'Learn JavaScript' }, - { text: 'Learn Vue.js' }, - { text: 'Build Something Awesome' } + { text: 'Belajar JavaScript' }, + { text: 'Belajar Vue.js' }, + { text: 'Buat sesuatu yang mengagumkan' } ] } }) {% endraw %} -### Handle User Input + +### Menangani Inputan dari Pengguna ``` html

{{ message }}

- +
``` ``` js @@ -137,7 +141,7 @@ new Vue({ {% raw %}

{{ message }}

- +
{% endraw %} -### All Together Now + +### Lakukan Secara Bersamaan ``` html
@@ -226,3 +231,4 @@ new Vue({ {% endraw %} I hope this gives you a basic idea of how Vue.js works. I'm sure you also have many questions now - read along, and we will cover them in the rest of the guide. +Kami harap ini dapat memberikan Anda gambaran bagaimana Vue.js bekerja. Kami yakin anda juga memiliki banyak pertanyaan sekarang. Silakan baca terus, dan kami akan membahasnya di panduan berikutnya. diff --git a/src/guide/installation.md b/src/guide/installation.md index 0861286e5e..a59f701330 100644 --- a/src/guide/installation.md +++ b/src/guide/installation.md @@ -1,5 +1,5 @@ --- -title: Installation +title: Instalasi type: guide order: 0 vue_version: 1.0.26 @@ -8,63 +8,72 @@ min_size: "75.01" gz_size: "26.03" --- -### Compatibility Note +### Catatan Kompatibilitas -Vue.js does **not** support IE8 and below, because Vue.js uses ECMAScript 5 features that are un-shimmable in IE8. However Vue.js supports all [ECMAScript 5 compliant browsers](http://caniuse.com/#feat=es5). + +Vue.js **tidak mendukung** IE8 dan di bawahnya, karena Vue.js memakai fitur ECMAScript 5 yang dapat berjalan di IE8. Akan tetapi, Vue.js mendukung semua [browser yang dapat menjalankan ECMAScript 5](http://caniuse.com/#feat=es5). -### Release Notes +### Catatan Rilis -Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue/releases). + +Detil catatan rilis untuk setiap versi tersedia di [GitHub](https://github.com/vuejs/vue/releases). ## Standalone -Simply download and include with a script tag. `Vue` will be registered as a global variable. **Pro tip: don't use the minified version during development. you will miss out all the nice warnings for common mistakes.** + +Download dengan mudah dan cukup masukkan ke dalam tag ` {% endraw %} -This looks pretty similar to just rendering a template, but Vue.js 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? Just open up your browser developer console and modify `exampleData.name`. You should see the rendered example above update accordingly. + +Hal ini sangat mirip dengan ketika kita hanya me-render sebuah template, namun dibalik itu semua Vue.js melakukan banyak pekerjaan di balik layar. Data tersebut sekarang terhubung langsung dengan DOM, dan semuanya sekarang bersifat **reactive**. Bagaimana kita bisa tahu? Cukup buka browser developer console dan ubah `exampleData.name` dengan value yang kita inginkan. Dan Anda akan melihat contoh yang telah dirender di atas akan ikut terupdate. -Note that we didn't have to write any DOM-manipulating code: the HTML template, enhanced with the bindings, is a declarative mapping of the underlying data state, which is in turn just plain JavaScript objects. Our view is entirely data-driven. + +Mohon dicatat bahwasannya kita tidak harus mengetik kode apapun untuk memanipulasi DOM: hanya template HTML, ditambah dengan bindings, adalah sebuah declarative mapping (pemetaan deklaratif / lawan dari imperatif) dari data, yang mana hanya dalam bentuk Object JavaScript. View kita kini sepenuhnya data-driven. -Let's look at a second example: + +Mari kita lihat contoh ke-dua: ``` html
@@ -88,19 +97,24 @@ var exampleVM2 = new Vue({ {% endraw %} -Here we are encountering something new. The `v-if` attribute you are seeing is called a **Directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue.js, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Go ahead and set `exampleVM2.greeting` to `false` in the console. You should see the "Hello!" message disappear. + +Di sini kita menemui sesuatu yang baru. Attribute `v-if` yang saat ini Anda lihat disebut dengan **Directive**. Setiap directive diberi awalan `v-` untuk menunjukkan bahwasannya mereka adalah attribute khusus yang disediakan oleh Vue.js, dan seperti yang Anda tebak, attribute-attribute tersebut memiliki reactive behavior (tingkah laku) khusus untuk me-render DOM. Cobalah untuk mengubah `exampleVM2.greeting` menjadi `false` pada console. Anda pasti akan melihat tulisan "Hello!" menghilang. -This second example demonstrates that not only can we bind DOM text to the data, we can also bind the **structure** of the DOM to the data. Moreover, Vue.js also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/removed by Vue. + +Contoh ke-dua mendemonstrasikan bahwa kita tidak hanya dapat mem-bind teks yang ada pada DOM dengan data kita, namun kita juga dapat mem-bind **structure** (struktur) dari DOM terhadap data. Bahkan, Vue.js juga menyediakan sistem efek transisi yang powerful yang secara otomatis berlaku ketika sebuah elemen baru muncul atau terhapus dari tampilan oleh Vue. -There are quite a few other directives, each with its own special functionality. For example the `v-for` directive for displaying items in an Array, or the `v-bind` directive for binding HTML attributes. We will discuss the full data-binding syntax with more details later. + +Ada beberapa directive lainya, tiap directive mempunyai fungsi khusus yang berbeda. Sebagai contoh directive `v-for` digunakan untuk menampilkan item yang terdapat di dalam sebuah Array (larik), atau directive `v-bind` untuk mem-bind attribute HTML. Nanti, akan kita diskusikan sintaks data-binding lebih lanjut. ## Component System -The Component System is another important concept in Vue.js, 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: + +Component System adalah konsep penting lainnya yang ada di dalam Vue.js, karena dia adalah abstraction (abstraksi) yang mengizinkan kita untuk membangun large-scale applications yang tersusun dari komponen-komponen kecil, self-contained, dan reusable (dapat dipakai ulang). Jika kita berpikir tentang hal tersebut, hampir semua jenis application interface (antarmuka aplikasi) dapat di-abstraksikan menjadi sebuah pohon component: ![Component Tree](/images/components.png) -In fact, a typical large application built with Vue.js would form exactly what is on the right - a tree of components. We will talk a lot more about components later in the guide, but here's an (imaginary) example of what an app's template would look like with components: + +Dalam kenyataanya, sebuah aplikasi skala besar yang dibangun dengan Vue.js akan membentuk sebuah a tree of components (pohon komponen-komponen). Kita akan berbicara lebih lanjut tentang komponen nanti, sementara itu berikut adalah (gambaran) penampakan komponen yang ada dalam sebuah template aplikasi: ``` html
@@ -112,10 +126,14 @@ In fact, a typical large application built with Vue.js would form exactly what i
``` -You may have noticed that Vue.js components are very similar to **Custom Elements**, which is part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). In fact, Vue.js' 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 mungkin memperhatikan bahwa components Vue.js sangat mirip dengan **Custom Elements**, yang mana bagian dari [Web Components Spec](http://www.w3.org/wiki/WebComponents/). Nyatanya, sintaks component milik Vue.js lebih longgar dari spec tadi. Sebagai contoh, components Vue mengimplementasikan [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) dan attribute spesial `is`. Meski demikian, berikut adalah beberapa kunci perbedaannya: -1. The Web Components Spec is still very much a work in progress, and is not natively implemented in every browser. In comparison, Vue.js components don't require any polyfills and works consistently in all supported browsers (IE9 and above). When needed, Vue.js components can also be wrapped inside a native custom element. + +1. Web Components Spec masih dalam masa pengembangan, dan belum diimplementasikan pada setiap browser secara native. Sebagai perbandingan, components Vue.js tidak memerlukan polyfills apapun dan dapat bekerja secara konsisten pada semua browser yang didukung (IE9 ke atas). Jika diperlukan, components Vue.js juga dapat di-wrap (dibungkus) kedalam native custom element. -2. Vue.js components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and dynamic component switching with transition effects. +2. Components Vue.js menyediakan fitur-fitur penting yang tidak tersedia pada custom elements biasa, terutama pada cross-component data flow (alur data antar komponen), custom event communication dan dynamic component switching dengan efek transisi. + -The component system is the foundation for building large apps with Vue.js. In addition, the Vue.js ecosystem also provides advanced tooling and various supporting libraries that can be put together to create a more "framework" like system. + +Component system (sistem komponen) adalah pondasi penting dalam membangun sebuah aplikasi berskala besar denga Vue.js. Sebagai tambahan, ekosistem Vue.js juga menyediakan advanced tooling (perkakas canggih) dan dukungan berbagai macam library-library yang dapat digunakan secara bersamaan untuk membuat Vue.js lebih mirip seperti "framework". diff --git a/themes/vue/layout/page.ejs b/themes/vue/layout/page.ejs index f19bc4469e..bcef873d4d 100644 --- a/themes/vue/layout/page.ejs +++ b/themes/vue/layout/page.ejs @@ -16,9 +16,10 @@
<% } %>
- Caught a mistake or want to contribute to the documentation? + + Ada kesalahan pada dokumentasi ini, atau ingin turut berkontribusi? - Edit this page on Github! + Edit halaman ini di Github!