Update events.md #11

SmartXXI · 2020-09-17T16:09:11Z

Note

We're currently in the process of migrating Vue's documentation to v3. To ensure smooth progress, only PR's that fix critical bugs and/or misinformation will be accepted. If yours is not one of them, consider creating an issue instead and we will label it as post-3.0 for later tackling.

matrunchyk · 2020-09-17T16:10:27Z

src/v2/guide/events.md

@@ -4,18 +4,19 @@ type: guide
 order: 9
 ---

-<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to handle events on Vue School">Learn how to handle events in a free Vue School lesson</a></div>
+<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs" target="_blank" rel="sponsored noopener" title="Дізнайся, як обробляти події на безкоштовному уроці Vue School">Дізнайся, як обробляти події на безкоштовному уроці Vue School</a></div>


Ми скрізь вживаємо "Дізнайтеся"

matrunchyk · 2020-09-17T16:11:09Z

src/v2/guide/events.md


-## Listening to Events
+## Прослуховування подій

 We can use the `v-on` directive to listen to DOM events and run some JavaScript when they're triggered.


Прохання видалити оригінал тут, та нижче

matrunchyk · 2020-09-17T16:14:12Z

src/v2/guide/events.md


-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.
+Однак логіка для багатьох обробників подій буде більш складною, тому записати ваш JavaScript у значення атрибута `v-on` неможливе. Ось чому v-on також може прийняти назву методу, який ви хочете викликати.


Відсутня кома після "однак"

Насправді, це можливо, але так робити не варто. Я б переклав як

.... тому зберігати JavaScript-код в якості значення атрибута v-on не підходить. Ось чому ... може ПРИЙМАТИ ....

matrunchyk · 2020-09-17T16:20:42Z

src/v2/guide/events.md


-For example:
+На приклад:


"Наприклад:" - разом. Або ж виправити на "Спробуємо на прикладі:"

matrunchyk · 2020-09-17T16:21:12Z

src/v2/guide/events.md


 ``` html
 <div id="example-2">
-  <!-- `greet` is the name of a method defined below -->
-  <button v-on:click="greet">Greet</button>
+  <!-- `greet` є ім'ям методу визначеного нижче -->


після "методу" відсутня кома

matrunchyk · 2020-09-17T16:21:35Z

src/v2/guide/events.md

-  <!-- `greet` is the name of a method defined below -->
-  <button v-on:click="greet">Greet</button>
+  <!-- `greet` є ім'ям методу визначеного нижче -->
+  <button v-on:click="greet">Чудово</button>


Greet - Привітати
Great - Чудово

matrunchyk · 2020-09-17T16:23:20Z

src/v2/guide/events.md

  },
-  // define methods under the `methods` object
+  // визначити метод в об'єкті "методи"


визначити метод в об'єкті методів
або
визначити метод в об'єкті "methods"

matrunchyk · 2020-09-17T16:24:07Z

src/v2/guide/events.md


 {% raw %}
 <div id="example-2" class="demo">
-  <button v-on:click="greet">Greet</button>
+  <button v-on:click="greet">Чудово</button>


Привітати

matrunchyk · 2020-09-17T16:34:22Z

src/v2/guide/events.md

-  <button v-on:click="say('hi')">Say hi</button>
-  <button v-on:click="say('what')">Say what</button>
+  <button v-on:click="say('Привіт')">Скажи привіт</button>
+  <button v-on:click="say('Що')">Скажи що</button>


"Say hi"
"Say what"
→
"Сказати привіт"
"Сказати що?"

matrunchyk · 2020-09-17T16:35:44Z

src/v2/guide/events.md

 </div>
 ```

 ``` js
 var example2 = new Vue({
  el: '#example-2',
  data: {
-    name: 'Vue.js'
+    name: 'Vue.js',


Ми не можемо міняти форматування коду, можемо робити лише переклад

matrunchyk · 2020-09-17T16:38:53Z

src/v2/guide/events.md

-      // `this` inside methods points to the Vue instance
-      alert('Hello ' + this.name + '!')
-      // `event` is the native DOM event
+    greet(event) {


Ми не можемо міняти форматування коду і переводити його на es6. Він навмисно був написаний в es5 режимі. Прохання повернути форматований та переведений на es6 код назад на оригінальний

matrunchyk · 2020-09-17T16:39:23Z

src/v2/guide/events.md

  }
 }
 ```

-## Event Modifiers
+## Модифікатори подій

 It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.


залишки оригіналу

matrunchyk · 2020-09-17T16:41:06Z

src/v2/guide/events.md

-To address this problem, Vue provides **event modifiers** for `v-on`. Recall that modifiers are directive postfixes denoted by a dot.
+Часто є необхідність викликати `event.preventDefault()` або `event.stopPropagation()` всередині обробників подій. Незважаючи на те, що ми можемо зробити це легко всередині методів, було б краще, якщо б методи використовували виключно логіку даних, а не мали справу з деталями подій DOM.
+
+Для вирішення цієї проблеми Vue надає **модифікатори подій** для `v-on`. Нагадаємо, що модифікатори - це директивні постфікси, позначені крапкою.


директивні постфікси, розділені крапкою

matrunchyk · 2020-09-17T16:42:24Z

src/v2/guide/events.md

 <a v-on:click.once="doThis"></a>
 ```

-Unlike the other modifiers, which are exclusive to native DOM events, the `.once` modifier can also be used on [component events](components-custom-events.html). If you haven't read about components yet, don't worry about this for now.
+На відміну від інших модифікаторів, які є лише для власних подій DOM, модифікатор `.once` також може використовуватися на [компонентах подій] (components-custom-events.html). Якщо ви ще не читали про компоненти, наразі не хвилюйтеся про це.


лишній пробіл перед відкриваючою круглою дужкою

пропоную перекласти "компонентах подій" на "спеціальні події", оскільки ця фраза містить посилання на одноіменний розділ https://vuejs.org.ua/v2/guide/components-custom-events.html

matrunchyk · 2020-09-17T16:45:53Z

src/v2/guide/events.md

 <input v-on:keyup.enter="submit">
 ```

-You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
+Ви можете безпосередньо використовувати будь-які дійсні імена ключів, визначені у [`ПодіїКлавіатури.клавіші`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) як модифікатори перевівши їх у kebab-case.


KeyboardEvent.key не вимагає перекладу, оскільки це існуюче ім'я об'єкту

matrunchyk · 2020-09-17T16:46:38Z

src/v2/guide/events.md


 - `.enter`
 - `.tab`
- `.delete` (captures both "Delete" and "Backspace" keys)
+- `.delete` (перехоплює як клавіші "Delete" так і "Backspace")


перед "так" відсутня кома

matrunchyk · 2020-09-17T16:48:30Z

src/v2/guide/events.md


-### `.exact` Modifier
+### `.exact` Модифікатор


.exact модифікатор

або

Модифікатор .exact

matrunchyk · 2020-09-17T16:49:07Z

src/v2/guide/events.md

 <button v-on:click.exact="onClick">A</button>
 ```

-### Mouse Button Modifiers
+### Модифікатори клафіш миші


клавіш

matrunchyk · 2020-09-17T16:49:41Z

src/v2/guide/events.md


-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`:
+Ви можете бути стурбовані тим, що весь цей підхід до прослуховування подій порушує старі добрі правила щодо "відокремлення проблем". Будьте впевнені - оскільки всі функції та вирази обробника Vue суворо пов’язані з ViewModel, який обробляє поточний вигляд, це не спричинить труднощів з технічним обслуговуванням. Насправді використання "v-on" має кілька переваг:


Після "Насправді" відсутня кома

matrunchyk · 2020-09-17T16:52:43Z

src/v2/guide/events.md


-1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template.
+1. Простіше знайти реалізації функції обробника в коді JS, обробивши шаблон HTML.


Не дуже зрозумілий переклад. Як щодо

Простіше знайти функцію-обробник події у вашому JS коді простим переглядом HTML шаблону.

matrunchyk

Please see the comments above

matrunchyk · 2020-09-22T14:28:12Z

Fixes #9

Update events.md

3689b31

matrunchyk reviewed Sep 17, 2020

View reviewed changes

matrunchyk requested changes Sep 17, 2020

View reviewed changes

Update events.md

c1212ae

matrunchyk approved these changes Sep 21, 2020

View reviewed changes

Merge branch 'master' into SmartXXI-patch-2

062ea9f

matrunchyk merged commit 756428c into master Sep 21, 2020

matrunchyk deleted the SmartXXI-patch-2 branch September 21, 2020 10:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update events.md #11

Update events.md #11

SmartXXI commented Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020 •

edited

Loading

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020 •

edited

Loading

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020 •

edited

Loading

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk Sep 17, 2020

matrunchyk left a comment

matrunchyk commented Sep 22, 2020


		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.
		Однак логіка для багатьох обробників подій буде більш складною, тому записати ваш JavaScript у значення атрибута `v-on` неможливе. Ось чому v-on також може прийняти назву методу, який ви хочете викликати.


		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`:
		Ви можете бути стурбовані тим, що весь цей підхід до прослуховування подій порушує старі добрі правила щодо "відокремлення проблем". Будьте впевнені - оскільки всі функції та вирази обробника Vue суворо пов’язані з ViewModel, який обробляє поточний вигляд, це не спричинить труднощів з технічним обслуговуванням. Насправді використання "v-on" має кілька переваг:


		1. It's easier to locate the handler function implementations within your JS code by skimming the HTML template.
		1. Простіше знайти реалізації функції обробника в коді JS, обробивши шаблон HTML.


		For example:
		На приклад:

Update events.md #11

Update events.md #11

Conversation

SmartXXI commented Sep 17, 2020

Note

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matrunchyk Sep 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matrunchyk Sep 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matrunchyk Sep 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matrunchyk left a comment

Choose a reason for hiding this comment

matrunchyk commented Sep 22, 2020

matrunchyk Sep 17, 2020 •

edited

Loading

matrunchyk Sep 17, 2020 •

edited

Loading

matrunchyk Sep 17, 2020 •

edited

Loading