Bläddra i källkod

README.ru.md – translation improvements & typos correction

evgeniyPP 5 år sedan
förälder
incheckning
73e25b65a2
1 ändrade filer med 56 tillägg och 56 borttagningar
  1. 56 56
      README.ru.md

+ 56 - 56
README.ru.md

@@ -4,9 +4,9 @@
 ![npm version](https://img.shields.io/npm/v/alpinejs)
 [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg?sanitize=true)](https://alpinejs.codewithhugo.com/chat/)
 
-Alpine.js предлагает вам реактивность и декларативность таких больших фреймворков, как Vue или React, за значительно меньшую цену.
+Alpine.js предлагает вам реактивность и декларативность таких больших фреймворков, как Vue или React, но за значительно меньшую цену.
 
-Вы сможете использовать свой DOM, при этом изменяя поведение по своему усмотрению.
+Вы сможете использовать обычный DOM, при этом изменяя поведение по своему усмотрению.
 
 Можете думать о Alpine.js как о [Tailwind](https://tailwindcss.com/) для JavaScript.
 
@@ -21,7 +21,7 @@ Alpine.js предлагает вам реактивность и деклара
 
 Вот и всё. Он инициализируется самостоятельно.
 
-Для продакшн-окружения, рекомедуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок от новых версий.
+Для продакшн-окружения, рекомедуется использовать ссылку с конкретным номером версии, чтобы избежать неожиданных поломок после выпуска новых версий.
 Например, чтобы использовать версию `2.3.5`:
 ```html
 <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
@@ -32,31 +32,31 @@ Alpine.js предлагает вам реактивность и деклара
 npm i alpinejs
 ```
 
-Добавьте его в свой скрипт.
+Добавьте его в свой код.
 ```js
 import 'alpinejs'
 ```
 
-**Для поддержки IE11** Используйте вместо следующие `<script>`.
+**Для поддержки IE11** Используйте вместо указанных выше следующие скрипты:
 ```html
 <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
 <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine-ie11.min.js" defer></script>
 ```
 
-Паттерн выше – это [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/), который позволяет в современных браузерах автоматически загружать современный бандл, а в IE11 и других устаревших браузерах – бандл для IE11.
+Паттерн, используемый выше, называется [паттерн module/nomodule](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/). Он позволяет автоматически загружать современный бандл в современных браузерах, а в IE11 и других устаревших браузерах – бандл для IE11.
 
 ## Использование
 
-*Dropdown/Модальное окно*
+*Дропдаун/Модальное окно*
 ```html
 <div x-data="{ open: false }">
-    <button @click="open = true">Открыть dropdown</button>
+    <button @click="open = true">Открыть дропдаун</button>
 
     <ul
         x-show="open"
         @click.away="open = false"
     >
-        Содержимое dropdown
+        Содержимое дропдаун
     </ul>
 </div>
 ```
@@ -72,8 +72,8 @@ import 'alpinejs'
 </div>
 ```
 
-Alpine.js можно даже использовать для более серьезных выражений:
-*Предзагрузка HTML-содержания dropdown при наведении мыши*
+Alpine.js можно использовать и для более серьезных выражений:
+*Предзагрузка HTML-содержания дропдауна при наведении мыши*
 ```html
 <div x-data="{ open: false }">
     <button
@@ -83,7 +83,7 @@ Alpine.js можно даже использовать для более сер
                 .then(html => { $refs.dropdown.innerHTML = html })
         "
         @click="open = true"
-    >Показать dropdown</button>
+    >Показать дропдаун</button>
 
     <div x-ref="dropdown" x-show="open" @click.away="open = false">
         Загрузка...
@@ -93,23 +93,23 @@ Alpine.js можно даже использовать для более сер
 
 ## Изучение
 
-Всего есть 13 директив:
+Всего в Alpine 13 директив:
 
 | Директива | Описание |
 | --- | --- |
-| [`x-data`](#x-data) | Объявляет новый компонент. |
+| [`x-data`](#x-data) | Объявляет новый компонент и его данные. |
 | [`x-init`](#x-init) | Выполняет переданное выражение, когда компонент инициализируется. |
 | [`x-show`](#x-show) | Переключает `display: none;` на элементе, в зависимости от результата переданного выражения (true или false). |
-| [`x-bind`](#x-bind) | Устанавливает значение атрибута на результат переданного JS-выражения |
+| [`x-bind`](#x-bind) | Устанавливает значение атрибута равным результату переданного JS-выражения |
 | [`x-on`](#x-on) | Устанавливает обработчик события на элемент. Когда событие срабатывает, выполняет переданное JS-выражение. |
-| [`x-model`](#x-model) | Добавляет "двустороннюю привязку данных" (two-way data binding) на элемент. Синхронизирует input-элемент и данные компонента. |
-| [`x-text`](#x-text) | Работает аналогично `x-bind`, но обновляет `innerText` элемента. |
-| [`x-html`](#x-html) | Работает аналогично `x-bind`, но обновляет `innerHTML` элемента. |
+| [`x-model`](#x-model) | Добавляет "двустороннюю привязку данных" (two-way data binding) на элемент. Синхронизирует элемент и данные компонента. |
+| [`x-text`](#x-text) | Устанавливает значение `innerText` элемента равным результату переданного JS-выражения. |
+| [`x-html`](#x-html) | Устанавливает значение `innerHTML` элемента равным результату переданного JS-выражения. |
 | [`x-ref`](#x-ref) | Удобный способ получения DOM-элементов вашего компонента. |
 | [`x-if`](#x-if) | При невыполнении переданного условия полностью удаляет элемент из DOM. Должна использоваться в теге `<template>`. |
 | [`x-for`](#x-for) | Создает новые DOM узлы для каждого элемента в массиве. Должна использоваться в теге `<template>`. |
 | [`x-transition`](#x-transition) | Директивы для добавления классов различным стадиям перехода (transition) элемента |
-| [`x-cloak`](#x-cloak) | Этот атрибут удаляется при инициализации Alpine. Полезно для скрытия преинициализированного DOM. |
+| [`x-cloak`](#x-cloak) | Удаляется при инициализации Alpine. Полезна для скрытия DOM до инициализации. |
 
 И 6 волшебных свойств (magic properties):
 
@@ -117,7 +117,7 @@ Alpine.js можно даже использовать для более сер
 | --- | --- |
 | [`$el`](#el) |  Получить DOM-узел корневого компонента. |
 | [`$refs`](#refs) | Получить DOM-элементы компонента, отмеченные `x-ref`. |
-| [`$event`](#event) | В обработчике события получить нативный браузерный объект "Event".  |
+| [`$event`](#event) | В обработчике события получить нативный объект браузера "Event".  |
 | [`$dispatch`](#dispatch) | Создать `CustomEvent` и вызвать его, используя `.dispatchEvent()`. |
 | [`$nextTick`](#nexttick) | Выполнить переданное выражение ПОСЛЕ того, как Alpine сделает реактивное обновление DOM. |
 | [`$watch`](#watch) | Выполнить переданный колбэк, когда наблюдаемое свойство компонента изменится. |
@@ -151,7 +151,7 @@ Alpine.js можно даже использовать для более сер
 
 **Синтаксис:** `<div x-data="[JSON-объект]">...</div>`
 
-`x-data` объявляет новый компонент и область видимости для него, используя переданный объект данных.
+`x-data` объявляет область видимости нового компонента с использованием переданного объекта данных.
 
 Аналогична свойству `data` в компонентах Vue.
 
@@ -180,10 +180,10 @@ Alpine.js можно даже использовать для более сер
 </script>
 ```
 
-> **Для пользователей бандлеров**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (причина этому то, что с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать к области видимости бандлера, а не `window`).
+> **Для пользователей бандлеров**. Alpine.js получает доступ к функциям только из глобальной области видимости (`window`). Вам необходимо явно присвоить свои функции объекту `window`, чтобы использовать их с `x-data`. Например, вот так: `window.dropdown = function () {}` (с Webpack, Rollup, Parcel и другими бандлерами функции, которые вы объявляете, по умолчанию принадлежать области видимости бандлера, а не `window`).
 
 
-Вы также можете объединять несколько объектов данных с помощью деструктуризации объектов:
+Вы также можете объединять несколько объектов с данными с помощью деструктуризации:
 
 ```html
 <div x-data="{...dropdown(), ...tabs()}">
@@ -198,7 +198,7 @@ Alpine.js можно даже использовать для более сер
 
 `x-init` выполняет переданное выражение, когда компонент инициализируется.
 
-Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), вы можете передать `x-init` колбэк, и он выполнит его после:
+Если вы хотите выполнить код ПОСЛЕ первоначальных обновлений DOM Alpine (наподобие хука `mounted()` во VueJS), вы можете передать `x-init` колбэк, и он выполнит его после инициализации:
 
 `x-init="() => { // здесь уже есть доступ к стейту после инициализации DOM // }"`
 
@@ -229,7 +229,7 @@ Alpine.js можно даже использовать для более сер
 | `x-show.transition.opacity` | Использовать только fade. |
 | `x-show.transition.scale` | Использовать только scale. |
 | `x-show.transition.scale.75` | Кастомизация scale перехода `transform: scale(.75)`. |
-| `x-show.transition.duration.200ms` | Устанавливает переход при появлении на 200мс. Переход при исчезновении будет равен половине этого значения (100мс). |
+| `x-show.transition.duration.200ms` | Устанавливает время перехода при появлении на 200мс. Переход при исчезновении будет равен половине этого значения (100мс). |
 | `x-show.transition.origin.top.right` | Кастомизация места возникновения перехода `transform-origin: top right`. |
 | `x-show.transition.in.duration.200ms.out.duration.50ms` | Различные длительности для переходов при появлении и исчезновении. |
 
@@ -245,13 +245,13 @@ Alpine.js можно даже использовать для более сер
 
 ### `x-bind`
 
-> Замечание: Вы вольны использовать сокращенный синтаксис ":". Например: `:type="..."`
+> Сокращенный синтаксис ":". Например: `:type="..."`
 
 **Пример:** `<input x-bind:type="inputType">`
 
 **Синтаксис:** `<input x-bind:[атрибут]="[выражение]">`
 
-`x-bind` устанавливает значение атрибута результату JS-выражения. Выражение имеет доступ ко всем ключам объекта данных компонента и будет обновляться каждый раз при обновлении данных.
+`x-bind` устанавливает значение атрибута равным результату JS-выражения. Выражение имеет доступ ко всем ключам хранилища данных компонента и будет обновляться каждый раз при обновлении данных.
 
 > Замечание: обновление значения атрибута с `x-bind` будет происходить ТОЛЬКО при обновлении его зависимостей.
 
@@ -264,7 +264,7 @@ Alpine.js можно даже использовать для более сер
 Например:
 `<div x-bind:class="{ 'hidden': foo }"></div>`
 
-В этом примере, касс "hidden" будет применен только если значение выражения `foo` равно `true`.
+В этом примере, класс "hidden" будет применен только если значение выражения `foo` равно `true`.
 
 **`x-bind` для логических атрибутов**
 
@@ -290,13 +290,13 @@ Alpine.js можно даже использовать для более сер
 
 ### `x-on`
 
-> Замечание: Можно также использовать сокращенный синтаксис "@": `@click="..."`
+> Сокращенный синтаксис "@": `@click="..."`
 
 **Пример:** `<button x-on:click="foo = 'bar'"></button>`
 
 **Синтаксис:** `<button x-on:[событие]="[выражение]"></button>`
 
-`x-on` цепляет event listener на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение.
+`x-on` цепляет прослушиватель события на элемент, на котором был объявлен. Когда событие срабатывает, выполняется переданное JS-выражение.
 
 Если в этом выражении меняются какие-либо данные, другие элементы, "привязанные" к этим данным, будут обновлены.
 
@@ -304,51 +304,51 @@ Alpine.js можно даже использовать для более сер
 
 **Пример:** `<input type="text" x-on:keydown.escape="open = false">`
 
-Можно обозначить конкретные клавиши для прослушивания, присоединяя их через точку к директиве `x-on:keydown`. Такие модификаторы – это значения `Event.key`, записанные в kebab-стиле.
+Можно обозначить конкретные клавиши для прослушивания, присоединяя их через точку к директиве `x-on:keydown`. Модификаторы – это значения `Event.key`, записанные в kebab-стиле.
 
 Например: `enter`, `escape`, `arrow-up`, `arrow-down`
 
-> Замечание: Можно также прослушивать комбинации с системными клавишами, такие как: `x-on:keydown.cmd.enter="foo"`
+> Замечание: Можно также прослушивать комбинации с системными клавишами, например: `x-on:keydown.cmd.enter="foo"`
 
 **Модификатор `.away`**
 
 **Пример:** `<div x-on:click.away="showModal = false"></div>`
 
-С модификатором `.away`, обработчик события будет выполнен, только когда событие произошло на другом источнике, не на этом элементе или его потомках.
+При добавлении модификатора `.away` обработчик события сработает, только когда событие произошло на другом источнике, а не на этом элементе или его потомках.
 
-Это полезно для скрытия dropdown или модальных окон, когда пользователь кликает в другом месте.
+Это полезно для скрытия дропдаунов или модальных окон, когда пользователь кликает в другом месте.
 
 **Модификатор `.prevent`**
 
 **Пример:** `<input type="checkbox" x-on:click.prevent>`
 
-При добавлении `.prevent` event listener вызовет `preventDefault` на сработавшем событии. В примере выше это приведет к тому, что чекбокс не будет отмечен при нажатии на него.
+При добавлении `.prevent` обработчик вызовет `preventDefault` на сработавшем событии. В примере выше это приведет к тому, что чекбокс не будет отмечен при нажатии на него.
 
 **Модификатор `.stop`**
 
 **Пример:** `<div x-on:click="foo = 'bar'"><button x-on:click.stop></button></div>`
 
-При добавлении `.stop` event listener вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`.
+При добавлении `.stop` обработчик вызовет `stopPropagation` на сработавшем событии. В примере выше это приведет к тому, что событие "click" не всплывет от кнопки внешнему `<div>`. Другими словами, когда пользователь нажимает на кнопку, `foo` не устанавливается в `'bar'`.
 
 **Модификатор `.self`**
 
 **Пример:** `<div x-on:click.self="foo = 'bar'"><button></button></div>`
 
-При добавлении `.self` event listener вызовет обработчик, если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки внешнему `<div>`, **не** вызовет обработчик.
+При добавлении `.self` обработчик события сработает, только если `$event.target` – это сам элемент. В примере выше это приведет к тому, что событие "click", всплыв от кнопки внешнему `<div>`, **не** вызовет обработчик.
 
 **Модификатор `.window`**
 
 **Пример:** `<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>`
 
-При добавлении `.window` event listener установить прослушиватель на глобальный объект window, вместе узла DOM, на котором был вызван. Это полезно, когда нужно изменить состояние компонента при изменение чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, мы закроем модальное окно/dropdown, иначе сохраним то же состояние.
+При добавлении `.window` прослушиватель события установится не на узел DOM, на котором был вызван, а на глобальный объект window. Это полезно, когда нужно изменить состояние компонента при изменении чего-либо в window, например, при событии "resize". В примере выше, когда ширина окна будет больше 768 пикселей, мы закроем модальное окно/дропдаун, иначе сохраним то же состояние.
 
->Замечание: Также можно использовать модификатор `.document` для добавления прослушивателей к `document` вместо `window`.
+>Замечание: Также можно использовать модификатор `.document` для добавления прослушивателей к `document`.
 
 **Модификатор `.once`**
 
 **Пример:** `<button x-on:mouseenter.once="fetchSomething()"></button>`
 
-При добавлении `.once` event listener будет вызван лишь единожды. Это полезно для вещей, которые вы хотите сделать только один раз, например, загрузка данных и т.п.
+При добавлении `.once` обработчик события будет вызван лишь единожды. Это полезно для вещей, которые вы хотите сделать только один раз, например, загрузка данных и т.п.
 
 **Модификатор `.debounce`**
 
@@ -358,7 +358,7 @@ Alpine.js можно даже использовать для более сер
 
 Время ожидания по умолчанию 250 миллисекунд.
 
-Для его изменения, вы можете указать свое время вот так:
+Вы также можете указать свое время:
 
 ```
 <input x-on:input.debounce.750="fetchSomething()">
@@ -372,9 +372,9 @@ Alpine.js можно даже использовать для более сер
 
 **Синтаксис:** `<input type="text" x-model="[хранилище данных]">`
 
-`x-model` добавляет элементу "двустороннюю привязку данных" (two-way data binding). Другими словами, значение инпута будет синхронизировано со значением в хранилище данных компонента.
+`x-model` добавляет элементу "двустороннюю привязку данных" (two-way data binding). Другими словами, значение поля ввода будет синхронизировано со значением в хранилище данных компонента.
 
-> Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых инпутах, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://vuejs.org/v2/guide/forms.html).
+> Замечание: `x-model` достаточно умен, чтобы замечать изменения в текстовых полях ввода, чекбоксах, радио-кнопках, textarea, select, и множественных select. В данных сценариях `x-model` ведет себя аналогично `v-model` [во Vue](https://vuejs.org/v2/guide/forms.html).
 
 **Модификатор `.debounce`**
 
@@ -384,7 +384,7 @@ Alpine.js можно даже использовать для более сер
 
 Время ожидания по умолчанию 250 миллисекунд.
 
-Для его изменения, вы можете указать свое время вот так:
+Вы также можете указать свое время:
 
 ```
 <input x-model.debounce.750="search">
@@ -398,7 +398,7 @@ Alpine.js можно даже использовать для более сер
 
 **Синтаксис:** `<span x-text="[выражение]"`
 
-`x-text` работает аналогично `x-bind`, за исключение того, что вместо обновления значения атрибута он обновляет `innerText` элемента.
+`x-text` устанавливает значение `innerText` элемента равным результату переданного JS-выражения. Другими словами, работает аналогично `x-bind`, но не для атрибута, а для `innerText` элемента.
 
 ---
 
@@ -407,7 +407,7 @@ Alpine.js можно даже использовать для более сер
 
 **Синтаксис:** `<span x-html="[выражение]"`
 
-`x-html` работает аналогично `x-bind`, за исключение того, что вместо обновления значения атрибута он обновляет `innerHTML` элемента.
+`x-html` устанавливает значение `innerHTML` элемента равным результату переданного JS-выражения. Другими словами, работает аналогично `x-bind`, но не для атрибута, а для `innerHTML` элемента.
 
 > :warning: **Используйте только надежные источники контента и никогда не используйте контент, предоставленный пользователем.** :warning:
 >
@@ -418,7 +418,7 @@ Alpine.js можно даже использовать для более сер
 ### `x-ref`
 **Пример:** `<div x-ref="foo"></div><button x-on:click="$refs.foo.innerText = 'bar'"></button>`
 
-**Синтаксис:** `<div x-ref="[имя ref]"></div><button x-on:click="$refs.[имя ref].innerText = 'bar'"></button>`
+**Синтаксис:** `<div x-ref="[имя рефа]"></div><button x-on:click="$refs.[имя рефа].innerText = 'bar'"></button>`
 
 `x-ref` предоставляет удобный способ получения DOM-элементов ваших компонентов. При установлении атрибута `x-ref` на элемент, вы делаете его доступным всем обработчикам событий в объекте `$refs`.
 
@@ -435,7 +435,7 @@ Alpine.js можно даже использовать для более сер
 
 В случаях, когда `x-show` недостаточно (`x-show` устанавливает элементу `display: none`, если выражение ложно), можно использовать `x-if`, чтобы полностью удалить элемент из DOM.
 
-Важно, чтобы `x-if` использовался в теге `<template></template>`, так как Alpine не использует Virtual DOM. Данная реализация позволяет Alpine использовать реальный DOM для выполнения своей магии.
+Alpine не использует Virtual DOM, поэтому важно, чтобы `x-if` использовался в теге `<template></template>`.
 
 > Замечание: Внутри тега `<template></template>` с `x-if` должен быть лишь один корневой элемент.
 
@@ -449,7 +449,7 @@ Alpine.js можно даже использовать для более сер
 </template>
 ```
 
-> Замечание: привязка `:key` опционально, хотя КРАЙНЕ рекомендуется.
+> Замечание: привязка `:key` опциональна, хотя КРАЙНЕ рекомендуется.
 
 `x-for` используется для создания новых DOM-узлов для каждого элемента в массиве. `x-for` похоже на `v-for` во Vue, с одним отличием: `x-for` может использовался только в теге `<template></template>`.
 
@@ -510,7 +510,7 @@ Alpine.js можно даже использовать для более сер
 
 Alpine предлагает 6 разных transition-директив для добавления классов к различным стадиям перехода элемента от состояния "скрытого" к "видимому". Все эти директивы работают как с `x-show`, так и с `x-if`.
 
-Они ведут себя абсолютно также как transition-директивы во Vue, не считая того, что у них другие, более понятные названия:
+Они ведут себя абсолютно так же, как transition-директивы во Vue, не считая того, что у них другие, более понятные названия:
 
 | Директива | Описание |
 | --- | --- |
@@ -526,7 +526,7 @@ Alpine предлагает 6 разных transition-директив для д
 ### `x-cloak`
 **Пример:** `<div x-data="{}" x-cloak></div>`
 
-`x-cloak` атрибуты удаляются с элементов, когда Alpine проинициализирован. Это полезно для скрытия еще не проинициализированного DOM. Обычной практикой является добавления следующих глобальных стилей для того, чтобы это работало:
+`x-cloak` атрибуты удаляются с элементов, когда Alpine проинициализирован. Это полезно для скрытия DOM до его инициализации. Для этого необходимо добавить следующие глобальные стили:
 
 ```html
 <style>
@@ -579,7 +579,7 @@ Alpine предлагает 6 разных transition-директив для д
 </div>
 ```
 
-`$dispatch` – это сокращение для создания `CustomEvent` и его вызова, используя внутри `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы узнать больше о системе, лежащей в основе `CustomEvent` в браузерах.
+`$dispatch` – это сокращение для создания `CustomEvent` и его вызова (диспатча) с помощью `.dispatchEvent()`. Существует множество сценариев использования передачи данных между компонентами с помощью пользовательских событий. [Пройдите по этой ссылке](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events), чтобы узнать больше о системе, лежащей в основе `CustomEvent` в браузерах.
 
 Любые данные, переданные как второй параметр в `$dispatch('some-event', { some: 'data' })`, становятся доступны через свойство "detail" события: `$event.detail.some`. Добавление событию пользовательских данных через свойство `.detail` – стандартная практика для `CustomEvent` в браузерах. [Подробнее здесь](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
 
@@ -599,10 +599,10 @@ Alpine предлагает 6 разных transition-директив для д
 ### `$nextTick`
 **Пример:**
 ```html
-<div x-data="{ fruit: 'apple' }">
+<div x-data="{ fruit: 'яблоко' }">
     <button
         x-on:click="
-            fruit = 'pear';
+            fruit = 'груша';
             $nextTick(() => { console.log($event.target.innerText) });
         "
         x-text="fruit"
@@ -622,12 +622,12 @@ Alpine предлагает 6 разных transition-директив для д
 </div>
 ```
 
-Магический метод `$watch` позволяет следить за свойством компонента. В примере выше при нажатии на кнопку `open` изменится, переданный в `$watch` колбэк выполнится, выведя в консоль новое значение.
+Магический метод `$watch` позволяет следить за выбранным свойством компонента. В примере выше при нажатии на кнопку: 1) значение `open` изменится; 2) выполнится переданный в `$watch` колбэк; 3) в консоль выведется новое значение.
 
 ## Безопасность
 Если вы нашли уязвимость, пожалуйста, отправьте письмо на [calebporzio@gmail.com]()
 
-Alpine полагается на собственную реализацию, которая использует объект `Function` для оценки своих директив. Несмотря на то, что он безопаснее, чем `eval()`, его использование запрещено в некоторых средах, таких как Google Chrome App, использующих Политику защиты контента (CSP).
+Alpine полагается на собственную реализацию, которая использует объект `Function` для оценки своих директив. Несмотря на то, что он безопаснее, чем `eval()`, его использование запрещено в некоторых средах, таких как Google Chrome App, т.е. использующих Политику защиты контента (CSP).
 
 Если вы используете Alpine на веб-сайте, имеющем дело с конфиденциальными данными и требующим [CSP](https://csp.withgoogle.com/docs/strict-csp.html), вы должны включить `unsafe-eval` в свою политику. Правильно настроенная политика поможет защитить ваших пользователей при использовании их личных или финансовых данных.