From 281ad153dd2533991683c88d2bb0170067575c87 Mon Sep 17 00:00:00 2001 From: Muhammad Irwan Andriawan Date: Thu, 7 Mar 2019 09:32:13 +0700 Subject: [PATCH 1/5] translate event handling page --- src/v2/guide/events.md | 182 ++++++++++++++++++++--------------------- 1 file changed, 91 insertions(+), 91 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 9accd6c4b8..5e953a0aa9 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -1,40 +1,40 @@ --- -title: Event Handling +title: Penanganan Event type: guide order: 9 --- -## Listening to Events +## Memantau Event -We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered. +Kita dapat menggunakan `v-on` direktif untuk memantau event DOM dan menjalankan beberapa JavaScript ketika dipicu. -For example: +Contoh: ``` html -
- -

The button above has been clicked {{ counter }} times.

+
+ +

Tombol diatas telah ditekan {{ counter }} kali.

``` ``` js -var example1 = new Vue({ - el: '#example-1', +var contoh1 = new Vue({ + el: '#contoh-1', data: { counter: 0 } }) ``` -Result: +Hasil: {% raw %} -
+
-

The button above has been clicked {{ counter }} times.

+

Tombol diatas telah ditekan {{ counter }} kali.

{% endraw %} -## Method Event Handlers +## Metode Event Handler -The logic for many event handlers will be more complex though, so keeping your JavaScript in the value of the `v-on` attribute isn't feasible. That's why `v-on` can also accept the name of a method you'd like to call. +Bagaimanapun baris kode untuk banyak event handler akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam `v-on` atribut tidaklah tepat. Itulah mengapa `v-on` dapat juga menerima nama metode yang ingin dijalankan. -For example: +Contoh: ``` html -
- +
+
``` ``` js -var example2 = new Vue({ - el: '#example-2', +var contoh2 = new Vue({ + el: '#contoh-2', data: { name: 'Vue.js' }, - // define methods under the `methods` object + // mendefinisikan metode dibawah `methods` object methods: { greet: function (event) { - // `this` inside methods points to the Vue instance + // `this` di dalam metode merujuk ke Vue instance alert('Hello ' + this.name + '!') - // `event` is the native DOM event + // `event` adalah bawaan DOM event if (event) { alert(event.target.tagName) } @@ -74,19 +74,19 @@ var example2 = new Vue({ } }) -// you can invoke methods in JavaScript too -example2.greet() // => 'Hello Vue.js!' +// Anda juga dapat memanggil metode dalam JavaScript +contoh2.greet() // => 'Hello Vue.js!' ``` -Result: +Hasil: {% raw %} -
+
{% endraw %} -## Methods in Inline Handlers +## Metode dalam Inline Handler -Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement: +Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah inline JavaScript statement: ``` html -
+
``` ``` js new Vue({ - el: '#example-3', + el: '#contoh-3', methods: { say: function (message) { alert(message) @@ -123,7 +123,7 @@ new Vue({ }) ``` -Result: +Hasil: {% raw %}
@@ -141,7 +141,7 @@ new Vue({ {% endraw %} -Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable: +Terkadang kita juga butuh akses ke event DOM bawaan dalam inline statement handler. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode: ``` html - + - + ``` -### Mouse Button Modifiers +### Tombol Mouse Modifier -> New in 2.2.0+ +> Baru pada versi 2.2.0+ - `.left` - `.right` - `.middle` -These modifiers restrict the handler to events triggered by a specific mouse button. +Modifier ini membatasi handler pada event saat dipicu oleh tombol mouse tertentu. -## Why Listeners in HTML? +## Mengapa Listener di dalam HTML? -You might be concerned that this whole event listening approach violates the good old rules about "separation of concerns". Rest assured - since all Vue handler functions and expressions are strictly bound to the ViewModel that's handling the current view, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`: +Anda mungkin menyoroti bahwa keseluruhan pendekatan event listening menyalahi aturan lama tentang "separation of concerns". Kebanyakan meyakini itu - sejak semua fungsi-fungsi dan ekspresi Vue handler terikat secara terbatas pada ViewModel yang mana menangani view yang berhubungan, hal itu tidak akan mempersulit pemeliharaan. Faktanya, terdapat beberapa keuntungan penggunaan `v-on`: -1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template. +1. Mempermudah penempatan implementasi fungsi handler diantara baris kode JS dengan menelusuri sekilas HTML templat. -2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test. +2. Sejak anda tidak membutuhkan peletakkan event listeners dalam JS secara manual, baris kode ViewModel menjadi berisi murni logika dan bebas DOM. Ini memudahkan dalam pengujian. -3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself. +3. Saat ViewModel dihapus, semua event listener secara otomatis dihapus. Anda tidak perlu khawatir tentang membersihkan event yang ada. \ No newline at end of file From 7fc54a89f49802913f3576ac7fea0032a57629e6 Mon Sep 17 00:00:00 2001 From: Muhammad Irwan Andriawan Date: Thu, 7 Mar 2019 10:27:07 +0700 Subject: [PATCH 2/5] fix typo and grammar --- src/v2/guide/events.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 5e953a0aa9..e996b68e1d 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -44,13 +44,13 @@ var contoh1 = new Vue({ ## Metode Event Handler -Bagaimanapun baris kode untuk banyak event handler akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam `v-on` atribut tidaklah tepat. Itulah mengapa `v-on` dapat juga menerima nama metode yang ingin dijalankan. +Bagaimanapun baris kode untuk banyak event handler akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam atribut `v-on` tidaklah tepat. Itulah mengapa `v-on` dapat juga menerima nama metode yang ingin dijalankan. Contoh: ``` html
- +
``` @@ -212,14 +212,14 @@ Vue juga menawarkan `.passive` modifier, sesuai dengan [opsi `addEventListener`' ``` html - +
...
``` `.passive` modifier secara khusus berguna meningkatkan performa pada perangkat mobile. -

Jangan menggunakan `.passive` dan `.prevent` bersamaan, karena `.prevent` akan diabaikan dan browser anda kemungkinan akan menampilkan peringatan. Ingat, `.passive` berkomunikasi dengan broswer yang mana anda tidak ingin mencegah perilaku bawaan event.

+

Jangan menggunakan `.passive` dan `.prevent` bersamaan, karena `.prevent` akan diabaikan dan browser Anda kemungkinan akan menampilkan peringatan. Ingat, `.passive` berkomunikasi dengan broswer yang mana anda tidak ingin mencegah perilaku bawaan event.

## Key Modifier @@ -236,7 +236,7 @@ Anda dapat secara langsung menggunakan nama key yang valid via [`KeyboardEvent.k ``` -Pada contoh di atas, handler hanya akan dipanggail jika `$event.key` sama dengan `'PageDown'`. +Pada contoh di atas, handler hanya akan dipanggil jika `$event.key` sama dengan `'PageDown'`. ### Key Code @@ -260,7 +260,7 @@ Vue menyediakan alias untuk key code umum jika dibutuhkan untuk mendukung browse - `.left` - `.right` -

beberapa kunci (.esc dan semua tombol arah) memiliki nilai key yang tidak konsisten pada peramban IE9, jadi alias yang telah tersedia di atas lebih disarankan jika anda butuh dukungan untuk peramban IE9.

+

Beberapa kunci (.esc dan semua tombol arah) memiliki nilai key yang tidak konsisten pada peramban IE9, jadi alias yang telah tersedia di atas lebih disarankan jika anda butuh dukungan untuk peramban IE9.

Anda juga dapat [mendefinisikan kustom alias key modifier](../api/#keyCodes) melalui global config.keyCodes object: @@ -273,7 +273,7 @@ Vue.config.keyCodes.f1 = 112 > Baru pada versi 2.1.0+ -Anda dapat menggunakan modifier dibawah untuk memicu mouse atau keyboard event listener hanya pada saat modifier tertentu ditekan: +Anda dapat menggunakan modifier di bawah untuk memicu mouse atau keyboard event listener hanya pada saat modifier tertentu ditekan: - `.ctrl` - `.alt` @@ -327,6 +327,6 @@ Anda mungkin menyoroti bahwa keseluruhan pendekatan event listening menyalahi at 1. Mempermudah penempatan implementasi fungsi handler diantara baris kode JS dengan menelusuri sekilas HTML templat. -2. Sejak anda tidak membutuhkan peletakkan event listeners dalam JS secara manual, baris kode ViewModel menjadi berisi murni logika dan bebas DOM. Ini memudahkan dalam pengujian. +2. Sejak Anda tidak membutuhkan peletakkan event listeners dalam JS secara manual, baris kode ViewModel menjadi berisi murni logika dan bebas DOM. Ini memudahkan dalam pengujian. 3. Saat ViewModel dihapus, semua event listener secara otomatis dihapus. Anda tidak perlu khawatir tentang membersihkan event yang ada. \ No newline at end of file From ddefe7fbd61f1f073410a93f3526c585115dbb3e Mon Sep 17 00:00:00 2001 From: Muhammad Irwan Andriawan Date: Thu, 7 Mar 2019 18:59:14 +0700 Subject: [PATCH 3/5] improvement from feedback --- src/v2/guide/events.md | 66 +++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index e996b68e1d..990526a9a9 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -44,7 +44,7 @@ var contoh1 = new Vue({ ## Metode Event Handler -Bagaimanapun baris kode untuk banyak event handler akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam atribut `v-on` tidaklah tepat. Itulah mengapa `v-on` dapat juga menerima nama metode yang ingin dijalankan. +Bagaimanapun Logika untuk banyak _event_ _handler_ akan terlihat rumit, jadi menempatkan kode JavaScript Anda dalam atribut `v-on` tidaklah tepat. Itulah mengapa `v-on` dapat juga menerima nama metode yang ingin dijalankan. Contoh: @@ -102,9 +102,9 @@ var contoh2 = new Vue({ {% endraw %} -## Metode dalam Inline Handler +## Metode dalam Handler Sebaris -Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah inline JavaScript statement: +Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah JavaScript statement sebaris: ``` html
@@ -141,7 +141,7 @@ new Vue({ {% endraw %} -Terkadang kita juga butuh akses ke event DOM bawaan dalam inline statement handler. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode: +Terkadang kita juga butuh akses ke event DOM bawaan dalam statement _handler_ sebaris. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode: ``` html ``` -### Tombol Mouse Modifier +### Pengubah (Modifier) Tombol Mouse > Baru pada versi 2.2.0+ @@ -319,13 +319,13 @@ Contoh: - `.right` - `.middle` -Modifier ini membatasi handler pada event saat dipicu oleh tombol mouse tertentu. +Pengubah ini membatasi _handler_ pada event saat dipicu oleh tombol mouse tertentu. ## Mengapa Listener di dalam HTML? -Anda mungkin menyoroti bahwa keseluruhan pendekatan event listening menyalahi aturan lama tentang "separation of concerns". Kebanyakan meyakini itu - sejak semua fungsi-fungsi dan ekspresi Vue handler terikat secara terbatas pada ViewModel yang mana menangani view yang berhubungan, hal itu tidak akan mempersulit pemeliharaan. Faktanya, terdapat beberapa keuntungan penggunaan `v-on`: +Anda mungkin menyoroti bahwa keseluruhan pendekatan event listening menyalahi aturan lama tentang "separation of concerns". Kebanyakan meyakini itu - sejak semua fungsi-fungsi dan ekspresi Vue _handler_ terikat secara terbatas pada ViewModel yang mana menangani view yang berhubungan, hal itu tidak akan mempersulit pemeliharaan. Faktanya, terdapat beberapa keuntungan penggunaan `v-on`: -1. Mempermudah penempatan implementasi fungsi handler diantara baris kode JS dengan menelusuri sekilas HTML templat. +1. Mempermudah penempatan implementasi fungsi _handler_ diantara baris kode JS dengan menelusuri sekilas HTML templat. 2. Sejak Anda tidak membutuhkan peletakkan event listeners dalam JS secara manual, baris kode ViewModel menjadi berisi murni logika dan bebas DOM. Ini memudahkan dalam pengujian. From 22d64bcd9e20a121a960a483ce9b4b6c6111753a Mon Sep 17 00:00:00 2001 From: Muhammad Irwan Andriawan Date: Thu, 7 Mar 2019 23:00:31 +0700 Subject: [PATCH 4/5] - change word "key" to italic - change word "browser" to "peramban" --- src/v2/guide/events.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 990526a9a9..5ef3e22518 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -223,14 +223,14 @@ pengubah `.passive` secara khusus berguna meningkatkan performa pada perangkat m ## Pengubah (Modifier) Key -Saat memantau keyboard event, kita sering membutuhkan untuk memeriksa key tertentu. Vue mengizinkan penambahan pengubah key untuk `v-on` saat memantau key events: +Saat memantau keyboard event, kita sering membutuhkan untuk memeriksa _key_ tertentu. Vue mengizinkan penambahan pengubah _key_ untuk `v-on` saat memantau _key_ events: ``` html ``` -Anda dapat secara langsung menggunakan nama key yang valid via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) sebagai pengubah dengan mengubahnya ke kebab-case. +Anda dapat secara langsung menggunakan nama _key_ yang valid via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) sebagai pengubah dengan mengubahnya ke kebab-case. ``` html @@ -248,11 +248,11 @@ Menggunakan atribut `keyCode` juga diperbolehkan: ``` -Vue menyediakan alias untuk key code umum jika dibutuhkan untuk mendukung browser lama: +Vue menyediakan alias untuk _key_ code umum jika dibutuhkan untuk mendukung browser lama: - `.enter` - `.tab` -- `.delete` (menangkap baik "Delete" dan "Backspace" key) +- `.delete` (menangkap baik "Delete" dan "Backspace" _key_) - `.esc` - `.space` - `.up` @@ -260,7 +260,7 @@ Vue menyediakan alias untuk key code umum jika dibutuhkan untuk mendukung browse - `.left` - `.right` -

Beberapa kunci (.esc dan semua tombol arah) memiliki nilai key yang tidak konsisten pada browser IE9, jadi alias yang telah tersedia di atas lebih disarankan jika Anda butuh dukungan untuk browser IE9.

+

Beberapa kunci (.esc dan semua tombol arah) memiliki nilai _key_ yang tidak konsisten pada browser IE9, jadi alias yang telah tersedia di atas lebih disarankan jika Anda butuh dukungan untuk browser IE9.

Anda juga dapat [mendefinisikan pengubah kustom alias key](../api/#keyCodes) melalui global config.keyCodes object: @@ -280,7 +280,7 @@ Anda dapat menggunakan pengubah di bawah untuk memicu mouse atau keyboard event - `.shift` - `.meta` -> Note: pada keyboard Macintosh, meta adalah command key (⌘). Pada keyboard Windows, meta adalah Windows key (⊞). Pada keyboard Sun Microsystems, meta ditandai dengan solid diamond (◆). Pada keyboard tertentu, khususnya keyboard mesin MIT and Lisp dan penerusnya, seperti the Knight keyboard, space-cadet keyboard, meta diberi label “META”. Pada keyboard Symbolics, meta diberi label “META” atau “Meta”. +> Note: pada keyboard Macintosh, meta adalah command _key_ (⌘). Pada keyboard Windows, meta adalah Windows _key_ (⊞). Pada keyboard Sun Microsystems, meta ditandai dengan solid diamond (◆). Pada keyboard tertentu, khususnya keyboard mesin MIT and Lisp dan penerusnya, seperti the Knight keyboard, space-cadet keyboard, meta diberi label “META”. Pada keyboard Symbolics, meta diberi label “META” atau “Meta”. Contoh: @@ -292,7 +292,7 @@ Contoh:
Do something
``` -

Perhatikan bahwa modifier key berbeda dengan key pada umumnya dan saat digunakan dengan `keyup` event, key tersebut harus ditekan saat event dijalankan. Dengan kata lain, `keyup.ctrl` hanya akan dipicu ketika Anda melepas key saat masih menekan `ctrl`. Hal tersebut tidak akan dipicu jika Anda melepas `ctrl` key sendiri. Jika Anda tidak ingin perilaku seperti itu, gunakan `keyCode` untuk `ctrl` alih-alih: `keyup.17`.

+

Perhatikan bahwa pengubah _key_ berbeda dengan _key_ pada umumnya dan saat digunakan dengan `keyup` event, _key_ tersebut harus ditekan saat event dijalankan. Dengan kata lain, `keyup.ctrl` hanya akan dipicu ketika Anda melepas _key_ saat masih menekan `ctrl`. Hal tersebut tidak akan dipicu jika Anda melepas `ctrl` _key_ sendiri. Jika Anda tidak ingin perilaku seperti itu, gunakan `keyCode` untuk `ctrl` alih-alih: `keyup.17`.

### Pengubah (Modifier) `.exact` From 84a62948e3aeb67ac1de60659169f117e8c45702 Mon Sep 17 00:00:00 2001 From: Muhammad Irwan Andriawan Date: Thu, 7 Mar 2019 23:12:11 +0700 Subject: [PATCH 5/5] - change word "statement" to statemen - change word "browser" to peramban --- src/v2/guide/events.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 5ef3e22518..fd191ba030 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -104,7 +104,7 @@ var contoh2 = new Vue({ ## Metode dalam Handler Sebaris -Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah JavaScript statement sebaris: +Dari pada menempatkan nama metode secara langsung, kita juga dapat menggunakan metode dalam sebuah JavaScript statemen sebaris: ``` html
@@ -141,7 +141,7 @@ new Vue({ {% endraw %} -Terkadang kita juga butuh akses ke event DOM bawaan dalam statement _handler_ sebaris. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode: +Terkadang kita juga butuh akses ke event DOM bawaan dalam statemen _handler_ sebaris. Anda dapat menempatkan variabel khusus `$event` ke dalam sebuah metode: ``` html