Привязки (Bindings)

Author: rustkas

examples/README.md

@@ -4,4 +4,5 @@
 2. [Компонент и его структура.](projects/video02)
 3. [Жизненный цикл компонента.](projects/video03)
 4. [Синтаксис HTML шаблонов.](projects/video04)
-5. [События и обработка событий](projects/video05)
+5. [События и обработка событий](projects/video05)
+6. [Привязки (Bindings)](projects/video06)

examples/projects/video02/code/svelte-todo-04/README.md

@@ -1 +1,3 @@
+# Свойства по умолчанию
+
 1. Проверили, как работает свойство по умолчанию на примере свойства `title` компонента `AddTodoItem`.

examples/projects/video02/code/svelte-todo-05/README.md

@@ -1,2 +1,4 @@
+# Работа с полями
+
 1. Пример использования вычисляемого поля.
 2. Примеры использования свойств.

examples/projects/video03/code/svelte-todo-01/README.md

@@ -1,4 +1,6 @@
-1. Демострация использование функции onMount.
+# `onMount`
+
+1. Демострация использование функции `onMount`.
 2. Реализация счётчкика без утечки памяти.
 
 

examples/projects/video05/README.md

@@ -3,7 +3,6 @@
 [![Как работать с событиями в Svelte? video](https://img.youtube.com/vi/f1i-9RdxDCc/0.jpg)](https://youtu.be/f1i-9RdxDCc "Как работать с событиями в Svelte?")
 
 В этом уроке по Svelte рассматриваем работу с событиями в Svelte, а именно директиву `on`, модификаторы событий, переброс событий, `createEventDispatcher` и т.д.
-https://youtu.be/
 
 ## Команда запуска приложения
 `npm run dev`

examples/projects/video05/code/svelte-todo-05/src/App.svelte

@@ -38,7 +38,4 @@
 	margin-top: 5px;
 	margin-bottom: 5px;
 }
-
-
-
 </style>

examples/projects/video06/README.md

@@ -0,0 +1,20 @@
+# Привязки (Bindings)
+
+[![Байндинги и Привязки - Svelte Bindings video](https://img.youtube.com/vi/hHAszJgyUMc/0.jpg)](https://youtu.be/hHAszJgyUMc "Байндинги и Привязки - Svelte Bindings")
+
+В этом уроке рассмотрим привязки в Svelte, синтаксис и директиву `bind`:, привязки к компонентам и т.д.
+
+## Команда запуска приложения
+`npm run dev`
+
+## Адрес приложения
+`http://localhost:5000/`
+
+## Примеры
+
+1. [Пример №1](code/svelte-todo-01)
+2. [Пример №2](code/svelte-todo-02)
+3. [Пример №3](code/svelte-todo-03)
+4. [Пример №4](code/svelte-todo-04)
+5. [Пример №5](code/svelte-todo-05)
+6. [Пример №6](code/svelte-todo-06)

examples/projects/video06/code/svelte-todo-01/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

examples/projects/video06/code/svelte-todo-01/README.md

@@ -0,0 +1,11 @@
+# Изменения свойств компонентов с пощью `bind`
+
+- Дочерние компоненты настраиваются родительскими компонентами.
+- Родительские компоненты меняют свой свойсва с помощью событий в дочерних компонентах.
+- `bind` - это изменение свойств с помощью событий с меньшим количеством кода. Изменения 
+будут работать, как в дочерних, так и в родительских компонентах.
+
+- Добавляем `bind` в компонент `Form` в элемент `input`.
+
+
+

examples/projects/video06/code/svelte-todo-01/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0",
+    "uuid": "^8.3.2"
+  }
+}