Скачать "Vue.js Tutorial: Beginner to Front-End Developer"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F1GNsWa_EZdw%252Fmaxresdefault.webp&w=1139&q=75)
Подождите немного, мы готовим ссылки для удобного просмотра видео без рекламы и его скачивания.
Оглавление
Похожие ролики из нашего каталога
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FB6oRm_eDtew%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FTYO5cpAZSCE%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252FXzLuMtDelGk%252Fmaxresdefault.jpg&w=1139&q=75)
Теги видео
Субтитры
Английский
00:00:04
[Музыка]00:00:07
Спасибо00:00:09
UI Frameworks кардинально изменились00:00:12
как мы пишем веб-приложения00:00:14
и я понимаю, что существует много фреймворков00:00:16
выбирать и выбирать гораздо меньше00:00:19
начать с этого может быть сложно00:00:21
ну, позволь мне сделать это немного проще для00:00:23
пока ты реагируешь, у тебя есть преимущество имени00:00:25
признание, что существуют другие фреймворки00:00:28
это, по моему скромному мнению, имеет большое значение00:00:30
лучшая работа, например, vue.js00:00:33
чрезвычайно доступен, если вы уже00:00:35
немного знать HTML, CSS и JavaScript00:00:38
его набор функций легче понять00:00:40
и использовать его очень-очень быстро, и это00:00:44
растущее сообщество готово присоединиться00:00:46
и помогите, если у вас есть какие-либо вопросы, привет, я00:00:49
Я Джереми МакПик, и я хотел бы преподавать00:00:52
ты все, что тебе нужно получить00:00:53
начали с vue.js, мы начнем с00:00:56
самое начало, и я научу тебя00:00:58
основы, используя только библиотеку View00:01:01
не требуются инструменты сборки или цепочки инструментов00:01:04
вы научитесь создавать приложения00:01:06
Определите и используйте параметры и организуйте свои00:01:08
приложения на меньшие более00:01:10
поддерживаемые части, называемые компонентами00:01:13
но тогда мы перейдем к инструменту00:01:16
цепочка, потому что это заставляет работать над более крупными00:01:18
проекты станут проще, вы научитесь загружать00:01:21
и работать с реактивными данными, как00:01:23
обрабатывать ввод пользователя и создавать собственные00:01:25
события, которые вы можете использовать в своих00:01:27
приложения, я также научу вас, как00:01:29
манипулировать стилем, создавать вычисляемые00:01:32
свойства и определить объекты, которые наблюдают00:01:35
ваши данные для изменений, чтобы вы могли00:01:37
реагировать на эти изменения, вы узнаете, как00:01:39
создавать одностраничные приложения с использованием00:01:42
маршрутизатор просмотра и как его использовать00:01:44
API композиции для улучшения00:01:46
ремонтопригодность у нас есть много оснований00:01:49
чтобы прикрыть, поэтому, когда будете готовы, встаньте в очередь00:01:51
первое видео и мы начнем00:01:53
но сначала, если вы хотите создать00:01:56
профессиональный веб-сайт или вы хотите добавить00:01:58
функции, которые сделают ваш сайт выдающимся00:02:00
затем отправляйтесь в codecanyon00:02:03
рынок высококачественного JavaScript00:02:05
и компоненты PHP HTML5 и мобильные устройства00:02:08
шаблоны и многое другое, что можно найти на00:02:12
код Canyon поможет вам легко добавить00:02:14
функциональность и потрясающая графика00:02:16
что вам необходимо удовлетворить потребности вашего бизнеса00:02:17
целей, вы найдете огромную библиотеку, которая00:02:20
содержит тысячи JavaScript и PHP00:02:22
компоненты и почти 20 000 HTML и00:02:26
мобильные шаблоны, разумеется, вы00:02:28
найди то, что ты ищешь, чтобы взять с собой00:02:29
ваш сайт на новый уровень00:02:32
есть две вещи, которые я хочу сделать00:02:34
коснитесь сначала, это ваш редактор кода сейчас00:02:37
технически мы работаем с текстом и00:02:40
мы можем использовать любой текстовый редактор, чтобы сделать00:02:42
работа, которую нам нужно сделать, несмотря на текст00:02:45
мы работаем с кодом и00:02:47
редакторы кода имеют функции, которые делают его00:02:49
проще работать с кодом, поэтому я рекомендую00:02:52
с помощью редактора кода существует множество бесплатных00:02:55
и многие из них несвободны, так что не стесняйтесь00:02:58
использовать тот, который вы есть00:03:00
комфортно, лично я использую Visual00:03:02
Код студии, потому что он бесплатный, он также00:03:05
кроссплатформенный, и это также лучший00:03:08
редактор кода для JavaScript, но опять же00:03:11
не стесняйтесь использовать любой редактор кода00:03:13
что тебе комфортно со вторым00:03:15
дело в том, что инструменты разработчика теперь представляют собой эти00:03:19
это инструменты, которые вы устанавливаете в00:03:21
браузере они используются для отладки и00:03:24
ты увидишь, как я использую их на протяжении всего этого00:03:26
конечно, на самом деле, если вы посмотрите в верхнем00:03:28
правый угол браузера, вы можете00:03:31
вижу, что они у меня уже установлены00:03:33
это значок вида здесь и я00:03:37
рекомендую вам установить это также00:03:39
конечно Firefox Chrome и ну00:03:42
все остальное основано на Chrome, поэтому00:03:44
все браузеры поддерживаются00:03:47
инструменты разработки, поэтому я еще раз рекомендую это00:03:50
вы устанавливаете их, потому что они очень00:03:53
полезно, так как я уже говорил, что это очень просто00:03:55
чтобы приступить к работе с View, поэтому, если мы00:03:58
зайдите на viewjs.org, давайте перейдем к быстрому00:04:01
начни и там будет раздел00:04:03
сейчас вызывается без инструментов сборки, да00:04:06
в конце концов мы перейдем к сборке00:04:08
инструменты, потому что это просто делает наши00:04:11
живет немного легче, но правильно00:04:12
теперь перейдем к разделу без00:04:15
создайте инструменты и давайте сначала скопируем это00:04:18
строка. Это использование CDN, вот что00:04:21
мы собираемся это сделать, давай перейдем00:04:23
в наш редактор кода давайте создадим новый00:04:25
файл, который я собираюсь вызвать00:04:28
index.html и, насколько заголовок00:04:31
обеспокоен, давайте просто назовем это мнение00:04:33
Основы, а затем давайте вставим это00:04:36
элемент сценария, давайте также продолжим и00:04:39
вставьте CDN для начальной загрузки просто так00:04:43
что у нас есть вещи, которые не используют00:04:45
таблица стилей по умолчанию, и начнем с00:04:49
просто некоторый контент, который мы собираемся00:04:52
жесткий код на эту страницу и, в конечном итоге,00:04:54
мы собираемся использовать представление для генерации00:04:56
этот контент для нас, поэтому мы начнем с00:04:59
H1 — это заголовок нашей страницы, поэтому00:05:02
давай просто поздороваемся. Просмотр, а потом мы00:05:05
будет некоторый контент, например, приветствие00:05:08
в чудесный мир зрения, а затем00:05:11
давайте откроем это в браузере, мы можем00:05:13
просто дважды щелкните значок, которого нет00:05:15
выполнение каких-либо HTTP-запросов или чего-либо еще00:05:17
вот так, так что все будет хорошо00:05:19
и начнем, это здорово, как бы я ни был00:05:23
хочу добавить сюда немного стиля, так что давайте00:05:26
на самом деле оберните это в div с помощью00:05:29
класс контейнера, чтобы мы могли использовать00:05:33
загрузите там, и когда мы обновимся, все в порядке00:05:36
это перенесли, но это нормально, так что00:05:38
мы хотим использовать представление, чтобы00:05:41
по сути, предоставляйте тот же контент00:05:44
и мы можем сделать это, добавив скрипт00:05:46
элемент в нижней части нашего тела00:05:48
потому что мы хотим, чтобы это выполнилось после00:05:50
все остальное загрузилось и мы00:05:52
собираемся создать приложение View00:05:54
с помощью объекта представления это дается00:05:57
нам от библиотеки View, и у нас есть00:06:01
метод под названием «Создать приложение» теперь я сказал, что00:06:03
это создание приложения, которое00:06:05
здравствуйте, это называется создать приложение, но это00:06:08
также создает то, что мы обычно называем A00:06:11
Посмотреть экземпляр и один из действительно крутых00:06:13
Что касается представления, так это то, что мы можем иметь00:06:15
несколько экземпляров представления в одном00:06:18
веб-страница, которую мы будем00:06:19
посмотрим на следующем уроке, но правильно00:06:22
сейчас мы будем работать только с одним00:06:24
небольшое приложение, и мы хотим смонтировать00:06:27
это где-то на нашей веб-странице и00:06:30
мы делаем это с помощью метода монтирования, а затем00:06:32
мы указываем элемент HTML, в котором мы00:06:35
хотим установить это, и мы хотим это сделать00:06:38
смонтируйте это внутри нашего элемента div сейчас00:06:41
это CSS-селектор, и прямо сейчас мы00:06:44
есть только один элемент div, так что это00:06:46
все будет хорошо, однако я думаю, что мы00:06:49
было бы лучше, если бы у нас было немного00:06:51
здесь своего рода уникальный идентификатор, так что давайте00:06:53
просто назовите этот контент, и мы это сделаем00:06:55
измените наш селектор CSS на идентификатор00:06:59
контент сейчас, если мы просмотрим это в00:07:02
браузере это будет выглядеть именно так00:07:04
то же самое, ничего такого не будет00:07:05
разные, и это прежде всего потому, что00:07:07
да, мы создали экземпляр представления, но это00:07:11
однако на самом деле ничего не делаю00:07:13
есть одна очень важная вещь, которая00:07:15
произошло за кулисами, и это00:07:18
с тех пор, как мы смонтировали наше приложение00:07:20
с этим элементом с идентификатором контента00:07:24
то, что у нас здесь внутри, на самом деле00:07:27
шаблон и представление будут использовать это00:07:31
шаблон, чтобы сгенерировать то, что мы00:07:34
конечно, сейчас посмотри внутри браузера00:07:36
сейчас наш шаблон жестко запрограммирован00:07:39
HTML, но мы хотим программировать это, мы00:07:42
хотите предоставить данные нашему00:07:45
приложения, чтобы мы могли их просматривать00:07:47
через наш шаблон, поэтому мы делаем это с помощью00:07:50
передавая в это то, что мы называем опциями00:07:53
создать метод приложения, параметры — ничего00:07:56
больше, чем объект и свойства00:07:59
ну, это разные варианты00:08:02
первый, который мы собираемся рассмотреть00:08:04
это опция данных, которая предоставляет данные для00:08:08
наше приложение — это функция, которая00:08:12
возвращает объект сейчас, если вы знакомы00:08:14
с помощью реакции или других фреймворков это00:08:17
будет называться государством, это00:08:20
состояние нашего приложения, поэтому мы00:08:22
по сути, у нас есть две вещи, которые мы хотим00:08:24
наше приложение для работы с первым00:08:26
это заголовок страницы, в которой указана строка00:08:30
здравствуйте, просмотр, мы собираемся вам позвонить00:08:32
это название страницы, и давайте продолжим00:08:35
и возьми этот текст, из которого мы его вырежем00:08:38
наш шаблон, и мы вставим его как00:08:41
строка для заголовка нашей страницы, так что давайте прыгать00:08:44
перейдем к браузеру, давайте обновим и00:08:46
конечно, мы видим это изменение, но00:08:48
конечно, мы хотим отобразить эту страницу00:08:50
заголовок, поэтому нам нужно указать, где находится00:08:54
отобразить заголовок нашей страницы в нашем00:08:57
шаблон, который мы делаем с помощью пары фигурных00:09:01
фигурные скобки, а внутри — наши данные00:09:05
заголовок страницы свойств, поэтому, если мы вернемся к00:09:08
браузер и обновите, мы видим Привет00:09:10
посмотрим, давайте сделаем то же самое для нашего00:09:13
контент, и давайте просто назовем этот контент00:09:15
поэтому мы собираемся использовать шаблон00:09:18
синтаксис для вывода содержимого сейчас, если мы этого не сделаем00:09:22
укажите свойство данных контента, и мы00:09:25
обновите страницу, конечно, нет00:09:28
увидеть что-нибудь, потому что мы не поставляли00:09:30
что-нибудь для контента для нашего00:09:32
приложение, если мы откроем браузер00:09:35
инструменты разработчика, мы увидим предупреждение00:09:37
что к содержимому свойства был осуществлен доступ00:09:40
во время рендеринга, но он не определен на00:09:44
экземпляр так по существу, что это00:09:46
означает, что мы использовали контент внутри00:09:49
наш шаблон, но мы его не определяли00:09:52
в нашем приложении, так что это легко00:09:55
достаточно, нам просто нужно добавить00:09:56
Свойство контента для наших данных и сейчас00:09:59
всякий раз, когда мы возвращаемся в браузер, давайте00:10:02
обновите, мы, конечно, видим содержимое00:10:04
что мы ожидаем увидеть и00:10:06
в консоли нет такого предупреждения00:10:08
больше, поэтому мы создали наш первый00:10:11
Просмотр приложения мы сделали это с помощью00:10:14
просмотреть объект и вызвать создание приложения00:10:17
создали экземпляр представления, который мы предоставили00:10:20
объект параметров, который определяет данные00:10:23
что наше приложение будет использовать мы00:10:26
есть два фрагмента данных, у нас есть страница00:10:28
заголовок и контент, который мы монтируем00:10:31
это приложение к элементу, который имеет00:10:34
идентификатор контента, и в нашем шаблоне мы00:10:37
определяем, где мы хотим отображать00:10:40
данные наших приложений в ближайшем будущем00:10:42
урок, мы собираемся добавить еще один вид00:10:45
приложение, это будет то, которое будет00:10:48
управлять навигацией нашей веб-страницы00:10:50
на предыдущем уроке мы создали очень00:10:53
простое приложение для отображения некоторых00:10:56
содержимое веб-страницы это00:10:58
приложение состоит из двух частей00:11:00
информация или две части данных00:11:03
заголовок страницы и содержание, и мы00:11:05
смонтировал это приложение в элементе00:11:08
у которого есть идентификатор контента, который это00:11:11
элемент div внутри этого элемента div00:11:14
у нас есть свои шаблоны, где мы указываем00:11:17
где мы хотим отобразить заголовок страницы00:11:19
и содержание, поэтому в этом уроке я хочу00:11:22
чтобы расширить это, я хочу создать00:11:24
новое приложение «Просмотреть» теперь этого нет00:11:27
означает, что нам нужно создать еще одну сеть00:11:29
странице мы можем иметь столько просмотров00:11:31
приложение находится внутри той же страницы00:11:34
чего мы хотим и иногда хотим00:11:36
несколько приложений, иногда мы этого не делаем00:11:39
В этом уроке мы собираемся создать00:11:41
приложение, которое будет управлять00:11:44
навигация нашей веб-страницы, поэтому я собираюсь00:11:47
вставьте это в разметку для нашей навигационной панели00:11:49
это просто типичная навигационная панель начальной загрузки, если00:11:53
заходим и смотрим в браузере там мы00:11:55
иди, у нас есть бренд навигационной панели, который00:11:57
просто мое мнение, и тогда у нас есть сингл00:12:00
ссылка на дом, если вы не знакомы00:12:02
загрузите, если вы хотите добавить больше00:12:04
ссылки на панель навигации, вот это00:12:07
неупорядоченный список, и каждый элемент списка00:12:11
это будет элемент в этой навигационной панели, так что00:12:14
здесь вы можете видеть, что это дом00:12:16
ссылку, и если мы хотим добавить ссылки для00:12:18
скажем о контакте, который нам понадобится00:12:21
чтобы повторить ту же самую разметку, измените00:12:24
текст и, конечно, нам бы тоже хотелось00:12:28
укажите на другую ссылку, к которой мы доберемся00:12:31
href позже, а сейчас я больше00:12:33
обеспокоен созданием контента00:12:36
дома и связаться, чтобы мы сделали00:12:39
что с жестко закодированным HTML давайте использовать00:12:42
вид, чтобы сделать это, так что давайте начнем с00:12:45
создаем новое приложение, которое мы собираемся00:12:47
чтобы продолжить и передать наши варианты00:12:50
объект, где мы собираемся определить наш00:12:53
данные, потому что наши данные будут определять00:12:55
ссылки, которые есть в этом конкретном представлении00:12:58
приложение будет генерировать так00:13:00
давайте создадим свойство под названиемlinks, которое00:13:03
будет массивом и правильно00:13:04
сейчас мы будем работать с простыми00:13:06
струны, чтобы у нас было дома00:13:09
и контакт конечно нам нужно больше00:13:12
информация, если они будут00:13:14
реальные ссылки, которые мы получим к этому00:13:16
хотя сейчас позже00:13:18
все будет хорошо, и мы хотим00:13:20
смонтируйте это приложение в нашу навигацию сейчас00:13:24
сейчас это нормально, потому что я00:13:26
не собираюсь иметь другую навигацию00:13:28
элементы внутри страницы, однако, если00:13:31
оказывается, что у нас есть несколько00:13:33
элементы навигации, то нам нужно будет использовать00:13:36
что-то более уникальное, но это00:13:38
все будет хорошо, и теперь, когда у нас есть00:13:40
установил это приложение в нашу навигацию00:13:43
элемент, который означает, что внутри00:13:45
элемент nav, у нас есть шаблон, и мы00:13:48
можем определить, где мы хотим по существу00:13:50
отображать текст наших ссылок, которые00:13:53
конечно домой о контакте так что один00:13:56
из способов, которыми мы можем это сделать, является00:13:58
ну вот так мы можем использовать ссылки00:14:02
массив, а затем укажите индекс00:14:05
значение, которое мы хотим отобразить, чтобы дом был00:14:08
индекс 0 примерно так же, как контакт с индексом один00:14:11
индекс два и, конечно, если мы посмотрим это00:14:14
в браузере мы не заметим00:14:16
какие-либо различия в навигационной панели, кроме этого00:14:20
это ужасный способ сделать это00:14:22
потому что наши ссылки находятся в массиве и00:14:26
каждый раз, когда мы работаем с массивом, мы00:14:28
обычно хочется использовать цикл сейчас, если это00:14:32
был бы обычным JavaScript, который мы могли бы сделать00:14:34
это несколькими разными способами: один00:14:36
из них было бы использовать 4 в цикле, поэтому00:14:40
что мы могли бы сказать четыре ссылки в ссылках и00:14:44
тогда внутри этого цикла мы бы00:14:46
используйте ссылку, чтобы перейти к00:14:49
стоимость дома или свяжитесь с нами00:14:52
по существу может сделать то же самое с00:14:55
вид, за исключением того, что мы не делаем этого внутри00:14:57
нашего JavaScript вместо этого сказал, что мы делаем это00:14:59
внутри нашего шаблона мы используем то, что00:15:01
называется директивой представления, директивой представления00:15:04
начинается с v Dash, а затем есть00:15:06
много разных директив, в нашем случае мы00:15:10
хотим использовать цикл более конкретно, мы00:15:12
хочу использовать цикл for, и он будет00:15:14
очень похоже на цифру 4 в цикле, так что мы00:15:18
могу сказать, что для ссылки в ссылках сделайте этот код00:15:23
и на самом деле это больше, чем просто сделать этот код, поэтому я00:15:27
хочу внести ясность в то, что мы00:15:30
используете V4 Direct, это для00:15:33
Loop, но мы используем его на l i00:15:37
элемент, поэтому мы хотим использовать его в00:15:39
любой элемент, который мы хотим00:15:41
повторно генерировать, если мы использовали V4 на00:15:47
UL, который будет генерировать00:15:49
несколько неупорядоченных списков, и мы не00:15:51
хотим, чтобы нам нужно было несколько элементов Li00:15:54
поэтому для каждой ссылки в ссылках мы хотим, хотим00:15:59
работать с отдельной ссылкой, поэтому, когда00:16:01
дело доходит до вывода значения, которое мы только что00:16:04
используйте ссылку, которая определена внутри нашего00:16:07
for Loop всякий раз, когда мы возвращаемся к00:16:09
браузер и обнови мы видим то же самое00:16:11
теперь результаты доказывают, что это действительно так00:16:14
создание ссылок из наших данных о ссылках00:16:18
давайте изменим текст здесь так, чтобы мы00:16:20
возьми домой один около двух и свяжись00:16:24
три, если мы вернемся в браузер и00:16:26
Обновить дом около двух и связаться00:16:29
три, это совсем другое00:16:31
из чего-то вроде реакции, где вы00:16:35
будет генерировать ваши элементы с помощью00:16:36
JavaScript, а затем вывести результаты00:16:39
в представлении шаблона используется очень00:16:42
декларативный синтаксис, поэтому цель00:16:46
что вы можете прочитать свой шаблон и00:16:48
понять, что именно выводится00:16:51
сейчас на следующем уроке мы собираемся00:16:52
сделайте еще один шаг вперед и сгенерируйте00:16:54
несколько реальных ссылок, чтобы мы могли00:16:57
переходить на разные страницы Страницы внутри00:16:59
наш сайт в этом уроке мы собираемся00:17:02
использовать ссылки, которые мы создали00:17:04
на предыдущем уроке, потому что как есть00:17:06
прямо сейчас, ну, они просто в основном00:17:08
текст, конечно, это настоящие ссылки00:17:11
потому что у них есть значения href, но это00:17:14
установите знак решетки или решетку, чтобы мы00:17:18
вообще никуда не ходи, когда мы00:17:19
нажмите на эти ссылки, мы хотим, чтобы пользователь00:17:22
иметь возможность пойти домой или00:17:24
Контактные страницы теперь помните, что наши00:17:27
панель навигации контролируется представлением00:17:30
приложение и ссылки генерируются00:17:33
на основе данных этого приложения00:17:35
данные — это массив, называемый ссылками, который имеет00:17:39
просто простые строковые значения, поэтому, если мы хотим00:17:42
для создания реальных ссылок, которые ведут на00:17:45
реальная страница, нам нужно нечто большее, чем00:17:47
нам нужны просто строки, действительно объект00:17:51
потому что объект может точно описать00:17:54
ссылка, она может дать нам текст, а также00:17:57
URL-адрес, по которому мы хотим перейти, чтобы00:17:59
Я собираюсь изменить массив ссылок, поэтому00:18:01
что это массив объектов, каждый из которых00:18:05
объект имеет свойство text и имеет00:18:08
Свойство URL сейчас, потому что я изменил00:18:10
этот массив нам нужен для обращения к нашему00:18:13
шаблон, потому что мы выводили только00:18:16
простое строковое значение с этой ссылкой00:18:19
переменная, но теперь это объект, поэтому мы00:18:22
хочу сказать ссылку на текст, потому что внутри00:18:26
двойных фигурных скобок, которые мы можем использовать00:18:28
любое выражение JavaScript, которое мы хотим00:18:31
если бы по какой-то причине мы захотели00:18:33
Выведите один плюс один, мы можем это сделать00:18:36
потому что это действительный JavaScript00:18:38
выражение конечно в браузере00:18:40
мы увидим 222, это не очень00:18:42
полезно, поэтому давайте изменим это обратно на00:18:45
link.text, и если мы посмотрим на это00:18:47
в браузере мы увидим00:18:49
результаты, которые мы получили перед тем, как вернуться домой00:18:51
и свяжитесь сейчас. Представление — это основа для00:18:55
создание пользовательских интерфейсов и веб-сайтов00:18:57
страница наш интерфейс HTML CSS и00:19:01
JavaScript и когда дело доходит до00:19:03
вывод HTML да, мы можем выводить текст00:19:06
но это нечто большее, чем просто текстовое сообщение, которое мы00:19:09
также необходимо иметь возможность устанавливать значения00:19:12
атрибутов HTML, так как мы использовали00:19:16
двойные фигурные скобки для вывода текста00:19:18
вы можете подумать, что нам нужно будет00:19:20
используйте это, чтобы сделать то же самое для00:19:23
URL, так что давайте попробуем, давайте сделаем00:19:26
это изменение, давайте перейдем в браузер00:19:27
давайте обновим и подтянем HTML00:19:31
инспектор, чтобы мы могли точно видеть00:19:34
что загружается в браузере и00:19:37
мы можем хорошо видеть URL-адрес ссылки внутри00:19:41
парой фигурных скобок мы видим точную00:19:44
строка, которую мы установили для этого атрибута00:19:47
что имеет смысл, потому что это00:19:49
это атрибут href, который нам нужен, чтобы сообщить нашему00:19:52
Просмотр приложения, которое нам нужно обработать00:19:55
это немного по-другому, это нужно00:19:57
быть особенными, поэтому мы хотим сделать это00:20:00
используйте директиву Vbind, тогда мы00:20:04
за этим следует двоеточие, за которым следует00:20:06
атрибут HTML, который мы хотим связать00:20:09
значение в этом случае будет00:20:12
href, а затем значение, которое мы присваиваем00:20:15
к этому атрибуту является JavaScript00:20:18
выражение, поэтому нам не нужен двойной00:20:21
вместо фигурных скобок нам просто нужна ссылка00:20:23
URL, чтобы всякий раз, когда мы возвращаемся к00:20:26
браузер, мы увидим результаты00:20:28
что мы ожидаем, где находится href00:20:31
установлено в свойство URL нашей ссылки00:20:36
объект теперь привязывает данные к атрибуту00:20:39
очень-очень распространено, поэтому одна вещь, которая00:20:42
вы найдете в большинстве00:20:44
проекты, на которые ты смотришь, это нечто00:20:47
вот так просто двоеточие, потому что мы связываем00:20:50
много данных, имеет смысл иметь00:20:52
сокращенный синтаксис для привязки этих данных к00:20:55
атрибут, поэтому вместо того, чтобы набирать00:20:58
из V-связывания двоеточия мы можем просто сказать двоеточие00:21:01
за которым следует атрибут, и мы будем00:21:04
получить тот же результат, и мы можем сделать это00:21:07
для любого атрибута HTML, например00:21:09
это ссылка, а ссылок должно быть больше00:21:12
часто имеют атрибут title00:21:15
что-то, что дает описание00:21:18
ссылку, чтобы мы могли иметь00:21:19
описание этой ссылки ведет на и00:21:23
тогда мы можем поставить лайк на домашнюю страницу или00:21:27
страница «О нас», но, конечно, нам нужно00:21:30
это должно быть динамично, потому что это происходит00:21:32
генерируется динамически, мы можем просто00:21:35
используйте V-привязку к атрибуту заголовка, но00:21:39
помните, что ценность этого00:21:42
атрибут теперь является выражением JavaScript00:21:44
так что просто обычный текст — это не00:21:47
то, чего мы хотим, потому что это00:21:48
это приведет к ошибке, это00:21:51
синтаксическая ошибка, поскольку это недопустимый вариант00:21:53
Выражение JavaScript вместо того, что мы00:21:55
хочу, чтобы вывести строку динамически00:21:58
струнное кольцо на основе текста00:22:01
ссылку, поэтому я собираюсь сделать это, чтобы мы00:22:04
будет использовать строку JavaScript00:22:06
функция интерполяции для вывода строки00:22:08
там написано, что эта ссылка ведет на и затем00:22:11
мы можем использовать свойство text в нашей ссылке00:22:14
объект и всякий раз, когда мы просматриваем его в00:22:16
браузере мы не только увидим00:22:19
Атрибуты href установлены правильно, но мы это сделаем00:22:22
см. то же самое в названии этого00:22:24
ссылка ведет на домашнюю страницу, и если мы00:22:27
ознакомьтесь с информацией и свяжитесь00:22:29
ссылки мы увидим нечто подобное00:22:32
href установлено соответствующее значение как00:22:35
а также атрибут title для каждого из них00:22:38
этих ссылок, и теперь всякий раз, когда мы00:22:40
нажмите на эти ссылки, если у нас есть00:22:44
страница about.html, на которую мы перейдем00:22:47
на этой странице то же самое верно и для контактов00:22:49
а также дома, хотя я думаю, дома00:22:53
вероятно, должен быть индексом, поэтому давайте сделаем00:22:56
этот сменный дом будет индексом00:22:58
HTML, так что давайте обновим страницу. Главная страница идет00:23:02
индексировать о том, что будет хорошо, что бы00:23:06
на странице «О нас» контакт переходит на00:23:09
страница контактов, теперь есть еще кое-что00:23:11
и это сейчас не так важно00:23:14
потому что данные, которые мы предоставляем00:23:16
наша панель навигации статична, мы не меняем00:23:20
эти данные, однако, когда мы их изменяем00:23:23
просмотр данных будет автоматически00:23:26
изменить то, что видно внутри00:23:28
браузер, нам не нужно ничего делать00:23:30
View делает это за нас, но нам нужно00:23:33
помогите просмотреть, чтобы он мог определить, какие00:23:38
объект, который необходимо обновить, поэтому мы00:23:41
необходимо предоставить ключ или уникальный00:23:44
идентификатор для каждого из LI00:23:48
элементы, которые мы здесь генерируем00:23:50
с директивой V4, поэтому мы делаем это с помощью V00:23:54
привязка ключа, и это должен быть00:23:57
уникальная ценность для каждого отдельного Ли00:24:01
элемент, который генерируется или лучше00:24:04
способ мышления об этом уникален00:24:06
идентификатор для каждого элемента в ссылках00:24:10
массив и одна вещь, которая уникальна, это00:24:13
индекс элементов массива00:24:16
потому что нулевой индекс впереди дома00:24:18
индекс единицы примерно соответствует индексу00:24:21
из двух - для контакта, чтобы мы могли использовать00:24:23
индекс как ключ, и мы можем это сделать00:24:27
очень легко, изменив наш цикл for так00:24:30
что мы не только будем работать00:24:32
с объектом ссылки, но мы также получаем00:24:35
индекс этого элемента в массиве, поэтому00:24:38
мы можем связать это с ключом и00:24:42
с точки зрения пользователя это не так00:24:44
замечу что-то другое, это00:24:46
предназначен исключительно для того, чтобы помочь просмотру сделать свое дело00:24:49
то, что за кадром, сейчас в следующем00:24:51
урок, который мы собираемся перенести00:24:53
страницу в так называемую одну страницу00:24:56
приложение, по сути, это одна страница00:24:59
загружено в браузер и контент00:25:01
изменения в зависимости от пользователя00:25:04
взаимодействие, например, нажав на00:25:06
одна из ссылок изменит00:25:09
контент, который отображается в00:25:11
браузер в этом уроке мы собираемся00:25:13
превратить нашу веб-страницу в одну страницу00:25:16
приложение, и мы можем сделать это00:25:18
различными способами, используя00:25:21
просмотреть, однако, со всем, что мы00:25:22
мы говорили до сих пор, вероятно,00:25:25
самое простое, что можно сделать, это просто00:25:27
объединить два наших экземпляра представления в один00:25:31
так что у нас есть только один объект данных00:25:34
с которым мы будем работать00:25:36
делает все намного проще сделать это00:25:40
этот переход будет00:25:41
относительно просто, все, что нам нужно сделать, это00:25:44
возьмите данные из одного экземпляра и поместите00:25:47
это внутри другого, так что давайте возьмем00:25:50
ссылки из нашего экземпляра навигации, давайте вставим00:25:53
что внутри данных для нашего контента00:25:57
давайте удалим экземпляр навигации, а затем00:26:00
нам просто нужно изменить селектор CSS00:26:04
что мы перешли к методу Mount, который мы00:26:07
можем просто передать в теле, чтобы мы00:26:09
по сути, смонтируйте наш экземпляр представления в00:26:13
тело этого приложения, так что это00:26:16
будет охватывать как навигацию, так и наш контент00:26:19
и тогда возникает вопрос, как сделать00:26:21
нам нужно структурировать наши данные, потому что мы00:26:25
нужно нечто большее, чем просто набор ссылок и00:26:28
заголовок и содержание одной страницы, которые нам нужны00:26:30
ссылка заголовок страницы и содержание00:26:33
для каждой отдельной страницы, которую мы хотим00:26:36
дисплей, и у нас есть три главные страницы00:26:38
о и контакты, поэтому я думаю, что делает00:26:41
самый смысл в том, чтобы существенно изменить00:26:44
наши данные в массив страниц, и каждая00:26:49
одна из этих страниц будет00:26:51
объект, имеющий ссылку, содержащую текст00:26:54
и URL-адрес, у которого есть заголовок страницы и00:26:58
содержимое этой страницы сейчас, потому что00:27:01
мы вносим это изменение, нам действительно нужно00:27:03
обращайтесь к нашему шаблону, особенно когда он00:27:05
доходит до создания ссылок в нашей навигации00:27:08
бар, поэтому мы больше не работаем с00:27:10
вместо этого мы работаем с00:27:13
отдельная страница внутри страниц, которые мы можем00:27:17
оставьте индекс в покое, потому что нам нужно00:27:19
свяжите это с ключом нашего списка Ли00:27:23
элементы, но везде мы использовали00:27:25
эту ссылку все, что нам нужно сделать, это предварительно закрепить00:27:28
что со страницей Dot и все должно быть00:27:31
работать так же, по крайней мере, в отношении навигации00:27:34
обеспокоен, так что давай проверим вменяемость00:27:36
пойдем в браузер, давай обновим00:27:37
и да, у нас есть ссылки, так что теперь мы просто00:27:41
нужно изменить контент, который происходит00:27:45
будет отображаться всякий раз, когда мы нажимаем на00:27:46
эти ссылки, так что это означает, что нам нужно00:27:49
чтобы настроить событие клика для этих ссылок00:27:52
и это очень легко сделать внутри00:27:55
Посмотреть, это может выглядеть немного неправильно00:27:57
потому что это чем-то напоминает00:27:59
События уровня дома 0 сейчас, если вы этого не сделаете00:28:02
знаком с этой терминологией раньше00:28:04
там была какая-то спецификация Дома, кстати00:28:07
то, что мы настроили обработчики событий, было00:28:10
через HTML каждый элемент HTML имел00:28:14
атрибуты, такие как щелчок или мышь00:28:18
или что-то в этом роде, что позволило бы00:28:21
мы настроили событие для этого элемента, чтобы00:28:25
для события клика у нас будет клик00:28:27
а затем значение этого атрибута00:28:29
будет какое-то выражение JavaScript, которое00:28:31
будет выполняться всякий раз, когда пользователь нажимает00:28:33
для этого элемента с представлением мы используем представление00:28:37
директиву V on, мы следуем, что00:28:40
с двоеточием, а затем у нас есть имя00:28:43
события, которое мы хотим обработать в00:28:45
в этом случае это будет щелчок, если это00:28:47
было какое-то другое событие, например, Mouse over или00:28:51
Уберите мышь или введите с помощью мыши что-нибудь вроде00:28:54
что мы будем использовать только название этого00:28:57
событие, но мы бы добавили к нему букву V00:28:59
в директиве теперь есть сокращение00:29:03
синтаксис вместо того, чтобы писать V в двоеточии, мы00:29:07
можно просто использовать знак перед событием00:29:10
имя, поэтому при нажатии выполняется настройка щелчка00:29:13
обработчик событий для этого элемента, который мне нравится00:29:16
думайте об этом как о действии, а затем нажмите и00:29:19
тогда нам просто нужно указать код00:29:21
что он будет выполняться всякий раз, когда мы00:29:22
нажимайте на эту ссылку всякий раз, когда мы нажимаем на00:29:24
ссылку, которая нам нужна, чтобы иметь возможность отслеживать00:29:27
ссылка на страницу, на которую мы нажали, поэтому00:29:30
нам нужно какое-то другое свойство данных, которое мы00:29:32
можно использовать для отслеживания активной страницы и00:29:35
давайте просто назовем это свойство активным00:29:37
страницу и имеет смысл инициализировать00:29:40
это наша домашняя страница, так что скажем так00:29:43
мы собираемся отслеживать это на основе00:29:46
индекс, поэтому наша домашняя страница находится под индексом00:29:49
ноль, если массив страниц равен00:29:52
обеспокоены тем, что это будет индекс один и00:29:55
тогда контакт будет иметь номер два, так что00:29:57
всякий раз, когда мы нажимаем на эти ссылки, мы хотим00:30:01
изменить активную страницу на индекс для00:30:06
данную страницу и поэтому, когда дело доходит до00:30:09
отображение нашего мошеннического контента, который мы будем использовать00:30:11
Pages мы будем использовать синтаксис индекса, чтобы00:30:14
мы можем использовать активную страницу и тогда это00:30:17
предоставит нам доступ к заголовку этой страницы00:30:19
как и содержание так еще здравомыслие00:30:24
проверь зайдём в браузер дадим00:30:26
это всего лишь кадр, давайте обновим страницу00:30:29
поскольку домашняя страница является нашей страницей по умолчанию, мы00:30:32
вижу, что этот контент00:30:33
автоматически отображается, поэтому давайте нажмем00:30:35
по ссылке «О нас» мы могли видеть очень00:30:38
кратко, что содержание изменилось, но00:30:40
обратите внимание, что мы перешли к00:30:43
abouts.html — это URL-адрес, который был00:30:46
указано для этой ссылки, и мы не00:30:48
хочу этого, потому что весь наш контент00:30:50
теперь загружается через JavaScript, поэтому00:30:52
мы хотим запретить веб-браузеру00:30:55
переход к любому указанному URL-адресу00:30:58
в href, и если бы это было просто00:31:01
обычный прослушиватель событий Dom, который мы могли бы сделать00:31:04
что использование объектов событий предотвращает00:31:06
метод по умолчанию, но поскольку это просмотр, мы00:31:09
иметь более декларативный способ сделать00:31:12
что всякий раз, когда мы указываем при нажатии00:31:15
директиву, мы можем последовать за ней с помощью00:31:18
DOT, и тогда мы сможем использовать это для предотвращения00:31:20
модификатор this по сути говорит, что мы00:31:23
хотите запретить браузеру00:31:25
переход к href всякий раз, когда пользователь00:31:29
нажимает на эту ссылку, чтобы с этим в00:31:32
место, где мы можем вернуться в браузер00:31:33
давайте обновим страницу каждый раз, когда мы00:31:36
нажмите «О», мы увидим, что00:31:37
браузер не перешел на00:31:40
about.html, но контент загрузился00:31:43
что мы указали, а затем всякий раз, когда мы00:31:46
нажмите на контакт, и мы увидим то же самое00:31:48
вещь, давай нажмем на домашнюю страницу00:31:51
свяжитесь с нами, и мы сможем продолжать это делать00:31:55
и это будет работать так же, как мы00:31:57
этого и следовало ожидать, и это один из00:31:59
все самое лучшее в Vue и на самом деле00:32:00
это не просто представление, а любая платформа пользовательского интерфейса00:32:04
Я имею в виду реакцию angular svelt Alpine00:32:07
сейчас их довольно много, но мы нет00:32:10
больше не придется писать код, который00:32:13
на самом деле меняет контент вместо всего00:32:16
нам нужно изменить данные, а затем00:32:20
наше приложение отреагирует на это00:32:22
изменение данных, например, единственное00:32:25
часть данных, которую мы изменили, была00:32:27
значение активной страницы при каждом нажатии00:32:30
по ссылке мы изменили это значение и00:32:33
из-за этого очень простого изменения представления00:32:35
автоматически обновлял контент, который00:32:38
был загружен в Дом, потому что наш код00:32:41
сказал загрузить заголовок страницы00:32:43
активную страницу и загрузить содержимое00:32:46
активная страница, и именно здесь00:32:48
власть и популярность этих00:32:51
Фреймворки появились, потому что мы не00:32:53
больше озабочен фактическим обновлением00:32:56
фреймворк Dom делает это00:32:58
автоматически для нас все, что мы должны сделать00:33:01
настроен пользовательский интерфейс для отображения контента00:33:05
что мы хотим, а затем просто изменяем00:33:08
данные или изменить состояние00:33:10
приложение и просмотр будут автоматически00:33:13
обновите Дом для нас00:33:15
когда дело доходит до создания динамического пользователя00:33:18
интерфейсы, это гораздо больше, чем00:33:19
просто меняю контент или обновляю00:33:22
контент много раз мы хотим изменить00:33:24
или обновите стиль, примененный к00:33:27
HTML-элементы, такие как, например, bootstrap00:33:31
дает нам класс под названием active для нашего00:33:34
навигационные ссылки, чтобы мы могли указать на00:33:37
пользователь, который считает домашнюю ссылку или информацию00:33:40
ссылка или ссылка на контакты активна, это00:33:44
просто визуальная подсказка, которую мы можем предоставить00:33:46
пользователь, и сейчас мы00:33:48
не используем этот класс, потому что когда мы00:33:51
посмотрите на нашу разметку, все что мы указали00:33:53
это класс навигационных ссылок для этих ссылок00:33:56
мы хотим включить активный, но00:34:00
только когда активная страница равна00:34:05
индекс данной страницы, поэтому нам нужно00:34:09
иметь возможность добавить какое-то условное выражение00:34:12
оператор, чтобы, если активная страница00:34:15
равен индексу, то мы будем использовать00:34:20
активный класс, ты знаешь, если мы собираемся00:34:22
использовать троичное выражение было бы00:34:24
выглядеть примерно так, мы можем сделать00:34:26
это очень просто с помощью Vbind, но я00:34:31
собираюсь использовать сокращение в классе00:34:34
теперь это будет выглядеть немного странно00:34:36
потому что мы не только используем класс00:34:40
атрибут это класс HTML00:34:43
атрибут, но мы также собираемся использовать00:34:46
директиву связывания V для класса, чтобы вы могли00:34:49
подумайте об этом, поскольку я хочу применить эти00:34:53
Классы CSS всегда к элементу00:34:56
используя атрибут класса HTML, а затем00:34:59
для классов, которые вы хотите применить00:35:02
условно вы будете использовать привязку V, поэтому00:35:06
Синтаксис для этого будет выглядеть00:35:08
немного странно, потому что мы не используем00:35:10
троичные выражения или что-то вроде00:35:13
вместо этого у нас есть объект00:35:15
и свойства этих объектов00:35:18
классы CSS, к которым мы хотим применить00:35:22
этот элемент, поэтому в данном случае мы хотим00:35:24
примените активный класс, и значение будет00:35:28
это будет наше условие, поэтому00:35:30
мы хотим применить активный класс, когда00:35:33
активная страница равна индексу00:35:39
данная страница, так что давайте просто возьмем00:35:42
взгляните на синтаксис еще раз, потому что, как я00:35:43
сказал, что это выглядит немного странно00:35:45
особенно если вы собираетесь использовать00:35:48
оператор if или троичный или00:35:50
что-то в этом роде, поэтому мы используем00:35:52
Директива связывания V для класса, и мы00:35:55
предоставление объекта, на котором находится имущество00:35:58
это класс CSS, который мы хотим применить00:36:01
к элементу, а затем значение00:36:04
это свойство является условным00:36:05
заявление, которое определит, является ли это00:36:09
Класс CSS применяется, и все готово.00:36:12
мы можем зайти в браузер, мы можем обновить00:36:15
наша страница страница и вы можете автоматически00:36:18
видишь, это немного сложно сказать из-за00:36:20
к стилю здесь, но вы можете видеть это00:36:22
дома немного темнее, чем здесь00:36:24
в контакте всякий раз, когда мы нажимаем «О нас»00:36:27
снова становится немного темнее, когда мы00:36:29
нажмите на контакт, это немного00:36:31
темнее, теперь мы можем сделать это гораздо больше00:36:34
Очевидно, по крайней мере, на мой взгляд, если мы00:36:36
смени его на темную панель навигации, и я пойду00:36:40
изменить классы CSS из панели навигации00:36:43
Lite и BG светлый на темную панель навигации и BG00:36:47
темно, если мы обновим страницу сейчас, мы можем00:36:49
обязательно увидим, что дом активен, если мы00:36:52
нажмите «О нас», если мы нажмем «Связаться с нами»00:36:55
видим, что они активны, и мы можем00:36:57
проверьте эти элементы, и мы сможем00:36:59
на самом деле видеть HTML автоматически00:37:02
обновление, вот элемент a, который у нас есть00:37:06
класс навигационной ссылки и активен, так что продолжайте00:37:09
ты смотришь на это всякий раз, когда я нажимаю на00:37:11
дома он будет автоматически обновляться00:37:14
класс CSS00:37:16
так что active больше не применяется к00:37:20
ссылку для контакта, но если мы возьмем00:37:23
посмотри ссылку на дом ну вот оно00:37:26
вот здесь, так что это дает мне идею00:37:28
Я хочу иметь возможность переключать панель навигации00:37:31
от света к темноте, так что давайте сделаем это00:37:35
знаю, как это сделать теперь, когда мы можем связать00:37:37
CSS-классы, но нам нужно иметь возможность00:37:40
отслеживать, показываем ли мы свет00:37:43
фон или темный фон, так что давайте00:37:45
добавьте еще одну дату собственности и давайте00:37:48
просто назовите это, используйте темную панель навигации, так что00:37:52
конечно, если это правда, то навигационная панель00:37:54
будет темно, если это ложь, то это будет00:37:57
будь легким, давайте инициализируем его как false00:37:59
а это значит, что мы собираемся00:38:02
измените атрибуты нашего класса HTML так, чтобы00:38:06
мы не применяем подсветку навигационной панели00:38:09
Фоновый свет вместо этого мы хотим динамически00:38:13
применить соответствующие классы на основе00:38:16
по значению этого используйте темную панель навигации, поэтому00:38:20
еще раз мы собираемся v-связать00:38:24
класс, который мы собираемся передать в объект00:38:26
дела пойдут немного лучше00:38:28
здесь сложно, потому что классы CSS, которые00:38:30
мы хотим применить дефисы, которые00:38:33
недопустимо в идентификаторах JavaScript00:38:36
однако мы можем использовать строку как00:38:39
имя свойства, мы также можем применить несколько00:38:42
занятия одновременно, чтобы это00:38:45
выглядит так, что мы хотим применить00:38:48
Подсветка навигационной панели и подсветка фона при использовании темноты00:38:53
navbar имеет значение false, и тогда мы, по сути,00:38:56
хочу сделать то же самое для темноты00:38:59
версия, но при использовании панели навигации это правда00:39:03
еще раз мы изменим эти значения00:39:05
чтобы панель навигации была темной, а фоновая картинка темной, так это выглядит00:39:09
еще более странно, чем раньше, так что давай просто00:39:11
уделите немного времени, чтобы поговорить об этом00:39:14
синтаксис, поэтому мы еще раз связываем00:39:16
наши классы, но поскольку эти классы используют00:39:20
дефисы в их имени, мы не можем использовать их00:39:23
как обычные идентификаторы JavaScript, поэтому наши00:39:27
имя свойства обозначается строкой00:39:30
мы используем два класса CSS, разделенные00:39:35
пробел в качестве имени свойства внутри00:39:38
строка, а затем условное выражение00:39:40
значение состоит в том, чтобы не использовать темную панель навигации, поэтому, когда00:39:45
это неверно, мы используем подобные классы00:39:48
когда это правда, мы используем темные классы00:39:52
так что все, что нам нужно, это00:39:55
кнопку, на которую нужно нажать, чтобы мы могли переключаться00:39:58
эти классы, поэтому я собираюсь добавить форму00:40:01
после неупорядоченного списка нашей навбара00:40:05
ссылки давайте добавим класс d-flex и00:40:09
внутри этой формы у нас будет просто00:40:11
простая кнопка, давайте настроим00:40:13
классы CSS, чтобы мы сделали это00:40:16
гармонировать с бутстрапом, поэтому мы будем использовать00:40:19
застежка-пуговица, давайте также использовать кнопку00:40:21
первично, нам не нужно указывать00:40:24
тип, но нам нужно обработать00:40:26
событие click, так что давайте сделаем это с помощью at00:40:29
нажмите, давайте продолжим и предотвратим00:40:31
по умолчанию, поскольку это внутри формы00:40:33
ты знаешь, что я не знаю00:40:35
знать, каким будет действие по умолчанию, поэтому00:40:37
не помешает добавить предотвращение00:40:41
модификатор этого события и то, что мы хотим00:40:43
нужно изменить значение использования темного цвета00:40:46
навбар так, чтобы он был равен своему00:40:50
наоборот, и с помощью этого простого изменения мы00:40:52
можем вернуться в браузер, мы можем00:40:55
обновить страницу, которая отображается по умолчанию00:40:57
световая полоса, о, было бы полезно00:41:01
есть текст, скажем так, не так ли?00:41:03
переключить панель навигации, так что теперь давайте обновим00:41:06
по умолчанию — светлый фон, если мы00:41:08
нажмите на панель переключения навигации, которая должна00:41:10
измените его на темный, и он сделает00:41:13
активные занятия применяются правильно00:41:16
давайте вернемся к навигационной панели освещения00:41:18
еще раз активный класс правильно00:41:21
применил и все работает как надо00:41:24
теперь надо, давай сделаем это, давай удостоверимся00:41:26
что это сработает, если мы установим00:41:28
значение по умолчанию для использования темной панели навигации00:41:31
это правда, и, конечно, мы так и сделаем00:41:34
написал это, так что вот оно, установив00:41:37
по умолчанию установлено значение True, наша панель навигации00:41:39
сейчас темно, все остальное работает00:41:42
то же самое мы можем переключить на свет00:41:44
но я думаю, что лично мне нравится темнота00:41:46
поэтому я оставлю это так00:41:49
предыдущий урок, о котором вы узнали00:41:51
один из способов привязки CSS00:41:53
классы для элемента, и да, я сказал один00:41:56
способов, потому что когда дело доходит до00:41:58
работая со стилем, вы можете применить00:42:01
стиль различными способами в00:42:04
на предыдущем уроке мы использовали объект00:42:06
где свойства были CSS00:42:08
классы, которые мы хотели применить, а затем00:42:11
их ценности были условными00:42:14
выражение, которое определяет, является ли00:42:15
на самом деле применяются не эти классы00:42:18
к элементу на следующем уроке мы00:42:21
рассмотрим, как теперь использовать массивы в00:42:24
на этом уроке я хочу сосредоточиться на этом00:42:26
выражение, потому что пока оно работает, я бы00:42:28
привести аргумент, что это не00:42:30
проще всего быстро прочитать и понять00:42:33
что происходит вместо того, что я хочу00:42:35
сделать, это извлечь это в объект00:42:40
что мы тогда просто сошлемся здесь00:42:43
поэтому мы могли бы назвать это классами навигационной панели и00:42:46
это делает нашу жизнь намного проще00:42:48
пролистав это, мы увидели, окей00:42:49
классы навигационной панели применяются и00:42:52
тогда позже мы сможем посмотреть на фактическое00:42:53
детали внутри нашего кода, чтобы вы могли00:42:56
думаю, что нам нужно будет определить это00:42:59
Объект классов navbar в наших данных и00:43:02
да, технически мы можем это сделать, но это00:43:04
не собираемся вести себя так, как мы00:43:06
ожидайте этого, на самом деле этого не произойдет00:43:08
вообще работает, но давайте посмотрим на это нет00:43:11
работать и говорить о том, почему это не так00:43:13
поработаем, а потом посмотрим, как можно00:43:16
заставить это работать, поэтому первое, чего я хочу00:43:18
по сути, это превратить это из двух00:43:22
строки кода в четыре строки, потому что я00:43:26
лично я думаю, что это намного проще00:43:28
прочитать и понять, если мы что-то сделаем00:43:31
вот так, чтобы каждый человек00:43:34
свойство является собственным для каждого отдельного CSS00:43:37
класс, это просто мое предпочтение, но я00:43:40
не против написать лишние строки кода00:43:42
если это значит, что мне не обязательно приходить00:43:44
вернемся к этому через три месяца и подумаем00:43:46
что я здесь делаю, ох, да, так00:43:49
сейчас это наша цель, потому что мы00:43:53
внутри JavaScript теперь мы не00:43:55
внутри нашего шаблона нам нужно00:43:57
придерживаться правил синтаксиса JavaScript00:44:00
использование темной панели навигации – это не просто00:44:04
переменная, это свойство внутри нашей00:44:08
приложение, потому что вот оно оно00:44:10
определено прямо здесь, внутри этого объекта00:44:13
поэтому нам нужно сказать, что эта точка использует темный цвет00:44:17
навигация, и все будет хорошо00:44:20
мы можем сохранить это, мы можем пойти в00:44:22
браузер, который мы можем обновить, и всякий раз, когда мы00:44:25
нажмите на переключатель, ничего не происходит, теперь это00:44:28
не потому, что это ошибка, мы можем00:44:30
подними консоль и мы не пойдём00:44:32
чтобы увидеть какие-либо ошибки, мы увидим00:44:35
это предупреждение и единственная причина, по которой мы00:44:37
получают это, потому что этот скрипт00:44:39
находится внутри тега body, и мы имеем00:44:41
создал приложение просмотра, подключенное к00:44:44
тело, чтобы мы могли видеть, что это происходит00:44:46
игнорируется, так что все в порядке, нам все равно00:44:48
об этом, но когда я нажимаю на00:44:50
кнопка переключения ошибок нет00:44:53
появляется в консоли, так что это не так00:44:56
работает, потому что есть ошибка00:44:58
не работает, потому что мы использовали темный цвет00:45:03
свойство navbar, потому что этот код00:45:07
инициализация данных нашего приложения, это00:45:10
не настраивая его на реагирование или00:45:12
что-то подобное, это просто00:45:14
инициализация всех значений для этих00:45:17
свойства, так что это означает, что всякий раз, когда00:45:21
выполняется код для создания этой навигационной панели00:45:23
объект классов, который использует фактический00:45:26
стоит использовать темную панель навигации, но это будет00:45:30
по сути быть переведено на это так00:45:33
что это будет не ложь и следующее00:45:36
строка не будет ложной, что, конечно,00:45:38
это правда, а затем для темной панели навигации это00:45:41
было бы ложью и так далее и тому подобное00:45:44
это фактические логические значения, которые00:45:47
применяются к этим свойствам00:45:49
и поэтому Vue ничего не думает00:45:52
что он должен реагировать на внутреннюю часть00:45:54
браузер всякий раз, когда мы нажимаем на переключатель00:45:57
Кнопка использования свойства темной панели навигации00:46:01
меняется, но это не проблема00:46:03
проблема в том, что фактическое логическое значение00:46:05
применяется к этим свойствам, поэтому00:46:08
мы можем обойти это00:46:10
используя так называемый компьютерный00:46:13
собственность, это просто собственность, которая00:46:16
оценивается на лету и мы создаем00:46:19
вычисляемые свойства с помощью00:46:21
рассчитанный вариант, поэтому у нас есть вариант00:46:24
называемые данными, которыми мы были00:46:26
используя до сих пор мы собираемся использовать00:46:29
расчетный вариант это еще один00:46:32
объект, в котором находятся свойства00:46:34
функции, которые будут выполняться, так что это00:46:38
где мы определим наши классы навигационной панели00:46:41
но это будет функция00:46:43
поскольку это вычисляемое свойство, оно00:46:45
должен выполниться, чтобы сгенерировать свой00:46:49
значение значение и все, что нам нужно сделать, то00:46:51
по сути, удаляет этот код из нашего00:46:54
данные, и мы хотим вернуть их внутрь00:46:58
этого вычисленного свойства, поэтому путь00:47:01
то, что это работает сейчас, остается за кадром00:47:03
View знает, что использование темной панели навигации является00:47:07
что-то, на что он должен реагировать и00:47:09
потому что мы используем его внутри этого00:47:12
вычисленное свойство, тогда оно будет00:47:14
автоматически вычислить это значение00:47:16
всякий раз, когда используются изменения темной панели навигации, поэтому мы00:47:20
можно вернуться в браузер, а теперь давай00:47:22
обновлять страницу и каждый раз, когда мы нажимаем00:47:24
при переключении мы видим, что эта функциональность00:47:26
вернулся, потому что мы нажимаем на это00:47:29
кнопка меняет значение использования темного цвета00:47:33
панель навигации и поскольку мы использовали темный цвет00:47:36
панель навигации внутри этого вычисляемого свойства00:47:39
называемые классами навигационной панели, это будет00:47:41
автоматически пересчитать это свойство00:47:45
по сути вызывает эту функцию для00:47:47
вычислить его. Возвращает объект, который00:47:51
затем используется для привязки к классу на нашем00:47:55
Навигация Сейчас на следующем уроке мы собираемся00:47:57
посмотреть, как мы можем связать классы CSS00:47:59
используя массив и как мы можем получить00:48:02
та же функциональность без использования00:48:04
вычисленное свойство на предыдущем уроке00:48:07
Я познакомил вас с вычисляемыми свойствами00:48:10
что хорошо, это свойства, которые00:48:14
обрабатываются или вычисляются «на лету» и00:48:17
мы использовали вычисленное свойство для упрощения00:48:19
наш шаблон, чтобы все, что нам нужно было сделать00:48:22
было привязано это свойство классов навигационной панели00:48:25
и это просто вычисленный00:48:27
свойство, возвращаемое значение которого меняется00:48:30
на основе значения используемой панели навигации Arc00:48:33
и это все хорошо вычислено00:48:35
свойства — замечательная функция, но00:48:38
мы также можем сделать то же самое без00:48:40
используя вычисленные свойства, потому что00:48:42
вместо использования объекта мы можем использовать00:48:46
массив для привязки классов, поэтому первым делом00:48:50
нам нужно просто определить массив00:48:52
а затем отдельные элементы внутри00:48:55
этого массива будут классы CSS00:48:57
которые применяются к элементу, поэтому для00:49:00
Например, если нам нужна темная панель навигации, мы00:49:02
в темной панели навигации был бы один элемент00:49:05
в массиве, а затем темный фон будет00:49:08
другой, чтобы мы могли перепрыгнуть00:49:10
обновите браузер и вуаля у нас есть00:49:12
эту функциональность, но, конечно, если мы00:49:15
нажмите на кнопку переключения, что нет00:49:17
дольше работает, потому что мы жестко запрограммировали00:49:20
теперь темные классы CSS в нашей навигационной панели00:49:25
без написания какого-либо дополнительного кода мы00:49:28
можно уйти, сделав что-то вроде00:49:30
это для того, чтобы мы могли проверить значение00:49:32
используйте темную панель навигации, и тогда у нас будет00:49:35
троичное выражение, так что если это00:49:38
правда, тогда да, мы бы использовали эти темные00:49:41
занятия, иначе мы бы использовали свет00:49:44
занятия, и я знаю, что есть ты знаешь00:49:46
другие классы CSS, которые нам нужно применить00:49:48
Я поленюсь и не буду их применять00:49:51
все, что нам нужно увидеть, это то, что00:49:53
цвет фона изменится, так что давайте00:49:55
обновим, давай переключимся, и у нас это есть00:49:59
снова функциональность, однако можно сделать00:50:01
аргумент, что наши шаблоны могут быть00:50:04
немного чище, я имею в виду, да, это так00:50:06
довольно чисто, но чем больше классов CSS мы00:50:09
добавьте еще больше головной боли00:50:12
попытаться расшифровать все это сейчас00:50:15
прежде чем мы продолжим, я хочу отметить00:50:16
что это выражение предназначено только для одного00:50:20
элемент массива, если бы мы захотели00:50:23
применять любые другие классы CSS и всегда00:50:26
примените их, например, панель навигации и00:50:30
панель навигации развернуть LG, мы могли бы сделать это просто00:50:34
хорошо, вообще-то, давай продолжим и сделаем это00:50:36
почему бы и нет, просто для проверки здравомыслия, давай00:50:39
вернитесь в браузер, мы увидим00:50:41
та же функциональность, что и раньше00:50:42
все статические классы CSS по-прежнему00:50:46
применяется, потому что это будет выглядеть00:50:48
очень разные, но мы все еще можем переключаться00:50:50
между светом и тьмой, но я00:50:53
хотеть что-то сделать не обязательно00:50:55
причудливее, но было бы круто сделать00:50:58
что-то вроде этого там, где мы бы00:51:01
есть наши отдельные элементы, но тогда мы00:51:04
хотелось бы иметь свойство темы и00:51:06
тогда мы бы изменили это значение00:51:09
тему, чтобы панель навигации и00:51:13
цвета фона будут меняться в зависимости от00:51:15
на эту тему, но, конечно, все00:51:17
иначе все было бы хорошо, теперь это нас отвлечет00:51:20
от использования этого вычисляемого свойства, поэтому00:51:24
давайте продолжим и удалим это тоже00:51:27
уводит нас от использования этой использованной темной00:51:29
вместо панели навигации у нас будет свойство00:51:33
назвал тему туда, где мы могли00:51:35
инициализируйте его как светлый или темный на самом деле00:51:37
не имеет значения, давай продолжим и давай00:51:39
начнем со света, давай освежимся, ох00:51:42
где-то ошибка, возможно00:51:44
синтаксическая ошибка и вот это правильно00:51:47
здесь, внутри моего шаблона, мне нужно00:51:50
поставь галочку закрытия, так что поехали00:51:53
назад давай обновим выглядит как свет00:51:55
Панель навигации, если мы изменим тему на темную, ты00:51:59
увижу темную панель навигации, вот и поехали, так что00:52:02
теперь нам просто нужно написать код00:52:03
это изменит ценность00:52:05
тема, теперь мы можем сделать это, как мы уже сделали00:52:09
для использования свойства dark navbar в этом00:52:12
всякий раз, когда мы нажимаем кнопку переключения00:52:14
мы могли бы сделать что-то вроде этого, где00:52:16
мы присвоим новое значение темы00:52:18
исходя из того, какова его текущая стоимость, поэтому00:52:22
что если тема легкая, то мы хотим00:52:25
измените его значение на темное, иначе оно00:52:30
будет светло и это будет00:52:32
дайте нам ту функциональность, которой мы являемся00:52:34
после однако еще раз я бы сделал00:52:37
аргумент, что это усложняет нашу00:52:39
шаблоны, теперь нам нужно это расшифровать00:52:42
было бы здорово, если бы мы могли00:52:44
просто есть функция, которая бы00:52:47
выполнить, потому что в реальном мире00:52:50
приложение, это обычно то, что мы00:52:52
сделал бы для начала, чтобы мы могли иметь00:52:54
функция под названием «Изменить тему», которую мы00:52:56
будет звонить всякий раз, когда кнопка00:52:58
нажал, так что давай сделаем это, нам просто нужно00:53:01
добавим метод в наше приложение и мы00:53:04
сделайте это, используя другой вариант, это00:53:07
называются методами и внутри методов00:53:11
объекты — это все методы, которые мы00:53:13
хотим определить, поэтому в данном случае мы будем00:53:15
есть метод изменения темы, давайте начнем00:53:18
создав локальную переменную, мы будем00:53:21
инициализируйте его как свет, а затем мы00:53:24
проверьте текущую стоимость нашей темы00:53:27
собственность, если это так, то мы собираемся00:53:29
чтобы установить для этой переменной темы темный цвет00:53:32
в противном случае текущее значение темы равно00:53:36
темно, а у нас уже назначен свет00:53:39
к темам, чтобы последняя строка этого00:53:42
метод просто собирается определить наш00:53:45
свойство темы — значение темы00:53:48
переменная, поэтому давайте перейдем в браузер00:53:50
давайте обновим страницу, давайте нажмем00:53:53
переключаем и видим, что у нас то же самое00:53:55
функциональность и, конечно, мы можем00:53:57
измените значение темы с темной на00:54:01
свет, чтобы панель навигации загорелась00:54:03
как свет, а затем всякий раз, когда мы нажимаем на00:54:06
переключить его, сделать его темным, так что один00:54:09
вещь, которую ты не найдешь00:54:10
обязательно с видом, но просто любой00:54:12
рамки вообще, потому что все эти00:54:14
Фреймворки основаны на JavaScript и00:54:16
когда дело доходит до JavaScript, вы можете00:54:18
сделать одно и то же в различных вариантах00:54:20
разными способами, как здесь у нас есть00:54:23
добавлена возможность переключать наши00:54:26
Тема навигационных панелей тремя разными способами00:54:29
мы использовали вычисленные свойства, которые мы00:54:32
теперь используем массивы и методы, а затем мы00:54:36
был подход, которого не было00:54:38
что-то у нас просто было несколько сложное00:54:41
выражение внутри нашего шаблона и так00:54:43
точно так же, как JavaScript, где у нас есть00:54:45
несколько разных способов, которые мы можем сделать00:54:47
то же самое только потому, что мы00:54:49
иметь разные способы не обязательно00:54:51
означает, что один способ лучше другого00:54:53
все сводится к00:54:56
ситуацию и что имеет смысл00:55:00
ты наше приложение очень простое, но оно00:55:03
также становимся немного непослушными, потому что мы00:55:06
иметь весь этот код просто как бы00:55:08
собраны вместе, и если бы мы нашли время00:55:10
чтобы изучить это приложение, мы бы00:55:12
по сути, находим две разные части, которые мы00:55:15
была бы панель навигации, и тогда мы бы00:55:18
есть контент, и если ты запомнишь00:55:20
всякий раз, когда мы начинали это путешествие, мы видели00:55:22
мы по сути разделили этих двоих00:55:25
у нас было два приложения для просмотра одно00:55:28
для панели навигации и один для контента00:55:31
на самом деле это действительно не имеет смысла00:55:33
иметь два отдельных приложения00:55:35
потому что они каким-то образом связаны00:55:39
они используют те же данные, по крайней мере, что и00:55:42
насколько активная страница и страницы сейчас00:55:46
однако тема и элементы темы изменения00:55:50
специфичны для навигационной панели, поэтому она по-прежнему00:55:53
имеет смысл разделить эти два понятия00:55:56
кусочки, но мы не хотим создавать00:55:58
вместо этого мы будем использовать различные приложения00:56:01
используйте так называемые компоненты, и вы00:56:04
можно думать о компоненте вроде00:56:06
небольшое мини-приложение внутри00:56:09
более крупное приложение заключается в том, что мы можем00:56:11
упростить написание наших приложений00:56:14
и поддерживать, но это также и для того, чтобы мы00:56:17
может извлечь функциональность в меньший00:56:21
деталь, специально предназначенная для этого00:56:23
функциональность, такая как, например, навигация00:56:25
bar может быть отдельным компонентом и00:56:29
будет нести ответственность за любые действия00:56:31
навигационная панель делает и только то, что навигационная панель00:56:34
делает это в этом уроке, который мы собираемся сделать00:56:37
создать компонент для отображения00:56:39
Информация о странице, потому что это даст00:56:41
нам возможность поговорить о многом00:56:44
основ, чтобы в следующем00:56:47
урок всякий раз, когда мы создаем компонент00:56:49
что касается панели навигации, мы можем заняться еще чем-нибудь00:56:53
сложные темы, поэтому мы хотим создать00:56:57
компонент для нашего контента первый00:56:59
нам нужно создать переменную00:57:02
для нашего приложения, потому что нам нужно00:57:04
ссылку на наше приложение, чтобы00:57:07
создайте компонент, и нам нужно сделать00:57:09
что прежде чем мы установим это, мы собираемся00:57:12
разделить их на два утверждения, чтобы00:57:14
что мы создадим наше приложение, а затем мы00:57:16
Смонтируйте наше приложение, и прежде чем мы смонтируем00:57:19
app, мы хотим создать наш компонент и00:57:21
мы делаем это с помощью метода, называемого компонентом00:57:23
первый аргумент, который мы передаем, — это00:57:26
строковое имя для нашего компонента теперь здесь00:57:28
некоторые соглашения, которые нам нужны00:57:30
следуйте здесь, это должно быть строчными буквами и00:57:33
если это простое слово, например страница00:57:35
тогда мы просто называем это страницей, это тоже помогает00:57:39
также не быть настоящим элементом HTML00:57:42
но это то, что меня называли страницей00:57:45
средство просмотра контента или страниц, поэтому, если у вас есть00:57:48
несколько слов, тогда вам захочется00:57:51
разделяйте их дефисом или тире00:57:54
теперь второй аргумент, который мы передали00:57:57
компонент является объектом параметров, поэтому все00:58:01
идеи и концепции, о которых мы говорили00:58:03
примерно на данный момент, такие как данные, вычисленные00:58:06
методы свойств, все это00:58:08
опции, все из которых можно использовать внутри00:58:11
компонента и опции, которую мы00:58:14
собираемся начать с называется00:58:17
шаблон, потому что помните приложение00:58:20
нужен шаблон и, как я уже упоминал,00:58:22
компонент своего рода маленький мини00:58:24
приложение внутри нашего более крупного00:58:26
приложение, поэтому мы возьмем00:58:29
разметка, которая у нас есть для отображения наших00:58:31
контент, давай вынесем это из тела00:58:33
и мы собираемся использовать это как00:58:36
шаблона для этого компонента сейчас нет00:58:38
обязательно нужен этот атрибут идентификатора, поэтому00:58:41
давай избавимся от того, что нам не нужно00:58:43
так какое-то время и так, как сейчас00:58:45
если бы мы попытались использовать это, мы бы запустили00:58:48
в ошибку, поскольку этот компонент00:58:51
пытаюсь использовать страницы из нашего00:58:54
приложение, и по умолчанию это не так00:58:56
иметь доступ к этой информации, потому что00:58:58
теперь он находится внутри своего собственного компонента, поэтому00:59:01
а сейчас давайте избавимся от того, где мы00:59:04
выводят эти данные, и давайте просто00:59:06
иметь текст-заполнитель, чтобы мы00:59:09
иметь заголовок страницы, а затем содержимое страницы00:59:12
и затем мы будем использовать этот компонент00:59:14
внутри нашего приложения, и мы делаем это00:59:17
как обычный элемент HTML, за исключением того, что00:59:21
это не HTML, это компонент представления00:59:24
Итак, у нас есть открывающий и закрывающий тег00:59:27
и всякий раз, когда мы заходим в браузер, давайте00:59:29
обновите страницу и мы увидим страницу00:59:32
заголовок и содержимое страницы, так что все работает00:59:34
все в порядке, теперь нам нужно предоставить00:59:38
информация для просмотра страниц, которую нужно сделать00:59:40
это дело, за которое он несет ответственность00:59:42
отображение заголовка и содержимого страницы так00:59:46
нам нужно передавать данные вроде того, как мы00:59:48
передавал бы данные в функцию, кроме00:59:50
ввиду этого мы используем термин «реквизит», поэтому00:59:54
компонент имеет реквизиты, в которые мы передаем данные00:59:58
и мы можем передавать данные в двух разных01:00:00
как будет выглядеть первое01:00:03
просто обычные атрибуты HTML, за исключением того, что01:00:06
они будут специфичными для этих01:00:09
компоненты, поэтому мы можем сказать, что мы бы01:00:11
есть реквизит, называемый заголовком страницы, который01:00:14
это будет простая строка, поэтому мы01:00:16
мог бы иметь такой заголовок страницы, а затем01:00:19
мы также могли бы иметь содержимое страницы и однажды01:00:22
еще раз обратите внимание, как я это печатаю01:00:24
они выглядят как обычные атрибуты HTML, поэтому01:00:28
что они все в нижнем регистре, если они01:00:30
несколько слов, они разделены01:00:32
дефисы и у меня будет содержимое страницы01:00:36
вот и давай что-нибудь другое01:00:37
так что всякий раз, когда мы просматриваем это в01:00:39
браузер, там мы увидим разницу01:00:41
Итак, у нас есть эти два реквизита, и это01:00:43
отлично, но недостаточно просто поставить01:00:46
ценности для них, мы должны их определить01:00:49
внутри нашего компонента, так что это01:00:51
еще один вариант, который мы укажем и01:00:54
это просто называется реквизит и это01:00:57
массив, содержащий имя01:00:59
реквизит, за исключением того, что здесь мы собираемся01:01:02
используйте верблюжий регистр, чтобы у нас был заголовок страницы и01:01:06
Содержимое страницы, поэтому, когда дело доходит до нашего01:01:09
разметку мы используем типичную01:01:12
атрибуты разметки, но когда дело доходит до01:01:15
Мы используем JavaScript, поэтому теперь мы01:01:19
можно использовать заголовок и содержимое страницы01:01:21
внутри нашего шаблона компонентов, поэтому01:01:23
что у нас будет заголовок страницы, а затем01:01:26
содержимое страницы и всякий раз, когда мы обновляем01:01:29
странице мы увидим наш заголовок и01:01:32
изменение контента на основе данных, которые01:01:34
мы перешли к этому реквизиту, так что это01:01:37
первый способ мы проходим просто01:01:39
строковые значения, и важно01:01:42
помните об этом различии, потому что мы можем01:01:45
также используйте директиву связывания V с нашим01:01:50
реквизит, и в этом случае мы привязываем некоторые01:01:53
Выражение JavaScript тоже, но, как вы01:01:56
знай, нам не обязательно говорить V-bind, мы можем01:01:59
просто используйте сокращение, которое представляет собой двоеточие01:02:01
поэтому в этом случае, если мы хотим использовать01:02:04
строковое значение, которое нам нужно будет окружить01:02:07
они с разделителями строк, которые в01:02:10
в этом случае это просто одинарные кавычки01:02:13
обновляем страницу и видим то же самое01:02:15
результат, но мы хотим, чтобы здесь была динамика, поэтому01:02:19
это мы отображаем заголовок и01:02:22
контент для активной страницы, так что это01:02:25
будет чем-то похоже на то, что01:02:27
у нас было раньше, за исключением того, что теперь мы01:02:29
передача этой информации как ограбление, так01:02:33
всякий раз, когда мы заходим в браузер, мы01:02:34
увидим ту же функциональность, что и01:02:36
у нас была домашняя страница о и01:02:39
контакт, это здорово, но я думаю01:02:41
что мы можем сделать это немного01:02:43
лучше, чтобы у нас был только один01:02:45
prop, что мы можем позвонить Пейджу, а затем мы01:02:48
будет проходить на страницах с индексом01:02:51
активная страница, чтобы внутри нашей01:02:54
компоненты, которые мы затем будем использовать на странице01:02:57
свойства заголовка и содержимого, поэтому всякий раз, когда01:03:00
мы используем программу просмотра страниц, это все, что мы01:03:02
должны предоставить, а затем нам просто нужно01:03:04
обновите наш компонент просмотра страниц, чтобы01:03:07
у него есть реквизит страницы, и он собирается01:03:11
отобразить заголовок страницы, а затем страницу01:03:15
содержание, поэтому просто для проверки работоспособности перейдите на01:03:18
обновил браузер все работает01:03:20
точно так же, как это было раньше и так раньше01:03:23
мы переходим к следующему уроку, давай просто01:03:25
рассмотрим ключевые моменты создания01:03:28
компоненты, потому что это важно для нас01:03:31
приложений будет полно01:03:33
компоненты, поэтому мы создаем компонент, который мы01:03:36
дайте ему имя, и этот компонент сможет01:03:39
есть варианты, один вариант — шаблон01:03:42
другой вариант называется реквизит01:03:46
по сути аргументы в пользу этого01:03:48
компонент, чтобы мы могли передавать данные в01:03:51
наши компоненты, чтобы они могли делать01:03:53
все, что им нужно сделать в случае01:03:55
этот просмотрщик страниц просто выводит01:03:58
data, поэтому у нас есть реквизит под названием page, который мы01:04:02
передать активную страницу в качестве реквизита страницы01:04:06
используя V-связку, чтобы внутри01:04:09
компоненты, которые мы можем использовать как объект01:04:11
для вывода свойства заголовка страницы и01:04:14
свойство контента и так далее01:04:16
уроке мы создадим компонент для01:04:19
нашу панель навигации на предыдущем уроке мы01:04:22
извлек функциональность для01:04:23
отображение информации о странице, которая01:04:26
название и содержание сами по себе01:04:29
компонент, называемый просмотрщиком страниц, у него есть01:04:32
свойство, называемое страницей, которое мы передаем на странице01:04:35
объект, чтобы он мог использовать01:04:38
соответствующие свойства для отображения этого01:04:39
информация, поэтому теперь мы по сути хотим01:04:42
сделать то же самое для нашей навигации и так далее01:04:45
давайте просто начнем с концепций01:04:47
о котором мы говорили в предыдущем01:04:49
урок, который я собираюсь начать с вырезания01:04:51
разметка нашей навигационной панели, чтобы мы могли01:04:54
продолжайте и определите этот компонент и01:04:56
затем используйте эту разметку в качестве шаблона01:04:59
давайте назовем это просто панелью навигации, а затем01:05:02
шаблон будет использовать обратные кавычки01:05:05
однако, чтобы разграничить эту строку01:05:09
мы уже используем JavaScript01:05:13
строки шаблона внутри этого шаблона01:05:16
это значит, что нам нужно будет бежать01:05:19
те, которые достаточно просто сделать, но01:05:21
это боль, и это одна из01:05:23
причины, почему, когда вы начинаете увлекаться01:05:25
компоненты, это имеет большой смысл01:05:28
чтобы начать использовать инструменты сборки и Tool01:05:31
цепочки, потому что когда вы начинаете использовать jsx01:05:35
тебе не нужно делать ничего подобного01:05:38
но, к счастью, их не так много01:05:40
побега, что нам нужно сделать здесь, так01:05:43
вот наш шаблон, и поскольку мы01:05:44
здесь мы можем пойти дальше и определить01:05:46
реквизит, который понадобится этой навигационной панели01:05:48
потому что ему нужны страницы, чтобы он01:05:51
может генерировать элементы a для01:05:54
ссылки, ему также нужна активная страница, поэтому01:05:58
что он может правильно применять активный01:06:01
CSS-класс, давайте определим эти реквизиты.01:06:05
теперь технически мы можем назвать это01:06:07
все, что мы хотим, потому что помни01:06:09
этот реквизит очень похож на параметры01:06:11
в функции это переменные, которые01:06:14
мы будем использовать внутри нашего шаблона01:06:16
пули, однако, если мы их назовем01:06:19
что-то кроме страниц и активных01:06:21
страница, то нам нужно будет сделать01:06:23
необходимые изменения внутри нашего шаблона01:06:25
и я не хочу этого делать, и вот мы01:06:28
иди, у нас есть навигационная панель, по крайней мере,01:06:31
начало нашей навигационной панели, так что давайте перейдем к01:06:34
тело или на разметку нашего01:06:37
приложение и давайте воспользуемся нашей навигационной панелью01:06:40
и мы продолжим и переплетем страницы01:06:44
в массив страниц приложений, а также01:06:49
поскольку активная страница сейчас это очень01:06:53
важно, потому что если мы не свяжем01:06:57
активная страница, то мы столкнемся с01:06:59
в первую очередь некоторые проблемы, если мы этого не сделаем01:07:02
тогда мы передаем строку01:07:05
буквальная активная страница, которая, конечно же,01:07:07
вообще не получится, но давайте01:07:11
просто представьте, что, не привязывая активный01:07:15
страница, мы все еще используем это числовое01:07:19
значение, которое инициализируется как ноль, поэтому01:07:21
следует помнить одну вещь: потоки данных01:07:24
от родителя к ребенку, так что в этом01:07:28
конкретный случай, когда приложение является родительским01:07:30
дочерний элемент - это компонент навигационной панели, поэтому01:07:34
активная страница данных, которая инициализируется как01:07:38
ноль передается в панель навигации, поэтому01:07:42
в следующий раз, когда эта активная страница будет обновлена01:07:44
это изменение не будет принято01:07:48
вплоть до панели навигации, потому что она не привязана01:07:51
поэтому, если активная страница станет единой, мы01:07:55
по сути передал ему значение 001:07:58
и оно останется нулевым, так что если хотите01:08:01
дочерние компоненты для обновления на основе01:08:04
на основании данных, которые были предоставлены01:08:07
тогда вам нужно привязать данные к этим01:08:10
реквизит, поэтому мы хотим, чтобы активная страница была привязана к01:08:14
на активной странице приложений теперь есть01:08:17
еще пара вещей, которые нам нужны01:08:19
сделать тему специфичной для панели навигации01:08:22
так что мы можем убрать это из01:08:24
приложение, и мы можем определить это как01:08:27
часть данных для навигационной панели, которая01:08:30
это похоже на опцию данных в01:08:35
приложение, это функция, которая возвращает01:08:37
объект, поэтому мы определим тему01:08:41
то же самое верно и для наших методов, потому что01:08:42
тема изменения действительно специфична только для01:08:46
панель навигации, так что давай вырежем ее01:08:47
полностью, и давайте добавим эти методы01:08:51
опция для компонента, так что с этим01:08:54
готово, давайте зайдем в браузер, давайте01:08:55
обнови страницу, сейчас посмотрим01:08:58
этот переключатель работает, это прекрасно01:09:00
и я собираюсь сделать его темным, потому что это01:09:02
так легче увидеть, что происходит01:09:04
вот и я нажму на тему01:09:06
ничего не происходит, я нажму01:09:08
контакт, ничего не происходит собираюсь нажать01:09:11
дома и конечно дома уже01:09:13
загружается, но на самом деле ничего не происходит и01:09:15
причина очень проста и это01:09:17
потому что мы не обновляем активную страницу01:09:21
теперь, если мы посмотрим на шаблон для01:09:24
панель навигации всякий раз, когда мы нажимаем на одну из них01:09:26
ссылки там активная страница равна01:09:29
индекс и активные страницы предоставляются как01:09:32
реквизит, но вот в чем суть реквизита01:09:36
только для чтения, поэтому мы не можем изменить их значение01:09:39
теперь внутри компонента, который делает01:09:42
идеальный смысл, когда ты начинаешь думать01:09:44
о том, как передаются данные, как я уже говорил01:09:46
передается от родителя к дочернему элементу, поэтому, если бы мы были01:09:50
изменить значение свойства внутри01:09:53
ребенок, родитель не узнает об этом01:09:56
значение изменилось, поскольку потоки данных01:09:59
от родителя к ребенку, поэтому01:10:02
вопрос в том, как нам сделать01:10:04
наоборот, как ребенок может уведомить родителя01:10:08
что что-то меняется ну это очень01:10:11
просто мы используем событие или, скорее, мы используем01:10:14
что такое такое событие, как01:10:17
например, мы говорили о клике01:10:18
событие до того места, где мы говорим по клику01:10:21
и тогда у нас есть код, который будет01:10:23
хорошо выполнить в данном конкретном случае01:10:25
щелчок - это, по сути, опора, это01:10:28
специальный реквизит, потому что это событие, но01:10:31
по сути мы можем сделать то же самое, так что01:10:33
что у нас есть реквизит, который будет выполняться01:10:36
и мы можем назвать это просто навигационной ссылкой01:10:41
щелкните, чтобы у нас была функция01:10:43
который примет индекс, чтобы мы01:10:47
сейчас бы изменил активную страницу01:10:49
помните, что поскольку это панель навигации01:10:52
компоненты, которые мы сейчас находимся внутри приложения01:10:55
мы не внутри навигационной панели, так что это01:10:58
код здесь специфичен для01:11:01
приложение, но все, что нам нужно сделать, это установить01:11:03
активная страница равна индексу, и мы01:11:07
нужно сделать активным верхний регистр p01:11:10
страница, так что она находится внутри наших компонентов01:11:13
все, что нам нужно сделать, это изменить место, где мы01:11:15
нажмите на элемент, который нам нужен01:11:18
прежде всего нам нужно сделать две вещи01:11:20
скажем, что теперь у нас есть реквизит под названием nav01:11:22
щелкните ссылку и что это функция01:11:25
это будет выполнено, и мы будем01:11:29
передать индекс, чтобы он работал очень похоже01:11:33
событие, поэтому родитель предоставляет01:11:36
функция для навигации по ссылке нажмите, что01:11:39
ребенок собирается выполнить это собирается01:11:42
передать индекс обратно, чтобы он оказался внутри01:11:45
приложение, которое мы можем обновить, активно01:11:48
страницу к этому значению индекса, поэтому с этим01:11:51
готово, мы можем вернуться в браузер, который мы01:11:52
можно обновить, давайте переключим это на черный01:11:54
чтобы мы могли видеть и собираемся01:11:56
увидеть, что это работает именно так, как должно01:11:59
поэтому дом, конечно, является значением по умолчанию, которое мы видим01:12:03
что мы также видим, что дом активен01:12:05
всякий раз, когда мы нажимаем о доме, нет01:12:07
дольше активен о активен тогда о01:12:11
конечно, мы видим контент примерно01:12:13
всякий раз, когда мы нажимаем на контакт, я имею в виду, что01:12:16
ненавижу делать здесь пьесу за пьесой, но это01:12:18
это именно та функциональность, которую мы хотели бы01:12:21
ожидаем, но теперь у нас есть01:12:24
приложение разбито на два разных01:12:27
компоненты, отвечающие за01:12:29
свои собственные функции просмотра страниц01:12:32
отвечает за отображение Страницы01:12:35
информация, за которую отвечает панель навигации01:12:38
для создания навигационной панели для отслеживания01:12:41
темы, а также уведомить01:12:45
приложение, когда пользователь нажимает на01:12:47
ссылка и так на следующем уроке мы01:12:49
собираюсь начать смотреть на вид01:12:52
CLI, который представляет собой цепочку инструментов, которая делает01:12:55
проще создавать приложения просмотра и01:12:59
просмотреть компоненты01:13:00
с начала этого курса мы01:13:02
использовал Nothing But The View Library, чтобы пойти01:13:05
над основами, и я хотел сделать01:13:07
это потому, что я хочу, чтобы ты знал, что ты01:13:10
может создавать приложения просмотра, используя только01:13:13
в библиотеке вам не нужны цепочки инструментов01:13:15
вам не нужны инструменты сборки, которые вам не нужны01:13:17
нужно что-нибудь, кроме библиотеки просмотра01:13:20
текстовый редактор и конечно браузер01:13:22
однако у нас есть цепочки инструментов и мы создаем01:13:25
инструменты именно потому, что они делают наши01:13:28
жить разработчикам проще и пока01:13:30
они чрезвычайно полезны для строительства01:13:33
большие приложения, вы можете использовать эти01:13:36
цепочки инструментов для сборки любого размера01:13:38
приложение, которое я всегда беру за сборку01:13:41
инструменты только потому, что они делают нашу жизнь01:13:44
проще, поэтому мы собираемся сделать01:13:46
установите то, что называется View CLI CLI01:13:49
означает интерфейс командной строки, и это01:13:51
дает нам все необходимые инструменты для01:13:54
создавая наши приложения просмотра, но мы01:13:57
также можно использовать такие функции, как jsx, которые01:14:00
это Javascript и XML, а также новее01:14:03
функции JavaScript, поэтому вещи, которые01:14:05
не поддерживаются браузером изначально01:14:07
на самом деле не имеет значения, потому что сборка01:14:09
инструменты справятся с этим за нас01:14:12
и перевести это в то, что01:14:14
браузер понимает, но для того, чтобы01:14:16
установите интерфейс командной строки представления, который вам нужен node.js01:14:19
и если у тебя этого нет, то сейчас самое время01:14:22
идеальное время, чтобы сделать это, потому что сейчас01:14:24
не используется только для просмотра, не используется01:14:27
просто ради реакции или типа того, вот как01:14:30
мы управляем нашим узлом зависимостей и многим другим01:14:33
в частности, менеджер пакетов узлов01:14:35
просто часть современной веб-разработки, так что01:14:38
если у тебя его нет, то сейчас самое время01:14:40
получите его, просто зайдите на nodejs.org и01:14:43
скачать версию LTS версию01:14:46
число не обязательно ничего значит01:14:48
с нашей точки зрения сейчас, если бы мы были01:14:51
собираюсь создавать приложения Node, да01:14:54
номер версии имеет значение, но это01:14:56
не тот случай, просто поищи LTS, вот это01:14:59
долгосрочная поддержка и режим загрузки и01:15:01
установить его, это просто01:15:03
при установке просто возьмите настройки по умолчанию и01:15:05
как только это будет сделано, ты захочешь пойти01:15:07
командную строку, потому что npm — это01:15:10
инструмент командной строки, и мы хотим установить01:15:13
CLI представления, чтобы он был на виду, затем косая черта01:15:18
CLI, и мы хотим установить это глобально01:15:21
теперь причина, по которой мы хотим установить01:15:23
это глобально, чтобы мы могли использовать01:15:26
просмотреть команду независимо от того, что01:15:28
каталог, в котором мы находимся, и мы будем использовать01:15:31
команда просмотра для создания нашего первого проекта01:15:34
так что давайте назовем этот вид спа-салоном для начала01:15:38
одностраничное приложение «Мы»01:15:40
по сути собираюсь воссоздать страницу01:15:42
что мы строили в прошлом01:15:44
несколько уроков, но мы собираемся использовать01:15:47
просмотрите CLI, и это даст нам01:15:49
несколько вариантов, которые нам нужно будет пройти01:15:51
сейчас у меня уже есть несколько пресетов01:15:54
сделано, потому что, как я уже сказал, я использую view так01:15:57
давайте перейдем к выбору вручную01:15:59
функции и мы хотим выбрать Babel01:16:03
потому что это компилятор, который позволяет01:16:06
нам использовать новые функции JavaScript в01:16:09
браузеры, которые его не поддерживают Babel01:16:11
переведет это на JavaScript, который01:16:13
браузер понимает, поэтому мы делаем01:16:15
хотим Babel, и если бы мы хотели использовать01:16:16
машинописный текст, мы могли бы сделать и это, мы01:16:18
разве мы не собираемся использовать обычный01:16:20
JavaScript, сейчас я собираюсь снять флажок01:16:23
формат линтера слэша только потому, что01:16:26
добавляет немного дополнительных вещей, и я01:16:29
хочу, чтобы все было красиво, аккуратно и чисто01:16:31
сейчас, конечно, в реальном проекте я бы01:16:34
наверное, проверь линтер только потому, что01:16:36
это хороший инструмент, но он работает01:16:39
также потребуется некоторое время на обработку, и поскольку01:16:42
время имеет решающее значение, мы собираемся01:16:44
оставь это в покое, тогда Бабель действительно станет01:16:46
единственное, что я хочу использовать прямо сейчас01:16:48
так что давайте нажмем Enter, чтобы продолжить, мы дошли до01:16:51
выберите последнюю версию vue.js01:16:53
это 3.x, а затем мы можем выбрать, как нам01:16:57
хотим, чтобы наша конфигурация была выложена, не так ли?01:17:00
хотите, чтобы они были в выделенных файлах конфигурации или01:17:03
внутри package.json мы хотим01:17:05
выделенная конфигурация, ну, я хочу выделенную01:17:08
конфигурационные файлы, и мы можем сохранить их как01:17:10
предустановлено, что нет, и поэтому это будет01:17:13
построить наш проект и когда проект01:17:15
готов, мы хотим записать компакт-диск в этот новый01:17:19
папку, а затем мы запустим наш код01:17:21
редактор, чтобы мы могли взглянуть на01:17:24
проект, потому что это будет очень01:17:26
отличается от одного HTML-файла, который01:17:30
мы до сих пор работали с01:17:32
первой будет эта общая папка01:17:34
вот это хорошо, это общая папка01:17:37
это то, что увидит конечный пользователь, если01:17:40
они заходят в наше приложение, это тоже01:17:43
место, куда мы можем поместить наши статические01:17:45
файлы, такие как изображения и тому подобное01:17:47
однако есть альтернативы этому01:17:50
подход, который это то, что мы будем01:17:51
поговорим об этом позже, сейчас ты01:17:54
видите, что есть два файла, вот01:17:55
любимый значок, а еще есть01:17:57
index.html, и его не так уж и много01:18:00
здесь, внутри HTML-файла, но сделайте01:18:03
обратите внимание, что есть этот div с идентификатором01:18:05
приложения здесь находится наше приложение01:18:08
будет смонтировано, теперь мы можем изменить01:18:10
это потому, что у нас есть полное и тотальное01:18:12
контроль над нашим приложением, но это01:18:16
соглашение, мы просто будем придерживаться этого01:18:18
и обратите внимание, что есть еще это01:18:21
комментарий, в котором говорится, что построенные файлы будут01:18:23
автоматически вводится сейчас для01:18:26
подавляющее большинство времени в этом курсе мы01:18:28
будем использовать разработки01:18:31
режим, который по сути будет строить01:18:33
наше приложение по мере его разработки и любые01:18:36
изменение, которое мы вносим, приведет к01:18:38
автоматически отражаться внутри01:18:40
браузер, поэтому те файлы, которые находятся01:18:42
будут построены за кулисами01:18:45
введено здесь, чтобы нам не пришлось беспокоиться01:18:48
обо всем этом это только что сделано01:18:50
автоматически для нас, так что это01:18:52
общая папка, но есть еще01:18:53
исходная папка, и это папка01:18:55
что наш исходный код живет записью01:18:59
точка нашего приложения — это main.js01:19:03
вы увидите, что приложение создания01:19:06
метод импортируется в этот файл01:19:09
из библиотеки просмотра это также01:19:12
импорт этой штуки из файла01:19:15
называется app.view. Это компонент.01:19:18
который мы рассмотрим здесь через минуту01:19:20
но обратите внимание, что приложение01:19:22
компонент приложения создается01:19:26
используется как приложение и находится в стадии разработки01:19:29
смонтирован в элементе с идентификатором01:19:33
приложение, так что давайте посмотрим на это01:19:35
app.view и это будет выглядеть очень01:19:38
отличается от того, к чему мы привыкли01:19:40
однако после того, как я объясню эти вещи01:19:42
тогда ты узнаешь, о, ладно01:19:45
вот что это такое, и вот у нас есть01:19:48
шаблон, если мы посмотрим на файл01:19:51
что мы работали с index.html01:19:54
ты знаешь, я имел в виду разметку01:19:56
это было внутри нашего приложения как01:19:58
шаблон, это именно то, что мы01:20:01
есть здесь, в этом новом приложении, так что01:20:04
этот шаблон — разметка, которую вы увидите01:20:07
что есть элемент изображения, который01:20:09
используется, вы также увидите, что есть01:20:11
этот привет, мир, который не является HTML01:20:14
элемент, однако он импортируется01:20:17
из другого файла, который имеет представление01:20:19
расширение, это еще один компонент и01:20:22
затем есть еще несколько вещей, таких как01:20:24
объект, который экспортируется и01:20:28
тогда здесь есть CSS, не волнуйся01:20:31
обо всем этом мы собираемся поговорить01:20:33
все эти вещи, но если мы возьмем01:20:35
посмотри на привет, мир, в который мы собираемся01:20:36
увидеть что-то, что выглядит намного больше01:20:38
знакомо, поэтому, если мы посмотрим на шаблоны01:20:41
мы видим больше элементов HTML, чем что-либо еще01:20:44
иначе, и если мы прокрутим вниз, мы01:20:47
собираюсь увидеть JavaScript для этого01:20:51
компонент, у него есть объект, который имеет01:20:54
вариант реквизита и, конечно же,01:20:56
еще немного CSS, вот этот объект01:20:59
мы видим, что это экспортируется01:21:01
это объект опций, который мы использовали01:21:04
используя все, о чем мы говорили01:21:06
все основы по-прежнему01:21:07
здесь просто немного по-другому01:21:09
местах и потому что они находятся в разных01:21:12
местах, это делает его намного проще01:21:14
разрабатывать и поддерживать эти приложения01:21:16
поэтому на следующем уроке мы собираемся01:21:19
начнём переводить наш существующий сингл01:21:22
страничное приложение, которое использует только The01:21:24
Просмотр библиотеки в другом приложении01:21:27
который использует цепочку инструментов и инструменты сборки01:21:31
когда я создаю новый проект первым01:21:33
что мне нравится делать, так это удалять, ну нет01:21:36
обязательно удалите все, но01:21:38
почти все внутри01:21:40
исходная папка, потому что мне нравится начинать01:21:42
с нуля, таким образом я знаю, что мой01:21:44
приложения имеют только то, что01:21:46
им нужно и плюс это хорошая практика01:21:49
потому что программирование — это навык и просто01:21:52
как и любой навык, его полезно практиковать, поэтому01:21:54
Я собираюсь удалить01:21:57
main.js.view я тоже собираюсь удалить01:21:59
привет мир внутри компонентов01:22:02
папку, а также файл logo.png внутри01:22:06
Активы Теперь кое-что об источнике.01:22:09
папка - это то, что внутри нее01:22:10
по существу произволен, поэтому это01:22:13
папка компонентов, на самом деле это не так01:22:15
дело в том, что мы можем называть это как захотим01:22:16
нам даже не обязательно это иметь, если мы01:22:18
не хочу, поэтому мы можем удалить01:22:20
все внутри исходной папки01:22:22
единственное, что мы абсолютно01:22:24
безусловно, нужен файл с именем01:22:27
main.js, потому что это точка входа01:22:31
нашего приложения теперь мы можем изменить01:22:33
название этого, но нам также придется изменить01:22:35
конфигурация нашего проекта и01:22:38
на самом деле нет причин делать это01:22:40
большинство проектов, поэтому мы просто собираемся01:22:42
оставьте его как main.js и первым делом01:22:45
мы собираемся импортировать и создать приложение01:22:48
с поля зрения, так что это даст нам01:22:50
прямой доступ к функции создания приложения01:22:53
поэтому нам не нужно говорить «просмотреть точку создать»01:22:55
приложение или что-то в этом роде, мы просто звоним01:22:58
создать приложение, и это похоже на01:23:00
метод создания приложения, который мы использовали01:23:03
прежде чем мы передадим объект, который01:23:05
содержит опции для нашего приложения01:23:08
а затем мы хотим смонтировать его куда угодно01:23:11
элемент, которому я верю, тот, который мы хотим01:23:14
есть идентификатор приложения, теперь одно, если хочешь01:23:17
помните из первой версии этого01:23:20
приложение, нам пришлось создать приложение01:23:23
объект, чтобы мы могли создать наш01:23:25
компоненты с использованием метода компонента01:23:27
и затем мы могли бы смонтировать приложение на01:23:30
элемент, нам не нужно это делать, используя01:23:33
цепочку инструментов, потому что, когда мы создаем нашу01:23:35
компоненты, которые мы можем определить01:23:38
компоненты, которые мы там используем, которые01:23:40
вы увидите всякий раз, когда мы создадим наше приложение01:23:43
компонент компонент приложения для нашего01:23:45
приложение по сути будет01:23:48
объект параметров, который мы передали01:23:51
всякий раз, когда мы вызывали создание приложения, но это01:23:53
более того, потому что помните, что мы01:23:55
также есть шаблон и шаблон01:23:57
для нашего приложения есть панель навигации и01:24:00
средство просмотра возраста страницы, так что я одна вещь01:24:02
собираюсь сделать, это просто пойти и схватить01:24:04
этот объект всякий раз, когда мы создаем это01:24:06
приложение, потому что оно нам понадобится01:24:10
давайте создадим новый файл и назовем его01:24:13
app.view, это наше соглашение01:24:16
компонент, который служит контейнером01:24:18
для нашего приложения мы обычно вызываем01:24:21
это app.view и нам нужен шаблон01:24:23
а сейчас давайте просто выпьем немного01:24:26
простой текст, и тогда у нас будет наш01:24:29
JavaScript теперь код Visual Studio01:24:31
автоматически вставил это в этот файл01:24:34
и я не хочу этого, вместо этого мы хотим01:24:37
экспортируйте объект по умолчанию, содержащий01:24:40
параметры, которые нужны нашему приложению01:24:43
это данные, в которых у нас есть01:24:46
объект, имеющий свойство активной страницы01:24:49
а также наши страницы, которые сейчас мы собираемся01:24:52
добавьте сюда еще немного, но давайте сначала01:24:55
все импортируют этот компонент приложения внутрь01:24:57
app.js, и мы собираемся запустить его просто01:25:01
чтобы посмотреть, все ли будет работать01:25:02
прямо сейчас, поэтому мы хотим импортировать приложение из01:25:06
app.view, и мы собираемся использовать это приложение01:25:09
что является объектом, потому что это то, что01:25:12
мы экспортировали из этого файла, мы01:25:14
экспортируем этот объект сюда, и мы01:25:16
собираюсь использовать это как объект параметров01:25:19
для нашего приложения, так что теперь давайте перейдем к01:25:21
командную строку, и мы хотим использовать01:25:23
просмотрите команду, и мы последуем за этим01:25:26
просто послужи, это сослужит службу01:25:29
наше приложение для целей разработки01:25:31
так что это займет наш код, это01:25:33
собираюсь превратить это в беговой процесс01:25:35
приложение, которое мы сможем просмотреть01:25:37
в браузере и он будет смотреть01:25:39
для изменений в наших файлах и каждый раз01:25:42
что мы вносим изменения в наши файлы, это01:25:44
будем автоматически обновлять наши01:25:46
приложение, работающее в01:25:48
браузер, и он сообщает нам, где он находится01:25:49
запущен локальный хост 8080. Итак, давайте откроем01:25:52
это в браузере и мы увидим01:25:55
просто какой-то простой текст, который мы01:25:58
ожидал увидеть, потому что это все01:25:59
что у нас есть прямо сейчас, так что давай вернемся01:26:01
в наше приложение, и мы хотим создать01:26:05
наша панель навигации и программа просмотра страниц01:26:08
компоненты, и я собираюсь создать их01:26:10
внутри папки компонентов один раз01:26:12
снова папка компонентов01:26:14
совершенно произвольно, нет ничего01:26:15
особенно в этом, мы могли бы переименовать его, мы01:26:17
можем удалить его, и мы сможем организовать нашу01:26:19
проект, как бы мы ни хотели, но это помогает01:26:21
иметь какую-то организацию и01:26:23
Я назову этот первый файл01:26:25
navbar.view, то мы собираемся создать01:26:27
другой файл, который мы назовем01:26:30
просмотрщик страниц Dot View и так же, как01:26:33
компонент приложения, нам также нужен шаблон, который нам также нужен01:26:36
нужен элемент сценария и начнем01:26:39
с помощью нашего средства просмотра страниц, потому что это01:26:42
более простой вариант, и мы собираемся перейти к01:26:45
наше старое приложение, которое мы собираемся01:26:48
скопируйте объект параметров, который у нас есть для01:26:51
и мы собираемся вставить это внутрь01:26:54
скрипт или JavaScript теперь наш01:26:57
шаблон, который мы можем оставить здесь, если захотим01:26:59
однако на самом деле нет причин это делать01:27:01
это потому, что мы действительно можем определить наши01:27:03
шаблон внутри элемента шаблона01:27:05
так что давай просто вырежем это и вставим это01:27:08
внутри шаблона и теперь это так01:27:11
гораздо легче работать, хотя с01:27:13
этот конкретный компонент шаблон01:27:15
было просто начать с навигационной панели01:27:18
тот, где нам пришлось сбежать01:27:20
но прежде чем мы перейдем к панели навигации, давайте01:27:21
зайдите в наш app.view, прежде чем экспортировать наши01:27:25
объект options, который мы хотим импортировать01:27:29
компонент просмотра страниц, который взят из нашего01:27:32
папка компонентов, файл называется01:27:35
просмотрщик страниц Dot View и мы хотим рассказать01:27:38
этот компонент приложения, который мы хотим использовать01:27:41
наш просмотрщик страниц, и мы делаем это с помощью01:27:44
Опция компонентов: это объект, который01:27:47
содержит компоненты, которые мы используем01:27:49
внутри этого компонента, поэтому у нас есть страница01:27:53
просмотрщик, мы можем использовать его в нашем шаблоне01:27:55
но, конечно, сам по себе просмотрщик страниц01:27:58
это бесполезно, нам еще нужна навигация01:28:01
бар, так что давайте продолжим и вернемся к нашему01:28:04
индексный HTML, возьмем все варианты01:28:07
объект, который мы использовали для панели навигации01:28:10
компонент, и мы собираемся вставить его01:28:12
в JavaScript, чтобы мы были01:28:15
экспортируем этот объект, но мы снова01:28:17
у нас есть шаблон, который мы хотим вырезать01:28:19
из этого объекта параметров мы вставим01:28:22
шаблон внутри шаблона01:28:24
элемент, но нам нужно сделать некоторые01:28:26
изменения для одного, от которого нам нужно избавиться01:28:28
все сбежавшие персонажи, которые01:28:31
к счастью, их было не так много, но01:28:34
нам нужно обязательно удалить01:28:36
правильные, и тогда у нас тоже есть это01:28:39
внутри заголовка здесь, поэтому мы будем01:28:41
удали их, все остальное должно работать01:28:44
давайте удалим шаблоны здесь и так01:28:47
затем мы хотим импортировать панель навигации01:28:49
внутри app.v, давайте просто скопируем и01:28:53
вставьте этот код туда, куда мы импортируем01:28:55
навбар из компонентов navbar.view мы01:28:59
используют панель навигации внутри app.view, поэтому01:29:02
нам нужно добавить это к нашим компонентам01:29:05
и тогда нам просто нужно использовать01:29:07
шаблон из index.html, так что давайте возьмем01:29:11
панель навигации и просмотр страницы, давайте вставим их01:29:14
внутри шаблона нашего приложения и01:29:16
посмотрим, сработает ли это, вернемся к01:29:18
в браузере мы увидим, что наш стиль01:29:21
работает не очень хорошо, так что это одно01:29:23
что нам нужно, давайте перейдем к index.html01:29:26
давайте возьмем этот элемент ссылки, который01:29:29
ссылается на загрузочный CSS, и мы01:29:32
собираюсь поместить это в наш индекс01:29:35
HTML теперь, поскольку мы используем npm, мы можем01:29:39
на самом деле установите загрузчик как01:29:41
зависимость для нашего проекта, а затем мы01:29:43
можете импортировать это в наше приложение01:29:45
это то, что мы рассмотрим01:29:47
но сейчас мы просто собираемся01:29:49
иди по этому маршруту, чтобы всякий раз, когда мы вернемся01:29:52
в браузере все наши стили01:29:54
вот и настал момент истины01:29:56
всякий раз, когда мы нажимаем кнопку переключения01:29:58
мы видим, что стиль навигационной панели01:30:02
переключается, если мы нажимаем на одну из ссылок01:30:05
для информации или контакта мы видим это01:30:08
это действительно работает так же, как и раньше01:30:10
теперь также обратите внимание, что значок просмотра для01:30:13
инструменты разработчика горят, что означает01:30:16
что он распознает, что представление работает01:30:19
в этом приложении, и мы должны иметь01:30:22
доступ к инструментам разработчика, так что я01:30:24
собираюсь их подтянуть, это не получится01:30:25
покажем, ну, это покажет01:30:27
по умолчанию иногда приходится нажимать01:30:29
знак плюс для дополнительных инструментов, а затем01:30:31
выберите вид, но вот он, и мы можем01:30:34
взгляните на наше приложение в01:30:37
инструменты разработчика, чтобы вы могли видеть, что мы01:30:39
начните с приложения, которое является контейнером для01:30:42
наше приложение, затем мы видим панель навигации01:30:45
компонент, который используется, а также01:30:47
средство просмотра страниц и всякий раз, когда мы выбираем01:30:50
одно из них я выберу приложение01:30:52
с правой стороны вы можете видеть01:30:54
что у нас есть параметры данных, поэтому у нас есть01:30:57
активную страницу, а затем мы видим01:30:59
массив страниц, теперь все в порядке, если мы нажмем на одну01:31:03
из этих ссылок давайте просто перейдем к контакту01:31:05
вы увидите эту активную страницу01:31:07
автоматически обновляется, поэтому любые изменения, которые01:31:09
мы делаем через наше приложение01:31:11
автоматически появляться в данных01:31:14
и состояние нашего приложения мы можем01:31:17
также отредактируйте это значение, чтобы прямо сейчас01:31:20
Страница «О программе» активна, если мы изменим это01:31:22
до нуля, а затем отправьте это изменение, которое мы01:31:26
вижу, что наше приложение обновляется01:31:28
соответственно и причина очень01:31:30
просто, потому что view следит за01:31:32
изменения не только на активной странице, но и01:31:36
в массив страниц, поэтому, если они есть01:31:37
изменить эти значения или объекты, это01:31:40
собираюсь автоматически обновить Дом01:31:43
и это дает нам возможность легко01:31:46
отладка, если мы столкнемся с какими-либо проблемами, если01:31:49
компонент не обязательно выполняет рендеринг01:31:51
правильно, по какой-то причине данные не01:31:53
правильно стекая вниз, мы можем использовать01:31:56
инструменты разработчика для устранения этих проблем01:31:58
делает нашу жизнь намного проще, поэтому мы01:32:01
идите, мы воссоздали приложение01:32:03
над которым мы работаем, используя01:32:06
просмотреть цепочку инструментов, это требует некоторых01:32:09
дополнительный код, однако теперь наше приложение01:32:11
гораздо проще разрабатывать и01:32:13
поддерживать, потому что все есть01:32:15
теперь разделен на отдельные файлы01:32:19
что мы используем цепочку инструментов для работы01:32:21
с помощью и создадим наше приложение, которое нам нужно01:32:23
говорить о стиле, потому что так01:32:25
мы работаем с стилем импорта, изменится01:32:28
хотя бы немного, насколько01:32:30
к чему мы привыкли сейчас все что01:32:32
мы говорили до сих пор о01:32:34
применение классов CSS к элементам01:32:37
все еще в силе, это не меняет того, что я01:32:40
хочу обсудить в первую очередь то, как мы01:32:42
добавить CSS из внешнего источника01:32:45
как например в предыдущем уроке01:32:47
Я добавил компакт-диск для начальной загрузки внутри01:32:51
index.html, и пока мы можем это сделать01:32:54
на самом деле то, что я хочу сделать, это взять это01:32:57
нет, потому что я хочу установить загрузчик01:33:00
в этом проекте, а затем импортируйте CSS01:33:04
файл в приложение таким образом, так что01:33:06
вот как это выглядит сейчас01:33:07
без CSS из начальной загрузки, какой из01:33:10
конечно, это то, чего мы ожидаем и01:33:12
тогда я хочу перейти в командную строку01:33:13
и мы установим загрузчик и мы01:33:17
собираюсь сохранить это как зависимость01:33:19
и причина, по которой мы хотим это сохранить01:33:22
заключается в том, что всякий раз, когда нам нужно установить01:33:25
все сначала, все, что нам нужно01:33:28
сделать, это сказать npm install, а затем01:33:30
все, включая бутстрап, есть01:33:32
установлено, так что все готово, теперь давайте01:33:35
вернемся к нашему коду, и я собираюсь01:33:39
откройте файл main.js, потому что это01:33:42
куда мы будем импортировать этот загрузочный CSS01:33:46
если ты никогда не делал этого раньше, это01:33:48
это будет выглядеть довольно странно, но что мы01:33:50
хочу сделать, это импортировать из узла01:33:53
подчеркните модуль сейчас, если это не так01:33:55
вообще знаком с узлом, и это01:33:58
твой первый опыт во всем этом01:34:00
о нашем проекте установлен внутри01:34:04
этот узел подчеркивает модули, как вы можете01:34:06
видишь, здесь много всего, так что01:34:09
все, что здесь есть, потому что наше01:34:12
проект нуждается в этом либо из-за01:34:14
просмотреть CLI или из-за начальной загрузки, поэтому мы01:34:18
хочу уйти01:34:19
модули подчеркивания узла на самом деле мы01:34:22
очень редко когда-либо открываю его, это может быть01:34:24
полезно, потому что есть исходный код в01:34:26
там, что ты можешь прочитать, если тебе когда-нибудь понадобится01:34:28
чтобы выяснить, как что-то работает01:34:30
но для наших целей мы не хотим этого делать01:34:33
все, что мы хотим импортировать из узла01:34:36
модули слэш бутстрап слэш дист Форд01:34:40
CSS-слэш для распространения01:34:43
bootstrap.csn всякий раз, когда мы сохраняем это, тогда01:34:46
инструменты сборки справятся с этим01:34:48
в наше приложение, и оно будет01:34:51
автоматически внедрить это в браузер01:34:54
теперь есть несколько преимуществ01:34:57
делаю это, потому что у нас есть эти сборки01:34:59
инструменты, часть их работы заключается в оптимизации01:35:03
файлы, которые создаются таким образом01:35:07
весь этот процесс будет01:35:09
оптимизировать файлы из01:35:12
bootstrap.css, а также наш исходный код01:35:15
файлы и все остальное, что мы импортируем01:35:18
то есть запускается с помощью инструментов сборки01:35:21
также будет оптимизировано, включая01:35:23
изображения, поэтому иногда нам хочется немного01:35:26
изображения проходят через инструменты сборки как01:35:29
против помещения их внутрь01:35:31
общая папка, это на потом прямо сейчас01:35:33
теперь у нас есть начальная загрузка того, что я хочу сделать01:35:36
сейчас прорыв в некоторых функциях01:35:40
внутри нашей панели навигации конкретно я хочу01:35:42
взять это за элемент, и я хочу01:35:45
по сути превратить это во что-то вроде01:35:47
это для того, чтобы у нас была ссылка на панель навигации и01:35:52
мы предоставим ему по существу две вещи01:35:55
у нас будет страница, которую мы хотим01:35:58
покажи или хотя бы ссылку, а потом01:36:01
у нас будет что-то под названием «активно»01:36:04
и ценность этого будет01:36:06
в зависимости от того, активен ли текущий01:36:10
страница теперь равна текущему индексу01:36:14
вы можете подумать, что это пустая трата времени01:36:16
время, почему мы хотим это сделать, когда01:36:18
по сути мы можем сделать это то же самое01:36:19
вещь только с этим элементом, который01:36:21
мы уже делали это раньше, их много01:36:24
Причины и, наверное, самые важные01:36:26
причина в том, что, нарушив это01:36:28
функциональность отсутствует, теперь у нас есть01:36:31
компонент, который будет строго01:36:33
с целью отображения одного01:36:37
ссылка, которая отвечает за отображение01:36:39
ссылку, а также различные состояния01:36:42
эта ссылка, активна она или нет01:36:44
в этом есть некоторые преимущества01:36:47
функциональность, извлеченная из его01:36:49
собственный компонент, чтобы вы разрабатывали01:36:51
ваши приложения вы можете найти, эй, я01:36:54
могу извлечь это, даже если это01:36:55
что-то настолько простое, как это, нет01:36:57
вред от этого, потому что в конечном итоге это01:37:01
упрощает разработку вашего приложения01:37:03
и поддерживать, поэтому мы собираемся создать01:37:05
этот компонент ссылки на навигационную панель у нас будет01:37:09
шаблон, который по сути просто01:37:11
будет этот элемент, однако мы01:37:14
придется немного его почистить, потому что01:37:16
у нас больше нет этой активной страницы, но01:37:21
мы до этого доберемся, давайте добавим скрипт01:37:24
и мы хотим экспортировать объект по умолчанию01:37:28
давайте продолжим и определим реквизиты для01:37:30
где у нас есть страница, и у нас есть это01:37:33
активен, и тогда мы также собираемся01:37:36
есть рассчитанный вариант, потому что мы01:37:39
собираюсь создать вычисляемое свойство01:37:42
называются активными занятиями, потому что на самом деле01:37:45
я хочу применить несколько01:37:47
классы всякий раз, когда ссылка активна01:37:50
конечно, первым будет01:37:53
активный класс, и теперь мы можем использовать is01:37:57
активная опора для управления вторым01:38:00
тот, который я хочу, называется «подчеркнуть» и01:38:03
это также будет основано на01:38:06
является активной опорой, чтобы мы могли использовать это01:38:08
активные занятия прямо здесь, когда мы01:38:11
привяжите наши классы CSS, которые нам теперь не нужны01:38:14
с помощью этого прослушивателя событий кликов мы можем это сделать01:38:17
здесь я имею в виду, что нет ничего, что говорит01:38:20
что мы не можем сделать это здесь, однако, если мы01:38:23
добавьте это в наш компонент ссылок на панели навигации01:38:26
здесь мы увидим, что это01:38:29
будет автоматически применено к01:38:32
элемент, чтобы всякий раз, когда мы нажимаем на01:38:33
этот элемент мы еще собираемся получить01:38:35
та же функциональность, которую мы не делаем01:38:38
нужно определить эту навигационную ссылку, щелкните оба01:38:41
здесь и по ссылке на панели навигации, и это01:38:45
просто одна из волшебных вещей01:38:47
просмотреть это событие клика, которое будет01:38:51
поместил на этот элемент, теперь это не так01:38:53
буду работать так, как сейчас, потому что01:38:55
внутри панели навигации нам нужно импортировать01:38:59
этот компонент ссылки на панель навигации, это откуда01:39:02
файл внутри того же каталога, поэтому01:39:05
нам просто нужно сказать косую черту через точку01:39:07
navbarlink.view, а затем нам нужно добавить01:39:10
вариант компонентов к нашим вариантам01:39:14
возражайте здесь, и мы, конечно, будем01:39:16
ссылка на навигацию ячменя, так что с этим покончено01:39:19
давай просто вернемся в браузер, давай01:39:21
пройди проверку здравомыслия, убедись во всем01:39:22
работает так же, как и до этого01:39:26
это здорово, но теперь я хочу добавить это01:39:28
подчеркните класс CSS, чтобы вернуться внутрь01:39:32
Ссылка на панель навигации Я собираюсь добавить стиль01:39:35
элемент, и внутри него у нас будет01:39:37
которые подчеркивают, и мы собираемся установить01:39:40
оформление текста, которое нужно подчеркнуть, но01:39:44
давай сделаем важное, потому что я думаю01:39:47
начальная загрузка собирается переопределить это так01:39:50
давай зайдём в браузер там мы увидим01:39:52
подчеркивание и всякий раз, когда мы нажимаем на01:39:54
ссылки, конечно, мы видим подчеркиванием01:39:56
перейдите по активной ссылке, это то, что мы01:39:59
ожидал бы увидеть сейчас, мы могли бы подумать01:40:01
это потому, что мы определили этот класс CSS01:40:04
прямо здесь, внутри этого компонента01:40:06
что область действия этого компонента ограничена01:40:09
это не тот случай, если мы зайдем в программу просмотра страниц01:40:12
это совершенно отдельный компонент01:40:15
между этим нет никакой связи01:40:18
и ссылку на панель навигации, по крайней мере, до01:40:20
компоненты обеспокоены, мы можем перейти к01:40:23
это элемент, и давайте добавим01:40:26
подчеркните класс CSS, и мы собираемся01:40:29
обратите внимание, что это также подчеркнуто, чтобы мы могли01:40:32
Определите CSS внутри наших компонентов, но01:40:36
по умолчанию они не ограничены областью действия, они есть01:40:38
Глобальные, однако мы можем сделать их ограниченными.01:40:41
к компоненту, который они определены01:40:43
путем добавления атрибута области видимости в01:40:48
элемент стиля, все, что мы можем сказать, это01:40:50
область действия стиля, и теперь всякий раз, когда мы идем к01:40:52
браузере мы увидим, что01:40:54
подчеркивание по-прежнему доступно для01:40:56
ссылки на панель навигации, но обратите внимание, что это нет01:40:59
больше не доступно для нашего просмотра страниц и01:41:02
это означает, что мы можем зайти внутрь страницы01:41:04
зритель, если бы мы захотели и могли бы01:41:07
Определите совершенно отдельный подчеркнутый01:41:10
класс, но мы, вероятно, захотим сделать01:41:12
это тоже ограничено, поэтому давайте добавим01:41:15
подчеркни и давай просто сделаем этот цвет01:41:19
синий что-то, что не является подчеркиванием01:41:21
и там мы видим, что наш заголовок01:41:24
синий, конечно, когда бы мы ни пошли посмотреть01:41:26
на других страницах заголовок будет01:41:28
синий тоже, поэтому, когда дело доходит до добавления01:41:30
CSS для наших проектов у нас есть несколько01:41:32
различные варианты, мы можем установить их как01:41:35
зависимость для нашего проекта и импорта01:41:37
их точно так же, как мы это делали с бутстрапом, мы01:41:40
также можете определить CSS для наших компонентов01:41:44
мы можем сделать их глобальными или можем сделать01:41:47
они ограничены компонентом, который они01:41:49
определяются как разработчики программного обеспечения01:41:52
вся наша цель – построить01:41:54
приложения, чтобы пользователи могли работать с01:41:57
их данные и, как веб-разработчики, наши01:42:00
ситуация немного уникальна, потому что мы01:42:02
по сути, у нас есть два приложения01:42:04
есть серверное приложение, которое01:42:06
отвечает за обработку всех01:42:09
данные и идентификационные данные, а затем у нас есть01:42:11
клиентское приложение, которое загружается01:42:14
в браузер это то, что пользователь01:42:16
взаимодействует с тем, чтобы работать с01:42:18
с их данными, чтобы вы могли сделать01:42:20
аргумент, который, вероятно, наиболее01:42:22
Важная вещь в нашем приложении01:42:25
для загрузки данных, чтобы пользователь мог получить доступ01:42:28
и работать с этими данными теперь01:42:31
вопрос в том, как нам это сделать01:42:33
потому что это не всегда просто ясно01:42:36
например, если бы у нас была кнопка, которая01:42:40
пользователь мог нажать на него, и это01:42:42
получить данные, которые были целью этого01:42:44
кнопка, с которой довольно ясно, когда мы01:42:47
получит эту информацию из01:42:49
сервер, однако как насчет данных, которые01:42:51
нам нужно сначала загрузить, вот тогда01:42:53
пользователь сначала запускает приложение01:42:55
их данные уже готовы для них01:42:58
потому что если мы посмотрим на наше приложение, мы01:43:02
на самом деле у меня нет четкого представления о том, как01:43:04
загрузить эту информацию, я имею в виду да, один из01:43:06
мы могли бы добавить метод01:43:09
что мы могли бы вызвать get Pages, чтобы01:43:13
например, страницы представляют собой данные, которые мы бы01:43:16
хочу динамически загружать, чтобы мы могли01:43:18
есть асинхронный метод get01:43:22
страницы, и это будет отвечать за01:43:25
получение этой информации из01:43:27
сервер, чтобы мы могли продолжить и написать01:43:29
этот код туда, куда мы могли бы получить01:43:32
Pages.json и, конечно же, в реальном01:43:35
приложение, это ударит по некоторым01:43:37
конечная точка серверного приложения, что01:43:40
Я собираюсь сделать это удалить эту страницу01:43:43
объекты и внутри общей папки01:43:45
Я собираюсь создать новый файл с именем01:43:48
pages.json, и я собираюсь вставить01:43:52
Структура Json, которая имеет то же самое01:43:54
информация просто отформатирована в Json, поэтому01:43:57
это файл, который мы собираемся01:43:59
fetch, нам, конечно, нужно это проанализировать01:44:02
в объект JavaScript, чтобы мы могли использовать01:44:06
метод Json объектов ответа и01:44:09
тогда мы могли бы вернуть данные так, чтобы01:44:13
внутри данных, которые мы на самом деле вызвали бы01:44:16
метод get Pages, и это не вариант01:44:19
но это очень плохой вариант, поэтому вместо этого01:44:22
что мы можем сделать, так это воспользоваться01:44:25
события жизненного цикла компонента, поэтому в01:44:28
просмотреть документацию, есть такая жизнь01:44:30
диаграмма цикла, которая может быть, а может и не быть01:44:33
легко читается в зависимости от вашего01:44:36
понимание терминологии и01:44:39
просто твое понимание жизни01:44:41
цикл компонента представления, но в основном01:44:43
он начинается сверху, где находится рендерер01:44:45
встречает компонент, так что это01:44:48
просмотреть время выполнения, в котором обнаружен компонент01:44:51
что его нужно загрузить в браузер01:44:53
так вот это перед созданием события01:44:56
это произойдет, и это01:44:59
событие, к которому мы можем подключиться и выполнить01:45:02
код, когда экземпляр компонента01:45:05
инициализированы, реквизиты разрешены, но01:45:08
нет никакой обработки, поскольку01:45:10
данные компонента или вычисленные свойства01:45:13
так что с точки зрения наших потребностей то, что было раньше01:45:17
создание на самом деле не является чем-то, что01:45:19
мы хотели бы использовать для загрузки данных01:45:22
прежде всего потому, что мы хотим, чтобы данные01:45:25
уже обработаны, а также01:45:27
вычисленные значения, так что давайте вернемся01:45:29
к диаграмме после, прежде чем создать, затем01:45:32
есть инициализация01:45:34
API опций — это тот API, которым мы являемся01:45:37
используя здесь, вверху, вы можете увидеть01:45:39
что есть эта установка, а затем это01:45:41
API композиции API композиции — это01:45:44
другой способ создания одного и того же01:45:46
компоненты, с которыми мы работаем, и01:45:48
мы рассмотрим API композиции для01:45:50
сейчас мы работаем с API опций01:45:52
поэтому после инициализации API параметров01:45:55
затем есть это созданное событие, это01:45:58
созданное событие происходит после того, как данные и01:46:01
вычисленные свойства были01:46:03
обрабатывается, но до того, как компонент будет01:46:06
загружается в документ в браузере01:46:09
так что это идеальное место, где мы01:46:11
хотелось бы загрузить наш контент, потому что01:46:13
это означает, что данные обрабатываются так01:46:16
что всякий раз, когда мы загружаем наши данные, тогда01:46:19
представление сможет реагировать на01:46:21
это изменится, но это еще до того, как это произойдет01:46:24
видно в браузере, что очень01:46:26
полезно для конечного пользователя, поэтому мы01:46:29
хочу использовать это созданное событие и все01:46:32
нам нужно добавить созданный как метод01:46:35
к нашему объекту параметров, так что это просто01:46:39
другой вариант, как если бы мы захотели01:46:42
используйте перед созданием, мы бы сделали то же самое01:46:44
вещь, а затем внутри этого создана01:46:47
метод, который мы сейчас назвали бы get Pages01:46:51
мы могли бы назначить это страницам в нашем01:46:56
такие данные или то, что я бы, вероятно,01:46:58
сделать что-то вроде этого, так что это01:47:00
внутри get Pages мы продолжим01:47:02
и установите страницы, равные нашим данным, поэтому с помощью01:47:06
это простое изменение мы можем перейти к01:47:08
браузер и мы увидим01:47:11
что-то, что выглядит немного странно, мы01:47:14
у меня две панели навигации, поэтому давайте посмотрим на01:47:17
консоль разработчика, потому что мы собираемся01:47:19
чтобы столкнуться с ошибкой, здесь написано, что01:47:21
он не может читать свойства неопределенного01:47:23
он пытается прочитать заголовок страницы и это01:47:26
сообщает нам, где находится точка просмотра страниц01:47:29
Просмотр, поэтому давайте откроем средство просмотра страниц и01:47:32
посмотрим, это прямо здесь, в третьей строке01:47:34
он пытается получить доступ к заголовку этой страницы01:47:37
собственность, но она не существует и01:47:40
единственная причина, почему этого не существует01:47:41
потому что этот объект страницы имеет значение null или01:47:45
не определено и единственная причина, почему это01:47:48
будет нулевым или неопределенным, потому что01:47:50
страница, которая была передана как страница01:47:53
prop имеет значение null или неопределенное, так что в основном01:47:56
это страницы до того, как наши данные были01:48:00
загруженные страницы представляют собой пустой массив, поэтому01:48:03
неопределенное привязано к странице01:48:06
опора для средства просмотра страниц, и мы01:48:08
столкнулся с этой ошибкой, поэтому01:48:10
вопрос в том, как нам решить эту проблему01:48:13
и есть много разных01:48:15
способы, которые мы собираемся посмотреть01:48:17
на следующем уроке в предыдущем01:48:20
урок, мы загрузили данные в наш01:48:22
приложение, сделав HTTP-запрос01:48:25
изнутри созданного хука, поэтому мы01:48:28
получили эту информацию, мы ее проанализировали01:48:30
в массив JavaScript, а затем мы01:48:32
сохранил этот массив в данных страниц01:48:36
собственность, однако всякий раз, когда мы просматриваем это01:48:38
в браузере все еще вроде работает01:48:40
но это выглядит очень странно, потому что мы01:48:42
есть две навигационные панели, и если мы посмотрим на01:48:44
консоль, у нас есть ошибка, и это01:48:47
из-за этого прямо здесь, на странице01:48:49
компонент просмотра получает значение01:48:51
неопределенное прошлое для свойства страницы и01:48:55
фактическая ошибка заключается в том, что он пытается использовать01:48:58
свойство заголовка страницы в неопределенном01:49:01
ну, конечно, undefined не имеет01:49:03
любое правильное, так что это, конечно, будет01:49:05
неудача и причина, по которой мы видим01:49:08
это потому, что страницы инициализируются как01:49:11
пустой массив и он не заполнен01:49:13
пока компонент не будет инициализирован01:49:17
данные обрабатываются тестом, а затем01:49:19
созданный хук выполняется, вот это01:49:23
крошечный краткий момент, когда страницы01:49:26
пусто, и программа просмотра страниц пытается01:49:29
получить элемент с индексом 0 из01:49:33
пустой массив, что, конечно, и есть01:49:35
невозможно, поэтому неопределенное передается в01:49:38
программа просмотра страниц, так что есть пара01:49:40
разные способы, которыми мы можем обойти01:49:42
эта конкретная ошибка и, возможно,01:49:44
самое простое - это что-то сделать01:49:46
как мы бы поступили в обычном режиме01:49:47
JavaScript, и это проверка того, можем ли мы01:49:50
иметь какие-либо элементы внутри страниц01:49:52
массив, мы можем сделать это с помощью директивы01:49:54
называется, если это очень похоже на01:49:57
if в JavaScript, и мы можем01:50:00
используйте его для любого элемента, в котором нет необходимости01:50:02
быть элементом HTML или компонентом, как01:50:05
пока мы его используем и предоставляем01:50:07
истинное или ложное значение, это сработает01:50:10
все в порядке, поэтому мы хотим проверить,01:50:13
длина страниц больше нуля01:50:16
и это будет одно из двух01:50:17
вещи, если значение директивы if01:50:21
верно, тогда программа просмотра страниц будет01:50:25
вывод в документ, если он ложный01:50:28
тогда его не будет в01:50:30
документ вообще, поэтому давайте посмотрим на01:50:32
давайте обновим, чтобы загрузить01:50:34
все с нуля заметьте, что мы01:50:36
теперь у нас нет двух навигационных панелей и нет01:50:39
есть какие-либо ошибки внутри консоли01:50:41
и все работает так, как должно, если01:50:44
мы рассмотрим элементы, которые мы можем01:50:46
видишь, конечно, у нас есть панель навигации, мы01:50:48
также есть элемент div, который содержит01:50:50
информация о странице, но давайте сделаем это01:50:52
давайте установим значение false для01:50:56
просмотрщик страниц, вернемся к браузеру01:50:58
и давайте обновим страницу, на которой мы все еще находимся01:51:01
собираюсь увидеть нашу навигационную панель, потому что мы01:51:03
только что не влияет на навигацию01:51:05
все, однако мы не видим страницу01:51:08
содержание, и если мы посмотрим на элементы01:51:10
мы видим это V, если HTML-комментарии, где01:51:15
этот элемент div будет таким, что div01:51:17
элемента вообще нет в документе01:51:20
полностью исчезло и останется исчезнувшим01:51:22
до тех пор, пока значение этой директивы V if01:51:26
верно, поэтому этот подход очень01:51:29
как то, что мы делали бы в обычном01:51:31
JavaScript, если длина страниц01:51:33
больше нуля, затем отобразить страницу01:51:37
если нет, то спрячь это, теперь есть01:51:40
аналогичная директива под названием шоу и01:51:43
его цель — показать или скрыть контент01:51:45
но это делается по-другому01:51:47
вместо этого он использует CSS для отображения и скрытия01:51:51
элемент, поэтому, если мы используем V, покажем, что мы здесь01:51:55
все равно столкнусь с проблемой, потому что01:51:58
с точки зрения зрителя страницы01:52:01
хотя это все еще есть в документе01:52:04
он будет скрыт с помощью CSS, тогда как с01:52:08
v если бы его вообще не было01:52:10
сгенерировать ошибку, давайте посмотрим01:52:12
на каком шоу V сделал бы это, давайте создадим01:52:15
элемент div, нам не нужны классы01:52:18
или что-то в этом роде, давай просто Ви01:52:20
show и давайте установим для этого значения значение false, чтобы01:52:23
мы, конечно, скроем этот контент01:52:26
мы не увидим этого рендеринга01:52:28
в браузере, однако всякий раз, когда мы01:52:30
посмотрим на элементы, которые мы еще увидим01:52:32
этот элемент есть, просто он01:52:35
для дисплея установлено значение «Нет», поэтому вы можете01:52:37
показывать и скрывать контент с помощью двух01:52:40
директивы V show использует CSS, чтобы скрыть01:52:44
содержание директивы V, если это не так01:52:46
вообще выведите этот элемент, если он есть01:52:49
ложь, поэтому это первый способ, которым мы01:52:52
может решить эту конкретную проблему01:52:54
второй способ - предоставить значение по умолчанию01:52:56
значение для страницы, и мы бы сделали01:52:59
что внутри компонента просмотра страниц01:53:03
теперь этот подход может быть немного01:53:04
утомительно, потому что это меняет способ01:53:07
определяем реквизиты для нашего компонента01:53:10
вместо использования массива простых01:53:12
строковые значения, которые мы бы использовали для объекта01:53:15
где имена свойств — это имена01:53:17
нашего реквизита, и тогда было бы01:53:20
объект дескриптора, который будет использоваться для01:53:23
подтвердить эту опору, а также предоставить01:53:26
значения по умолчанию, поэтому первый дескриптор01:53:29
будет тип, так что это объект01:53:32
если бы это была простая строка, мы могли бы01:53:34
используйте строку или число или что-то еще, но01:53:36
это объект, и поскольку это01:53:39
объект, мы можем предоставить значение по умолчанию01:53:41
но мы должны написать это как фабрику01:53:43
функция, если бы это было простое значение, например01:53:46
строку, то все, что нам нужно сделать, это01:53:49
укажите строковое значение, но поскольку это01:53:52
это объект, мы должны записать это как01:53:54
функция туда, где мы получаем необработанные01:53:57
реквизит, но в данном конкретном случае мы01:53:59
на самом деле мне ничего из этого не нужно01:54:01
информация, которая нам просто нужна, чтобы вернуть01:54:03
объект, который имеет свойство заголовка страницы, мы01:54:07
может инициализировать это как пустую строку01:54:09
и тогда мы также можем предоставить контент01:54:11
что также будет пустой строкой01:54:12
так что вы можете себе представить, есть ли у вас01:54:14
компонент, который имеет много разных01:54:16
реквизит, если вы решите использовать объект для01:54:20
Определите свой реквизит, который у вас будет01:54:22
по существу описать их так в01:54:24
по крайней мере, вам придется иметь01:54:26
объект для каждого реквизита и имеет тип01:54:29
для каждого из этих реквизитов, но это01:54:31
собираемся решить и нашу проблему, потому что01:54:33
теперь мы предоставили значение по умолчанию для01:54:36
наша страница, поэтому, если передано неопределенное значение, это01:54:40
значение по умолчанию будет предоставлено туда, где01:54:43
заголовок страницы будет пустой строкой, поэтому01:54:46
давайте обновимся, чтобы начать с нуля и01:54:49
еще раз мы видим поведение, которое мы01:54:51
ожидаемо, и приложение работает01:54:53
все в порядке, теперь нет правильного или неправильного01:54:55
подход к этому, но они служат01:54:58
разные цели, если вы решите01:55:00
определите дескрипторы для вашего реквизита01:55:03
это в первую очередь для проверки реквизита01:55:06
просто чтобы ты лучше понял ошибку01:55:08
отчетность по мере разработки вашего01:55:10
приложение, тогда как использование V if01:55:13
директива была бы тем более01:55:15
прямой и простой подход я01:55:17
в любом случае он выполнит свою работу, когда вы01:55:20
начните включать данные в свой01:55:22
приложения, особенно загружающие данные01:55:25
может сбить с толку, когда вам следует01:55:27
загрузить данные и, к сожалению, их нет01:55:30
жесткие и быстрые правила, которые говорят, что вы01:55:33
должен загружать эти данные, когда они01:55:36
абсолютно субъективно, это зависит от01:55:38
ваше приложение, это также зависит от01:55:41
ваше мнение о том, когда ваше заявление01:55:44
нужно загрузить эти данные, но что я01:55:46
обычно это сводится к двум01:55:49
Критерии – это данные, используемые в01:55:52
несколько компонентов или данные01:55:55
специфично для одного компонента, поэтому давайте01:55:58
посмотрите сейчас на пример того и другого01:56:00
у нас есть массив страниц внутри01:56:03
компонент приложения и, конечно же, это01:56:06
страницы, которые наше приложение использует для01:56:08
генерировать ссылки в навигационной панели01:56:11
Массив страниц также используется для отображения01:56:14
содержимое текущей страницы, поэтому, пока01:56:17
просмотрщик страниц не обязательно использует01:56:20
массив страниц внутри компонента it01:56:23
зависит от массива страниц, поэтому01:56:26
поскольку эти данные используются в нескольких01:56:30
компоненты, которые я хочу загрузить как можно скорее01:56:33
насколько это возможно или, по крайней мере, до этого01:56:36
компоненты создаются и загружаются поэтому в01:56:39
в нашем случае имело смысл загружать страницы01:56:41
внутри компонента приложения с помощью01:56:45
создал крючок, так что это здорово, но давайте01:56:47
взгляните на панель навигации, потому что01:56:49
На панели навигации теперь есть данные, конечно, есть01:56:51
данные передаются через реквизит01:56:54
например страницы, но есть данные, которые01:56:57
специфично для этого компонента и только для этого01:57:00
компонент, и именно эта тема сейчас в01:57:03
общая схема вещей эти данные01:57:05
не так важно, как страницы, потому что01:57:08
без страниц приложения01:57:10
вообще не работает, но это часть01:57:12
предоставляя пользовательский опыт, который мы даем01:57:16
им возможность изменить тему01:57:18
панели навигации, так что это имеет смысл01:57:20
продолжить и сохранить эту информацию01:57:22
так что всякий раз, когда они снова посещают наш01:57:25
приложение, мы можем загрузить настройки01:57:27
что они предпочитают, теперь вы можете сделать01:57:30
аргумент, что настройки также являются01:57:33
Компонент уровня приложения, потому что когда01:57:36
ты там начинаешь говорить о настройках01:57:38
это компоненты, которые будут иметь разные01:57:39
настройки и может имеет смысл загрузить01:57:42
однако вся эта информация заранее01:57:44
вы также можете привести аргумент, что это01:57:47
должен быть загружен любым компонентом01:57:49
будет использовать эту настройку и01:57:51
это то, что мы собираемся рассмотреть в01:57:52
этот урок, поэтому, когда дело доходит до хранения01:57:55
и получения информации о теме, которую мы01:57:57
можно подойти к этому по-разному01:57:59
разными способами, и нет никакого права или01:58:02
неправильный путь, я возьму больше всего01:58:04
простой способ в этом уроке и01:58:07
позже мы, вероятно, исправим это так01:58:09
что вы можете получить представление о другом способе01:58:12
что мы можем подойти к этому так ради этого01:58:15
урок, который мы просто добавим в метод01:58:17
это тот, который будет хранить01:58:21
настройка темы, в этом случае что мы будем01:58:24
сделать, это взять все, что находится внутри01:58:27
свойство данных темы и сохраните его в01:58:30
локальное хранилище, теперь нам нужно принять решение о01:58:33
какой ключ мы собираемся использовать и я думаю01:58:36
тема будет в порядке, так что01:58:38
мы установим элемент в локальное хранилище01:58:41
ключ — это тема, и данные будут01:58:45
все, что находится внутри данных темы01:58:48
свойство, давайте скопируем это, потому что это01:58:50
будет основой для получения темы01:58:54
настройка, в этом случае мы хотим01:58:57
извлеките тему из локального хранилища, чтобы01:59:00
мы вызовем метод получения элемента с помощью01:59:03
ключ темы теперь возможно, что01:59:06
этого элемента нет в локальном хранилище01:59:09
при первой загрузке приложения01:59:11
в браузере этого точно не будет01:59:13
вот так нам нужно проверить, есть ли у нас01:59:15
значение, если мы это сделаем, мы сможем продолжить01:59:18
и мы можем установить тему, равную01:59:21
все, что находится в локальном хранилище01:59:23
в противном случае мы просто оставим тему как01:59:26
по умолчанию, который светлый, и тогда мы01:59:29
просто нужно решить, когда мы их будем использовать01:59:31
методы, поэтому нам нужно сохранить тему01:59:33
настройка всякий раз, когда мы меняем тему, поэтому01:59:36
имеет смысл вызвать его после того, как мы установим01:59:39
тему, а затем мы можем вызвать get01:59:43
настройка темы внутри созданного хука01:59:46
так что давайте продолжим и создадим это01:59:50
метод, который мы назовем темой get01:59:53
настройки, и все должно быть в порядке, так что давайте01:59:56
зайди в браузер, давай откроем01:59:57
инструменты разработчика, чтобы мы могли перейти к02:00:00
вкладка приложения, поэтому, если мы перейдем к локальному02:00:02
хранилище, а затем URL-адрес, который мы видим здесь02:00:06
что нет ключа темы всякий раз, когда02:00:09
мы нажимаем на переключатель, а затем обновляем02:00:12
локальное хранилище, мы видим, что тема02:00:15
установите темный цвет, поэтому, если мы обновим, обновите02:00:18
эта страница, то тема, вероятно, должна02:00:20
будет установлено, если мы изменим его обратно на02:00:24
светлая тема, давайте освежим наш локальный02:00:27
хранилище мы видим, что сейчас светло у нас02:00:30
обновите страницу и, конечно, это02:00:32
настройка теперь загружена, как я уже сказал, это02:00:35
целиком и полностью зависит от02:00:37
ваше приложение также зависит02:00:39
по вашему мнению, когда вам следует02:00:42
загрузите данные в свое приложение как02:00:44
мы добавим больше настроек, это может сделать больше02:00:47
смысл загружать все заранее, так что02:00:50
это мы не затрагиваем локальное хранилище02:00:52
несколько раз одновременно, но02:00:55
опять же, это зависит от приложения02:00:58
а также не бойтесь вносить изменения02:01:01
к вашему приложению иногда проектирует02:01:04
меняемся, мы очень редко никогда не понимаем это правильно02:01:07
в первый раз, так что делай то, что делает02:01:09
смысл, если это изменится позже, хорошо02:01:12
вот почему мы разработчики02:01:15
мы не можем говорить о данных, не поговорив02:01:17
о получении данных от пользователя и02:01:20
Основной способ, которым мы это делаем, – это02:01:22
формы сейчас традиционно формы являются02:01:24
самое утомительное занятие, с которым мы можем работать02:01:27
на JavaScript, но, к счастью, просмотр позволяет02:01:29
это намного проще, ведь оно мертво02:01:33
просто, так что я хочу сделать в этом02:01:35
урок по сути состоит в том, чтобы вынуть страницу02:01:38
зрителя, потому что мы знаем, что это работает02:01:39
и со временем мы добавим это обратно, но02:01:42
прямо сейчас я хочу сосредоточиться на формах и я02:01:44
хотим создать новый объект страницы, который мы02:01:48
в конечном итоге добавит в наш массив страниц02:01:50
и мы собираемся сделать это внутри02:01:52
другой компонент, так что давайте просто позвоним02:01:54
эта страница создания и этот компонент02:01:57
должен иметь обратный вызов, чтобы приложение02:02:01
будет знать, когда страница была создана02:02:04
поэтому давайте просто назовем эту страницу созданной и02:02:07
мы справимся с этим с помощью метода под названием02:02:09
страница создана, давайте определим, что внутри02:02:12
наши методы здесь, внутри приложения и для02:02:15
прямо сейчас давайте просто возьмем страницу02:02:17
возразить, что это будет получено и02:02:20
напишите это в консоль и02:02:22
в конечном итоге мы добавим это в02:02:25
массив страниц, так что это основной02:02:27
функциональность здесь, внутри приложения02:02:29
компонент, мы можем перейти к нашим компонентам02:02:32
папку и давайте создадим новый файл, который мы будем02:02:34
назовите это, создайте страницу Dot View и насколько далеко02:02:37
что касается шаблона, я уже02:02:39
иметь наценку только потому, что это много02:02:43
набираю текст и на самом деле нет целого02:02:45
здесь есть два поля формы, одно для02:02:48
заголовок страницы для содержания и02:02:51
затем есть кнопка, которая будет02:02:53
запустите эту созданную страницу, чтобы мы знали02:02:57
что у нас есть этот реквизит, пойдем дальше02:02:59
и Определите это, и мы сможем использовать только02:03:03
простое определение реквизита, в этом нет необходимости02:03:06
чтобы мы могли использовать объект дескриптора02:03:09
обозначение, и мы знаем, что эта страница02:03:11
созданный будет выполняться всякий раз, когда02:03:13
пользователь нажимает на кнопку, итак, поехали02:03:16
вперед и настройте событие клика, и мы02:03:18
не обязательно знать, что мы собираемся02:03:20
чтобы пройти, мы хорошо знаем, что собираемся02:03:22
передать объект, который мы не знаем, что02:03:24
значения еще будут, поэтому у нас есть02:03:26
все подготовительные работы готовы к работе02:03:29
теперь мы можем сосредоточиться на получении данных из02:03:32
форма теперь с традиционным JavaScript02:03:34
мы обычно применяем идентификатор к02:03:38
input и элементы текстовой области, чтобы02:03:40
мы можем ссылаться на эти элементы, чтобы получить02:03:42
их ценности, и тогда мы готовы идти02:03:44
мы не обязательно можем сделать это с видом02:03:48
потому что помните, что мы находимся внутри02:03:50
компонент, что означает, что если бы мы хотели02:03:53
чтобы мы могли использовать несколько страниц создания02:03:57
компоненты в одном представлении02:03:59
компонент, который тогда у нас был бы02:04:02
несколько текстовых областей, множественный ввод02:04:04
элементы, имеющие одинаковые идентификаторы, которые02:04:07
это никому не поможет, так что02:04:09
вместо этого нам нужно подумать об использовании02:04:11
инструменты, о которых мы уже знаем, такие как02:04:14
данные привязки, например, для нашей страницы02:04:17
заголовок, с которым мы могли бы сделать что-то подобное02:04:20
где мы привязываемся к значению ввода02:04:23
элемент, и мы могли бы назвать это просто02:04:25
заголовок страницы, который означает, что мы бы02:04:27
нужно определить это внутри наших данных02:04:30
так что давайте продолжим и сделаем то, что можем02:04:33
инициализируйте его пустой строкой и02:04:36
это здорово, поэтому всякий раз, когда мы нажимаем на02:04:38
страница создана, мы можем включить ее02:04:41
заголовок там, так что давайте перейдем к браузеру02:04:44
и мы не видим нашу форму, потому что я это сделал02:04:47
не импортируйте это внутри приложения02:04:50
компонент, поэтому мы хотим импортировать create02:04:53
страницу, и мы хотим включить ее в02:04:56
вариант компонентов, так что начнем02:05:00
мы должны увидеть форму, давайте поднимем02:05:03
консоль, чтобы мы могли увидеть, какой результат02:05:05
мы получаем всякий раз, когда нажимаем на создание страницы02:05:07
давайте просто нажмем на него, и мы увидим, что мы02:05:09
есть объект с заголовком страницы, который02:05:12
устанавливается пустая строка, что делает02:05:13
в полном смысле, это то, что мы бы сделали02:05:15
ожидать, потому что мы не предоставили02:05:18
название еще нет, но давайте предоставим название02:05:20
давайте нажмем на создание страницы и заметим02:05:22
что на выходе будет тот же заголовок страницы02:05:25
по-прежнему пустая строка и причина02:05:27
очень просто, потому что всякий раз, когда вы привязываете02:05:29
данные с использованием V-привязки да, вы привязываете02:05:33
данные, но мы, по сути, говорим, что02:05:35
значение этого входного элемента любое02:05:39
название страницы в данный момент такое, какое прямо сейчас02:05:42
в настоящее время это пустая строка, поэтому, если мы02:05:45
укажите любой текст в качестве начального значения02:05:47
для заголовка страницы всякий раз, когда мы возвращаемся к02:05:50
браузер, давай обновим, мы собираемся02:05:52
увидеть, что значение отображается на странице02:05:55
заголовок, это односторонняя привязка, поэтому вместо этого02:05:58
что нам нужно сделать, это обновить заголовок страницы02:06:02
всякий раз, когда значение входного элемента02:06:05
изменения, и мы можем сделать это с помощью02:06:08
событие ввода, это обычный ввод Dom02:06:11
событие, чтобы у нас была функция, которая02:06:14
собираемся обработать событие ввода, которое мы получаем02:06:17
объект события, и мы установим страницу02:06:20
заголовок, равный цели события02:06:23
что это за входной элемент, и мы бы02:06:26
получить его значение, и теперь у нас есть это02:06:28
двусторонняя привязка, поэтому теперь, хотя мы02:06:31
иметь одностороннюю привязку со значением02:06:34
и заголовок страницы сейчас обновляем02:06:37
заголовок страницы всякий раз, когда значение в02:06:41
браузер меняется, поэтому давайте вернемся к02:06:43
браузер, давай введем что-нибудь, давай02:06:46
нажмите «Создать страницу», и теперь мы видим это02:06:49
значение — это то, чего мы ожидаем от него02:06:51
быть заголовок страницы - это заголовок, но также02:06:54
помните, что я сказал, что представление имеет02:06:56
самый простой способ работы с формами это02:06:59
однако это обязательно не так просто02:07:02
есть указание, что мы можем это сделать02:07:04
по сути делает то же самое и02:07:06
это называется моделью V, и это создает02:07:09
двусторонняя привязка между этим входом02:07:12
элемент, а затем все, что мы указываем как02:07:15
модель V, которая будет страницей02:07:18
название, так что теперь мы это увидим02:07:20
ту же функциональность, мы видим, что02:07:23
заголовок страницы инициализируется этим02:07:25
начальное значение, давайте изменим это, потому что02:07:27
это глупо, поэтому мы инициализируем02:07:29
это с пустой строкой, так что это02:07:31
пусто, но тогда независимо от того, что мы набираем02:07:34
внутри этого мы увидим это как02:07:37
заголовок страницы, поэтому давайте нажмем «Создать страницу»02:07:41
и вот мы идем, чтобы работать с02:07:44
простые элементы формы — все, что нам нужно сделать02:07:46
использовать эту модель V для привязки данных02:07:50
свойство этого элемента управления формой, и это02:07:53
это значит, что мы можем, по сути, сделать то же самое02:07:55
вещь для нашей текстовой области, поэтому у нас будет02:07:58
свойство данных, называемое контентом, мы будем02:08:00
используйте модель V, чтобы связать этот контент с этим02:08:04
текстовую область, чтобы каждый раз, когда мы нажимаем02:08:08
на нашей кнопке создания страницы мы будем02:08:11
укажите заголовок страницы и02:08:14
контент, поэтому вернемся к браузеру02:08:16
хотя нам нужно инициализировать02:08:18
довольны значением, так что давайте вернемся02:08:20
в браузер и давайте обновим02:08:23
страница, потому что у нас там была ошибка02:08:25
а теперь давайте дадим название, давайте просто02:08:29
назовите эту четвертую страницу заголовком, и это02:08:33
контент всякий раз, когда мы нажимаем «Создать»02:08:35
страницу мы увидим в консоли, которую мы02:08:38
есть объект, который имеет содержимое, которое02:08:40
мы ввели, а также заголовок страницы в02:08:44
предыдущий урок, с которым я вас познакомил02:08:46
директиву модели V, чтобы вы могли02:08:48
настроить двустороннюю привязку между форумом02:08:51
элемент управления и свойство данных, и это02:08:54
все хорошо, но это еще не все02:08:56
работа с формами, а не просто получение02:08:59
информация, которая нам также необходима, чтобы иметь возможность02:09:01
подтвердите информацию, и это будет02:09:03
также будет полезно иметь некоторые визуальные подсказки02:09:06
например, если форма недействительна02:09:10
тогда мы могли бы отключить страницу создания02:09:13
кнопка, и она может остаться отключенной02:09:15
пока у нас не будет действующей формы, так что давайте02:09:18
начните с изменения формы, потому что02:09:21
объект, который мы создаем, не является02:09:25
завершено, нам также нужна ссылка, поэтому нам нужно02:09:28
как минимум две другие части информации02:09:29
например текст и URL-адрес02:09:32
ссылку, поэтому я собираюсь вставить что-нибудь новое02:09:35
разметка просто меняет нашу форму, поэтому02:09:38
что теперь мы включаем текст ссылки и02:09:40
URL ссылки, я также опубликовал это02:09:43
флажок, о котором нам не стоит беспокоиться02:09:45
примерно пока, но идея собирается02:09:48
будь то, если оно будет опубликовано, мы увидим02:09:50
ссылка в строке меню, если это не так02:09:52
тогда мы этого не сделаем, это первое, что нам нужно02:09:55
нужно настроить двустороннюю привязку02:09:57
между элементом управления формой и нашими данными02:10:00
свойства связанного текста и02:10:03
URL-адрес ссылки и, конечно, у нас нет02:10:06
эти ценности, но они будут02:10:08
достаточно просто создать, мы назовем02:10:10
текст ссылки просто текст ссылки для URL02:10:13
мы назовем это URL-адресом ссылки и02:10:16
инициализировать эти значения как пустые строки02:10:19
и сейчас, потому что мы добавляем это02:10:22
дополнительная информация имеет смысл, что мы02:10:25
изменил код, который обрабатывает02:10:28
нажмите на нашу кнопку, потому что мы просто02:10:31
вызванная страница создана, мы передали02:10:33
простой объект с заголовком страницы и02:10:35
контент, теперь нам нужно кое-что сделать02:10:37
валидации, и нам нужно создать более02:10:39
сложный объект, поэтому давайте определим метод02:10:42
мы назовем это формой отправки, и нам нужно02:10:45
добавьте это в опцию методов теперь как02:10:49
насколько этот метод формы отправки02:10:51
обеспокоены тем, что нам не нужны никакие внешние02:10:54
данные, такие как объект события, который02:10:57
будет передано здесь, и причина в том,02:10:59
потому что все данные, которые нам нужны,02:11:01
прямо здесь, внутри наших данных, поэтому02:11:04
первое, что мы собираемся сделать, это пойти02:11:05
чтобы быть довольно утомительным, нам нужно сделать02:11:07
уверен, что у нас есть какие-то ценности, на самом деле мы02:11:10
нужны все значения, потому что по порядку02:11:13
для создания объекта страницы нам нужен заголовок02:11:17
нам нужен контент и нам нужна ссылка02:11:20
информацию, поэтому, если какой-либо из этих02:11:24
ценности отсутствуют, то мы не можем сделать наши02:11:27
задание и создайте этот объект, чтобы мы02:11:30
будет предупреждать пользователя о том, что он02:11:34
нужно заполнить форму и тогда все02:11:36
нам нужно вернуться, потому что есть02:11:39
нам больше нечего делать, но если мы это сделаем02:11:41
есть все данные, тогда мы можем позвонить02:11:43
функция создания страницы, а затем мы02:11:46
передаст объект, имеющий страницу02:11:49
назовите контент, а затем мы создадим02:11:52
объект ссылки, который имеет текст и URL-адрес02:11:56
свойства, так что, закончив, давайте сделаем02:11:59
проверка работоспособности, посмотрим, все ли в порядке02:12:01
собираюсь на работу, так что давай прежде всего02:12:03
нажимаем кнопку отправить и видим02:12:06
конечно, это не сработает02:12:08
пожалуйста, заполните форму, так что давайте просто02:12:10
добавьте немного контента и убедитесь, что мы02:12:12
мы не сможем отправить это02:12:15
объект без предоставления всех02:12:18
информацию, и мы все еще должны иметь02:12:20
все настроено так, что мы выводим это02:12:22
возражаем на консоль, и мы делаем это02:12:25
есть контент, ссылка и02:12:27
заголовок страницы просто фантастический, теперь я хочу02:12:30
настроить визуальную подсказку, чтобы02:12:32
кнопка будет отключена до тех пор, пока форма02:12:35
действительно, и это может показаться чем-то вроде02:12:37
излишне, тем более что мы уже02:12:39
настройте метод отправки формы для проверки02:12:42
эти ценности, но никогда не помешает иметь02:12:45
избыточность, особенно когда дело касается02:12:48
проверка, действительно ли что-то или нет02:12:51
кроме того, наличие визуальной подсказки02:12:53
всегда хорошее дело, чтобы мы могли добиться успеха02:12:55
это несколькими разными способами, но02:12:58
наверное, самое простое и самое02:13:00
просто будет использовать02:13:01
вычисленное значение, и назовем это02:13:05
форма недействительна, это звучит странно02:13:08
потому что обычно я хотел бы сказать:02:13:10
форма действительна, но мы будем обязательными02:13:13
это для02:13:15
отключенный атрибут на кнопке, которая02:13:18
означает, что когда отключено, это правда, тогда из02:13:22
конечно, кнопка отключена, если она02:13:24
неверно, тогда это не так, формулировка такова02:13:28
сделать это немного проще02:13:29
понять, что происходит, чтобы мы02:13:31
не нужно разбирать это и делать02:13:33
что-то вроде этого не является допустимой формой02:13:36
так что это просто немного усложнить ситуацию02:13:39
битти, поэтому, если форма недействительна, это правда, что02:13:42
отключим кнопку, поэтому теперь мы просто02:13:44
нужен код, чтобы проверить, является ли форма02:13:47
недействительно, и у нас в основном уже есть02:13:50
что если какое-либо из наших значений пусто02:13:53
тогда это вернет true, и мы сможем идти02:13:56
вернемся в браузер, и мы увидим это02:13:58
кнопка отключена и начинаем02:14:01
добавление значений вижу, что оно все еще отключено02:14:04
пока вся форма не будет заполнена, если02:14:07
мы очищаем любое из полей формы02:14:10
он снова становится отключенным и02:14:13
конечно, всякий раз, когда мы отправляем форму02:14:15
объект отправляется обратно родителю, который02:14:18
компонент приложения, где мы можем вывести это02:14:21
информацию на следующем уроке мы02:14:23
собираюсь изменить массив страниц так, чтобы02:14:27
всякий раз, когда мы создаем страницу, она обновляется02:14:29
меню, но мы также хотим только02:14:32
отображать страницы, которые опубликованы02:14:34
это означает, что нам нужно будет отфильтровать02:14:37
страницы, которые находятся в навигационной панели в этом02:14:40
урок, который мы, по сути, собираемся сделать02:14:42
две вещи, которые мы прежде всего добавим02:14:44
код для добавления объектов страницы на страницы02:14:48
массив, чтобы мы отобразили их в02:14:51
панель навигации, но мы также хотим взять02:14:53
принять во внимание это новое опубликованное значение, поэтому02:14:56
что если страница помечена как опубликованная, она02:14:59
отображается в навигационной панели, если нет, то02:15:02
ну, это не так, давайте начнем с02:15:05
самое простое - изменить02:15:09
массив страниц в этом буквальном смысле02:15:12
Не может быть проще, все, что нам нужно сделать, это02:15:14
вставьте новый объект страницы, и мы02:15:18
сделано, так что урок в том, что что угодно02:15:21
который изменяет или мутирует наш массив страниц02:15:26
будет автоматически означать02:15:29
посмотреть, что эти данные изменились обновить все02:15:33
пользовательского интерфейса, который использует массив страниц, поэтому02:15:36
любой встроенный метод массива, который изменяет02:15:39
массив и есть несколько push-pop02:15:42
сдвиг unshift сращивание сортирует даже в обратном порядке02:15:46
это методы, которые изменяют массив02:15:50
поэтому эти изменения будут02:15:52
отражено в пользовательском интерфейсе, поэтому с помощью этого простого02:15:55
изменить, мы можем добавить новую страницу, мы можем сказать02:15:58
что это четвертая страница, и мы просто02:16:00
есть контент, которым мы на самом деле не являемся02:16:02
показываю эту информацию прямо сейчас02:16:04
для связанного текста давайте воспользуемся четвертой страницей02:16:07
а также и на самом деле мы могли бы сделать02:16:10
что-то, чтобы сделать это немного02:16:12
проще с точки зрения ввода данных02:16:14
потому что часто заголовок страницы02:16:17
может быть то же самое для ссылки на страницу, поэтому02:16:19
это то, что мы могли бы захотеть02:16:21
подумайте, а затем для URL давайте просто02:16:23
позвони сюда02:16:25
page4.html, и мы нажмем «Создать».02:16:28
странице мы видим страницу 4 в строке меню и02:16:32
URL-адрес02:16:35
page4.html, поскольку этот код02:16:38
обеспокоены тем, что мы золотые, теперь нам просто нужно02:16:41
принять во внимание это опубликованное02:16:42
значение теперь это потребует от нас02:16:45
измените наш файлpages.json, потому что это02:16:48
это исходное место, куда поступают наши данные02:16:50
Итак, давайте сделаем это для домашней страницы02:16:53
мы установим для параметра «Опубликовано» значение True, мы также02:16:56
сделать то же самое для about но для02:16:58
контакт, давайте установим для него значение false, чтобы мы02:17:02
не увижу это в навигационной панели, так что02:17:04
после этого нам нужно перейти к созданию02:17:06
компонент страницы, потому что нам нужно взять02:17:08
это опубликованное значение, поэтому мы02:17:11
нужно настроить модель v для этой проверки02:17:14
коробку, давайте просто назовем ее опубликованной и02:17:17
давайте инициализируем это как false, чтобы02:17:20
если что-то должно быть опубликовано02:17:22
мы должны это проверить, хотя это может быть02:17:25
что-то, что мы хотим использовать по умолчанию как02:17:27
правда, я думаю, мы можем по умолчанию считать это правдой02:17:29
это действительно не имеет значения, и мы это видим02:17:31
внутри браузера, да, это02:17:33
по умолчанию — true, так что все в порядке, но02:17:35
нам нужно принять это во внимание02:17:37
всякий раз, когда мы вызываем созданную страницу, мы будем02:17:40
добавьте туда опубликованное свойство и мы02:17:44
должно быть хорошо, но нам нужно02:17:47
отфильтровать то, что у нас есть в навигационной панели, и02:17:50
самый простой способ сделать это02:17:52
имеет вычисленное значение, поэтому давайте перейдем к02:17:55
navbar, мы добавим вычисляемую опцию и02:17:58
давайте просто назовем это опубликованными страницами и02:18:02
мы не хотим изменять массив страниц02:18:06
в любом случае вместо этого нам нужно02:18:08
вернуть массив, который имеет только02:18:12
опубликованные страницы, и мы можем сделать это с помощью02:18:15
вызов метода фильтра принимает02:18:18
функция обратного вызова, которая возвращает логическое значение02:18:21
значение, если это правда, то этот элемент в02:18:24
массив будет в новом02:18:26
массив, если он ложный, то он будет02:18:28
быть опущено, поэтому в нашем случае все, что мы действительно02:18:31
нужно сделать, это проверить опубликованные и02:18:33
это даст нам отфильтрованный массив, поэтому02:18:36
теперь мы можем использовать опубликованные массивы в наших02:18:39
for Loop, поэтому мы заменим страницы на02:18:42
опубликованные страницы, давайте вернемся и вуаля02:18:46
мы видим дом и окрестности, так что давайте добавим02:18:48
еще одна страница с некоторым содержанием, ссылка02:18:51
текст Будет отражать заголовок страницы02:18:55
URL-адрес на самом деле не имеет значения, потому что мы02:18:57
у меня нет этого с самого начала, когда бы то ни было02:18:59
мы нажмем на создание страницы и увидим ее02:19:01
и всякий раз, когда мы создаем страницу, она будет02:19:03
будет полезно очистить эту форму, так что давайте02:19:07
добавьте также этот код, чтобы после того, как мы02:19:10
создана страница вызова, мы установили все наши02:19:13
свойства возвращаются к исходной стоимости02:19:15
и это может быть немного утомительным процессом02:19:18
и если это то, что нам нужно02:19:20
сделайте несколько раз, тогда мы сможем просто написать02:19:21
метод, называемый ясной формой, и который02:19:24
сбросит форму до исходного значения02:19:26
значение, так что просто чтобы убедиться во всем02:19:28
работает так, как мы ожидаем, давайте еще добавим02:19:32
еще одна страница, содержащая некоторый контент02:19:36
связанный текст будет, но URL страницы будет02:19:40
пока.html мл но этого не будет02:19:43
опубликовано, поэтому прежде чем мы нажмем «Создать»02:19:45
страница, которую я хочу сделать, это перейти к просмотру02:19:47
инструменты разработчика, потому что я хочу увидеть02:19:50
какими будут данные приложения, вот здесь02:19:54
у нас есть массив страниц, который мы видим02:19:55
у нас есть четыре страницы, но мы, конечно,02:19:58
отображается только три, потому что02:20:01
контакт в настоящее время установлен как не02:20:04
опубликовано, поэтому мы собираемся добавить еще один02:20:06
объект здесь, который не опубликован, поэтому мы02:20:10
не вижу этого на панели навигации, но мы02:20:12
не видел обновления страниц, давайте02:20:15
вернемся назад, перейдем к другому компоненту02:20:17
давайте вернемся к концу приложения, вот и начнем02:20:20
у нас есть пять элементов в массиве и02:20:23
самое крутое в этом то, что если02:20:24
мы изменяем любую из этих опубликованных02:20:26
значения, мы увидим результаты02:20:29
автоматически в браузере, так что давайте02:20:32
изменить опубликованное значение на true для контактов и02:20:35
вот это мы хорошо увидим в следующем02:20:37
урок, я думаю, что хочу сделать это02:20:41
немного проще для конечного пользователя02:20:42
потому что существует связь между02:20:44
заголовок страницы и текст ссылки много02:20:48
иногда они будут одинаковыми02:20:50
поэтому было бы неплохо, чтобы по мере ввода02:20:53
заголовок страницы, который мы видим по ссылке02:20:56
текст автоматически обновляется, но, конечно02:20:58
это будет не так просто02:21:00
потому что ничего не бывает, но это будет02:21:03
тем не менее, хорошая функция в этом уроке02:21:06
мы собираемся улучшить возможности пользователя02:21:08
опыт создания страницы и02:21:12
причина в том, что есть почти02:21:13
связь один-к-одному между страницей02:21:15
заголовок и текст ссылки для большинства02:21:19
страниц они будут одинаковыми02:21:21
поэтому я хочу сделать это по мере ввода пользователем02:21:24
в заголовок страницы, я хочу, чтобы они02:21:27
символы будут автоматически02:21:28
реплицируется в текстовом поле ссылки, поэтому02:21:32
что для подавляющего большинства страниц02:21:34
пользователю не нужно вводить это значение02:21:36
это будет огромный рост производства02:21:38
и как разработчик программного обеспечения это мое02:21:42
задание, позволяющее пользователю получить работу02:21:45
сделано, что им нужно сделать, однако02:21:47
это не может быть так просто, потому что нет02:21:50
каждый связанный текст будет02:21:52
то же, что и заголовок страницы, поэтому в случае02:21:55
когда связанный текст отличается, мы02:21:58
нужно иметь возможность сохранить эту ценность02:22:00
чтобы когда пользователь обновлял страницу02:22:03
заголовок, который не отражен в связанном02:22:06
текст, так что это звучит довольно сложно02:22:08
но на самом деле это очень просто02:22:12
реализовать, мы собираемся использовать то, что02:22:13
вызвали наблюдателя, чтобы добавить наблюдателя, мы02:22:17
нужно добавить опцию просмотра в нашу02:22:21
компонент, а затем мы создаем метод02:22:23
который имеет имя значения, которое мы02:22:26
хотим посмотреть, поэтому в нашем случае мы хотим02:22:29
следите за названием страницы, потому что это02:22:31
что пользователь будет печатать02:22:33
в значении заголовка страницы меняется это02:22:37
Watcher собирается выполнить, и это02:22:40
собирается дать нам доступ к новому названию02:22:43
значение, а также старое значение заголовка и02:22:46
это действительно все, что нам нужно сделать, мы02:22:48
нужно проверить текст ссылки, который нам нужен02:22:52
нужно посмотреть, равен ли он старому02:22:54
название, потому что если это так, то мы знаем, что02:22:56
пользователь не изменил текст ссылки, поэтому02:23:00
в этом случае мы обновим02:23:03
связанный текст с новым заголовком, однако, если02:23:06
пользователь изменил текст ссылки затем02:23:09
конечно, это будет отличаться от02:23:10
старое название, и в этом случае мы не делаем02:23:13
что угодно, чтобы мы могли вернуться к02:23:14
браузер, и мы сможем это проверить, чтобы02:23:17
мы начинаем вводить заголовок страницы, мы можем02:23:19
увидеть, что связанный текст02:23:21
автоматически обновляется, это будет02:23:23
сэкономите нам много времени, чтобы мы02:23:26
можем добавить некоторый контент, тогда мы можем добавить02:23:29
URL, и тогда мы закончим, и тогда мы02:23:33
можно начать добавлять пятую страницу, но02:23:36
пользователь может решить: «ОК, я хочу»02:23:38
на самом деле другое значение для пятой страницы02:23:41
релизы для текста ссылки, так что это02:23:43
будет какая-нибудь страница, но потом да, я02:23:46
не хочу, чтобы заголовок страницы был страницей02:23:48
пять, это будет что-то02:23:51
совершенно разные и обратите внимание, что02:23:53
связанный текст остается тем же значением, поэтому02:23:56
у нас есть тот функционал, который нам нужен02:23:58
и мы могли бы даже сделать шаг02:24:00
далее, сделав что-нибудь со ссылкой02:24:03
URL, есть много разных способов02:24:05
что мы могли бы приблизиться к этому мы могли бы02:24:06
возьмите связанный текст, мы можем сделать его02:24:09
строчные буквы замените пробелы на02:24:12
подчеркивание, а затем автоматически02:24:14
заполните URL-адрес. Я имею в виду, что там много02:24:17
вещи, которые мы могли бы сделать, чтобы положить конец02:24:19
пользователям живется немного проще, но02:24:21
вместо этого я хочу поговорить02:24:22
о различиях между компьютерными02:24:25
собственность и наблюдатель, потому что есть02:24:28
между ними много путаницы, но02:24:31
в основном это сводится к этому вычисленному02:24:33
свойства просто возвращают значение, которое они02:24:36
использовать имеющиеся данные, чтобы02:24:39
вычислить значение, которое затем будет использоваться в нашем02:24:42
шаблон, в который он не вносит никаких изменений02:24:45
в нашем штате он ничего не мутирует02:24:48
все это просто вычисляет значение на основе02:24:50
по текущим данным The Watcher на02:24:54
другая рука наблюдает за собственностью02:24:57
измениться, и это дает нам возможность02:25:01
внести изменения в наше состояние, рассчитанное таким образом02:25:04
значения вычисляют и возвращают значение02:25:05
Наблюдатели следят за изменением значения и02:25:09
позволяет нам изменять наше состояние, помните02:25:11
эти два правила, и у вас не будет02:25:14
проблема с использованием вычисленных свойств и02:25:17
Наблюдатели правильно события являются02:25:20
жизненная основа любого приложения с02:25:22
графический интерфейс, это основной способ02:25:24
что мы взаимодействуем с пользователями, но в02:25:27
с точки зрения нашего приложения View, это также02:25:29
способ взаимодействия компонентов02:25:31
друг с другом теперь технически02:25:34
только события, которые мы использовали до сих пор02:25:37
являются ли события Dom в любое время, которое мы установили02:25:40
событие нажатия кнопки и даже02:25:43
событие клика, которое мы настроили внутри02:25:46
панель навигации, вы знаете, у нас есть эта панель навигации02:25:48
компонент ссылки, где мы настраиваем клик02:25:51
событие, даже если это сделано на02:25:54
ссылка на панель навигации, которая на самом деле следует за ней02:25:57
до элемента a, который02:25:59
непосредственно внутри этого компонента, поэтому02:26:01
все до сих пор было просто02:26:03
типичные события Дома теперь мы эмулировали02:26:07
события, такие как, например, внутри02:26:10
создайте компоненты страницы, у нас есть эта опора02:26:13
вызываемая страница, созданная там, где мы привязали02:26:16
функция для этого реквизита, чтобы всякий раз, когда02:26:19
создается объект страницы, мы называем это02:26:21
функцию, а затем мы эмулировали это02:26:24
событие, но это технически не02:26:26
событие, однако мы можем создать свое собственное02:26:29
пользовательские события, и есть преимущества02:26:31
делать это, а не подражать им02:26:34
как мы это сделали, например, мы02:26:36
действительно может упростить наш компонент02:26:39
потому что нам не нужно объявлять игрока02:26:41
наши мероприятия мы можем, если захотим, и02:26:44
могут быть некоторые преимущества в этом02:26:46
это, но нам не нужно их декларировать02:26:49
так что это одно, а второе02:26:52
что это облегчает чтение нашего кода02:26:54
Потому что давайте посмотрим на компоненты нашего приложения02:26:57
Итак, у нас есть панель навигации, куда мы направляемся02:26:59
много данных для разных реквизитов, тогда мы02:27:02
посмотрим на компонент создания страницы, и мы02:27:05
привязали что-то к созданной странице, но02:27:08
мы не обязательно знаем, что это такое02:27:10
пока мы не посмотрим на код и не02:27:12
видишь, о, это метод, так что это будет02:27:15
гораздо легче читать и понимать, что02:27:17
именно происходит, если бы мы использовали02:27:21
актуальный синтаксис для настройки события02:27:23
обработчик, и теперь у нас создана страница02:27:27
событие, которое мы обрабатываем с помощью02:27:29
функция под названием страница создана, мы не02:27:31
придется погрузиться в код внутри нашего02:27:34
компонент, чтобы понять это02:27:35
потому что это очень ясно, как то, кем мы являемся02:27:38
делая только эту строку в нашем02:27:41
шаблон, поэтому теперь нам просто нужно сделать02:27:43
эта работа с пользовательским событием, и это02:27:45
очень легко сделать, потому что все, что нам нужно02:27:48
сделать, это отправить это событие, у нас есть специальное02:27:52
свойство, называемое знаком доллара, теперь излучает02:27:55
знак доллара нужен только для того, чтобы сказать это02:27:57
это общественная собственность, так что это02:27:59
что-то законное и на самом деле02:28:02
рекомендуется использовать внутри наших02:28:04
компоненты, это не что-то такое02:28:06
частный или скрытый, поэтому мы хотим отправить02:28:11
событие, называемое просто страницей, созданной для02:28:14
первым аргументом, которому мы передали имя02:28:17
событие, которое мы хотим испустить, и это02:28:20
выдаст это событие, теперь есть02:28:23
Здесь стоит обратить внимание: я использую Camel02:28:25
регистр имени всякий раз, когда мы его публикуем02:28:28
событие всякий раз, когда я настраиваю прослушиватель, я02:28:31
используйте тире между страницей и02:28:34
создано, поэтому я следую тем же правилам02:28:36
что у нас есть для реквизита, за исключением этого02:28:39
конечно, для мероприятий, поэтому, если все, что мы02:28:42
нужно сделать, это опубликовать созданную страницу02:28:45
событие, то мы закончили, но это не то02:28:48
нам также необходимо предоставить информацию02:28:51
связано с этим событием, поэтому для02:28:54
второй аргумент, который мы собираемся передать02:28:55
объект, который создается, когда это02:28:59
страница создана, давайте сохраним ее.02:29:02
зайди в браузер и давай проверим это02:29:04
все остальное должно работать так же, как02:29:07
так было раньше, поэтому все, что нам нужно, это немного02:29:09
данные внутри этих полей, чтобы мы02:29:11
можно нажать на создание страницы и вот она02:29:13
вот страница, которую мы только что создали02:29:16
и поскольку мы видим это здесь, это означает02:29:18
что событие создания страницы произошло и02:29:21
компонент приложения обработал это событие02:29:24
все в порядке, теперь я сказал, что у нас нет02:29:26
объявлять о наших событиях внутри нашего02:29:29
компоненты, но мы можем, если захотим, и02:29:31
в этом есть свои преимущества в первую очередь02:29:33
из всех самый простой способ объявить02:29:36
событие состоит в том, чтобы использовать опцию излучения и02:29:39
это очень похоже на реквизит, где мы02:29:41
может предоставить массив, содержащий02:29:44
названия событий, которые мы излучаем02:29:48
из этого компонента, поэтому страница создана и02:29:52
это было бы самое простое, что мы могли бы сделать02:29:54
можем сделать, мы также можем настроить эмиссию02:29:58
собственность как объект, чтобы мы могли02:30:01
выполнить проверку наших событий, поэтому для02:30:04
пример, событие создания страницы должно02:30:07
предоставить объект страницы, который был создан02:30:11
поэтому внутри этого метода мы можем написать02:30:15
код, который будет проверять полезную нагрузку02:30:18
которые мы отправляем через страницу02:30:21
создан даже в этом случае, например, если мы проверим02:30:24
если заголовка страницы нет, то мы02:30:29
хотел бы вернуть false, потому что02:30:32
проверка этого объекта не удалась02:30:35
должен иметь заголовок страницы, и если мы02:30:37
необходимо предоставить любую информацию, которую мы02:30:40
мог бы сделать это, просто написав что-нибудь02:30:41
на консоль или мы можем посмотреть02:30:44
консоль в браузере, так что давайте просто02:30:46
верните false, скажем так, несмотря ни на что02:30:48
того, что мы передаем для созданной страницы02:30:51
событие, которое не пройдет проверку02:30:53
теперь это не помешает нашему коду02:30:56
от выполнения, как вы увидите, давайте02:30:59
обновите, чтобы мы начали с02:31:01
очистим панель навигации, давайте добавим новый элемент, давайте02:31:05
поднимите инструменты разработчика, чтобы мы02:31:07
можно просмотреть консоль, на которую мы нажмем02:31:09
создайте страницу, сейчас мы увидим это предупреждение02:31:12
в консоли неверные аргументы события02:31:15
и что проверка не удалась, потому что02:31:17
мы вернули false в нашем коде проверки02:31:20
однако для события создания страницы посмотрите02:31:24
на панели навигации есть объект, который02:31:28
мы только что создали, так что этого не произойдет02:31:29
помешать нашему коду работать, но он02:31:32
дает нам возможность проверить02:31:34
те объекты, которые мы включаем с помощью02:31:38
событие, так что давайте сделаем это очень быстро02:31:41
давайте разобьем этот объект страницы на02:31:43
разные части, чтобы у нас было02:31:45
заголовок страницы, у нас есть контент, а затем02:31:48
у нас есть ссылка, а также у нас есть02:31:49
опубликовано, не так ли, поэтому у нас четыре02:31:52
фрагменты информации, поэтому теперь мы можем02:31:54
проверьте, нет ли у нас заголовка страницы, тогда02:31:57
мы вернем false, если у нас нет02:32:00
содержание, тогда мы вернемся осень, тогда мы02:32:04
могу проверить ссылку, если нет ссылки или нет02:32:07
ссылка и какой это был текст или не ссылка02:32:11
и URL, то, конечно, мы вернем02:32:14
false, и тогда мы сможем проверить тип02:32:16
наша публикация, поэтому, если тип публикации02:32:21
не логическое значение, нет, давай не будем этого делать, давай02:32:24
просто оставьте публикацию в покое, так что если02:32:27
все остальное пройдет, тогда мы просто02:32:29
просто верните true и все готово02:32:32
опять же, это 100 по желанию, ты не хочешь02:32:35
должны заявлять о своих мероприятиях, а вы этого не делаете02:32:38
должны их подтвердить, но способность02:32:40
сделать это есть, и он определенно может02:32:43
облегчить задачу по мере развития вашего02:32:46
приложения и ты такой, какой ты есть02:32:48
их отладка02:32:49
возможность создавать собственные события02:32:52
фантастическая функция, и она вам понравится02:32:54
будет использоваться в большинстве ваших02:32:56
приложения, но есть некоторые02:32:58
ограничения и, вероятно, наиболее02:33:00
громоздким является то, что этот компонент излучается02:33:03
события не очень хорошо разгораются, что я имею в виду02:33:05
к тому же, давайте просто подумаем02:33:08
обычный HTML и JavaScript, давайте забудем02:33:10
о просмотре на минутку и скажем так02:33:13
что мы нажимаем на кнопку ну то есть02:33:15
собираюсь сгенерировать событие щелчка и02:33:18
целью этого мероприятия будет то, что02:33:20
элемент кнопки, но событие не02:33:23
остановись на этом, по крайней мере, по умолчанию это02:33:25
собирается Bubble Up к своему родителю, который02:33:28
это элемент формы, то оттуда он02:33:31
собирается Bubble Up к своему родителю, который02:33:33
это элемент div, который затем будет всплывать02:33:36
до навигации, и он будет продолжать пузыриться02:33:38
пока он не достигнет вершины элемента02:33:40
иерархия и тот факт, что события02:33:43
пузырь дает нам возможность вызвать02:33:46
событие на элементе, и тогда мы можем02:33:49
прослушайте это событие выше в02:33:51
иерархия, которая может показаться, что это не так02:33:54
очень полезно, но я гарантирую вам, что это так02:33:57
теперь давайте подумаем о компоненте представления02:34:00
всякий раз, когда вы генерируете событие изнутри02:34:03
компонента, это событие может быть только02:34:06
прослушивается внутри прямого родителя02:34:09
компонент не всплывает02:34:13
иерархию, поэтому, например, мы создали02:34:17
пользовательское событие внутри страницы создания02:34:20
компонент, в котором мы создали страницу02:34:23
созданное событие, которое мы прослушивали для этого события02:34:27
внутри приложения теперь, конечно, приложение02:34:30
вершине иерархии, но если бы существовал02:34:32
что-то большее, чем приложение, это событие02:34:35
не будет пузыриться, он останавливается здесь, внутри02:34:38
компонента приложения, и это может быть02:34:40
очень громоздко, потому что бывают моменты02:34:42
что нам нужно прослушать событие, которое02:34:45
происходит глубоко внутри компонента02:34:47
иерархию, и есть способы, которыми мы можем02:34:49
обойти это, например, я02:34:51
собираюсь реорганизовать нашу ссылку на панель навигации здесь02:34:55
так что это внутри ссылки на панели навигации, которую мы02:34:57
есть элемент l i, поэтому мы собираемся02:35:00
сгенерируйте это здесь, внутри ссылки на панели навигации02:35:03
я думаю, что вместо внутри навигационной панели02:35:06
в таком случае имеет смысл02:35:09
означает, что нам нужно использовать цикл for02:35:12
и все остальное и место02:35:15
от этого по ссылке на панели навигации мы можем избавиться02:35:18
этот элемент Li и по большей части02:35:22
однако это будет работать нормально02:35:25
сейчас я скажу, что это действительно02:35:27
нет смысла слушать что-либо02:35:30
какие события здесь, по ссылке на панели навигации02:35:33
вместо этого мы хотели бы создать событие02:35:36
изнутри ссылки на панели навигации, чтобы02:35:39
всякий раз, когда мы нажимаем на ссылку, мы устанавливаем02:35:42
включить прослушиватель событий для генерации события02:35:45
который мы можем назвать Просто активированным, но02:35:48
в данном конкретном случае единственный02:35:50
компонент, который должен знать, что это02:35:53
ссылка активирована, это на самом деле наше приложение02:35:56
компонент, потому что именно здесь мы02:35:58
на самом деле сделать что-то для того, чтобы02:36:00
компонент приложения, чтобы знать, что02:36:03
произошло активированное событие, мы бы имели02:36:05
связывать события так, чтобы внутри02:36:09
панель навигации, мы бы это прислушались02:36:12
активированное событие, но тогда мы выпустим02:36:15
как-то иначе это можно было бы назвать02:36:17
активирован или его можно было бы назвать02:36:19
что-то еще, и тогда нам придется02:36:21
передать эту информацию, чтобы мы потом02:36:24
мог бы прослушать это внутри приложения02:36:26
работает, но это очень утомительно и заставляет02:36:29
наш код намного сложнее, это также делает02:36:32
это гораздо сложнее понять02:36:35
взгляд, потому что мы должны следить за02:36:37
цепочка событий, поэтому в предыдущих версиях02:36:40
посмотреть, что мы будем делать, это создавать то, что02:36:43
называемая глобальной шиной событий, она позволяет нам02:36:46
по существу генерировать электронные события по всему миру, поэтому02:36:50
что мы можем излучать их из любого компонента02:36:53
и слушать эти события внутри02:36:55
любой другой компонент независимо от02:36:57
отношения между этими компонентами02:36:59
проблема теперь в том, что с представлением 3 мы02:37:03
на самом деле у нас нет такой способности, которая есть у нас02:37:05
писать много дополнительного кода, чтобы02:37:07
создадим свой собственный глобальный автобус событий, и это02:37:12
меня расстраивает хотя бы потому, что это02:37:13
это была модель, которая была очень распространена02:37:16
используется во второй версии представления, и я бы02:37:19
хотелось бы увидеть что-то вроде02:37:20
это встроено, но с небольшим количеством02:37:24
дополнительного кода мы можем написать свой собственный02:37:26
Глобальная шина событий, вот кто мы02:37:29
собираюсь сделать внутри исходной папки02:37:32
мы собираемся создать новую папку, я02:37:34
собираюсь позвонить, использует идею, заключающуюся в том, что02:37:36
что это будет содержать некоторые02:37:38
утилиты, которые мы можем использовать в наших02:37:40
приложение и одна из этих утилит02:37:43
будет называться событиями, поэтому мы02:37:46
просто назовите это event.js, и мы02:37:49
собираемся создать объект, на самом деле мы02:37:51
собираюсь создать карту, которую мы будем использовать02:37:53
чтобы быть в курсе всех наших событий и02:37:57
затем мы собираемся экспортировать объект02:37:59
которые будут иметь методы, которые позволят нам02:38:01
настраивать события, а также отправлять их так02:38:05
давайте начнем с метода, который будет02:38:07
позвольте нам прослушивать события, которые я собираюсь02:38:09
назвать это очень похоже на идею02:38:12
из jQuery туда, где мы могли бы использовать on02:38:15
метод, а затем мы можем указать событие02:38:18
имя, а затем укажите функцию02:38:20
хотя в данном случае давайте просто позвоним02:38:23
этот доллар, потому что это следует за02:38:25
соглашение, которое мы найдем внутри02:38:28
наши компоненты представления, поэтому здесь мы хотим02:38:30
проверьте, нет ли у нас мероприятия02:38:33
с заданным именем и объектом карты02:38:36
дает нам этот метод has, чтобы мы могли02:38:39
проверяем, есть ли у нас ключ с данным02:38:43
название события, а если нет, то мы это сделаем02:38:47
создайте его, и мы присвоим ему значение02:38:50
пустой массив, так что тогда у нас будет02:38:53
массив, и вот как мы собираемся02:38:55
отслеживать все функции, которые02:38:58
настроены для данного события, поэтому мы будем02:39:00
получить массив для данного события и02:39:04
тогда мы вставим функцию, которая02:39:06
мы хотели послушать, потому что могли сделать02:39:08
что-то похожее на удаление события, но02:39:12
это требует немного дополнительного кода, поэтому02:39:13
Я не собираюсь это реализовывать02:39:15
у нас будет этот метод, чтобы, если мы02:39:18
в конечном итоге оно понадобится, тогда мы сможем02:39:20
реализую это позже, так что сейчас я просто02:39:23
собираюсь бросить предмет, у которого есть02:39:25
сообщение о том, что не реализовано и02:39:27
все будет хорошо, и тогда нам нужно02:39:29
метод генерации нашего события для его запуска02:39:33
если хочешь, я просто воспользуюсь02:39:36
та же терминология, которая используется внутри02:39:38
view, и это означает генерировать событие, поэтому мы02:39:41
нужно название события, нам также нужно любое02:39:45
предоставленные данные и еще раз нам нужно02:39:47
проверьте, есть ли у нас какие-либо события с02:39:51
заданное имя события, и если мы это сделаем, то02:39:54
мы хотим выполнить все функции02:39:56
которые были созданы для этого мероприятия02:39:57
что очень легко сделать, мы еще раз02:40:00
хотим получить этот массив, и мы это сделаем02:40:03
просто используйте для каждого метода, где02:40:05
мы выполним функцию, передаваемую в02:40:07
данные, и вот мы идем, а затем02:40:10
вопрос в том, как нам это добавить02:40:12
возразить против нашего приложения, которое мы хотим02:40:15
сделать его очень простым в использовании, поэтому мы02:40:18
можно просто добавить его ко всем02:40:20
компоненты, где мы хотим их использовать, и02:40:22
импортируйте это и все такое, и нет02:40:25
это много работы вместо того, что мы02:40:27
сделаю это частью нашего02:40:30
приложение, чтобы мы могли использовать его из02:40:32
внутри наших компонентов, где бы мы ни находились02:40:34
хочу, и нам не нужно его импортировать02:40:36
где-либо еще, кроме как изнутри02:40:39
main.js, так что давайте импортируем этот объект, который я02:40:43
просто назову это долларовым автобусом и02:40:45
это из событий утилит, и нам нужно02:40:50
разбейте нашу строку кода, где мы02:40:53
создаем приложение, а затем монтируем его02:40:56
вроде того, что мы делали еще когда-то, когда мы02:40:58
начал это путешествие, чтобы между02:41:00
создавая приложение и затем монтируя его, мы02:41:03
хочу добавить к нашей конфигурации есть02:41:07
свойство под названием «Глобальные свойства» и02:41:09
это позволяет нам добавлять свойства к02:41:12
каждый компонент в нашем приложении02:41:15
чтобы мы могли позвонить этому долларовому автобусу, мы можем02:41:18
назовем это долларовым автобусом событий, мы можем это назвать02:41:21
все, что мы хотим, это не имеет значения, но02:41:24
Я буду называть это просто долларом02:41:26
bus, и мы присвоим ему это значение, поэтому02:41:29
теперь каждый из наших компонентов собирается02:41:31
иметь этот долларовый автобус, чтобы мы02:41:34
можете использовать нашу глобальную шину событий из02:41:37
где угодно, это значит внутри навигационной панели02:41:40
Ссылка, что мы можем сделать, это использовать наш автобус, который мы02:41:45
вызовет метод излучения, и нам нужно02:41:47
что-то немного больше02:41:49
описательный, потому что сейчас мы имеем дело02:41:51
с глобальными событиями, так что назовем это02:41:53
Ссылка на панель навигации активирована, и это будет02:41:57
полезно предоставить индекс, который мы02:41:59
нет, но это достаточно легко сделать02:42:01
мы можем добавить индекс в качестве реквизита, а затем02:42:05
внутри панели навигации мы можем добавить индекс02:42:09
здесь, и я думаю, нам, наверное, стоит02:42:11
переименуйте это из ссылки на панель навигации в панель навигации02:42:14
предмет, но мы оставим его как есть для02:42:16
сейчас так сейчас нам просто нужно прислушаться02:42:19
это событие, и мы можем сделать это внутри02:42:21
приложение, но прежде чем мы это сделаем, есть ли у нас какие-либо02:42:25
другой код здесь, у нас была эта навигационная ссылка02:42:28
нажмите кнопку, мы можем избавиться от этого, и я02:42:31
не думаю, что мы где-либо упоминаем об этом02:42:34
иначе, так что нам следует пойти так02:42:36
это все, что нам нужно сделать, это внутри приложения02:42:38
это прослушивание этого события, вот что02:42:42
мы бы сделали, это установили нашу активную страницу равной02:42:46
к предоставленному индексу, так что давайте сократим это02:42:48
давайте избавимся от этой навигационной ссылки, нажмите02:42:51
опора, и поскольку это уже есть у нас02:42:53
создал здесь крючок, это будет02:42:55
идеальное место для прослушивания этого Global02:42:58
мероприятие, поэтому мы воспользуемся нашим автобусом02:43:01
объект, и мы будем слушать02:43:05
Ссылка на панель навигации активирована, и это происходит02:43:08
чтобы дать нам индекс, чтобы мы могли02:43:13
установите значение активной страницы, равное02:43:16
каким бы ни был индекс, так и должно быть02:43:19
все еще работаю так, как должен, потому что у меня нет02:43:21
на самом деле проверил это на карте, которая у меня есть02:43:24
вместо этого всегда использовал просто нетипичный объект02:43:27
карты, но мне кажется, что карта подходит для этого02:43:30
цель лучше, чем обычный объект, поэтому02:43:32
пойдем в браузер, давай обновим02:43:35
здесь, и давайте нажмем на нашу ссылку и02:43:38
ничего не происходит, так что давайте возьмем02:43:40
посмотри на консоль, у нас есть ошибки02:43:42
здесь так имена событий не определены и02:43:46
это потому что я где-то опечатался02:43:49
внутри событий, чтобы это было здесь02:43:53
строка 18, так что давайте избавимся от этого, давайте02:43:57
вернись в браузер и попробуй02:44:00
это еще раз, давай нажмем «о» и все02:44:02
похоже, он активируется, если мы нажмем на02:44:05
дома мы видим то же самое, так выглядит02:44:07
вроде всё работает, зайдём в приложение02:44:09
компонент и давайте раскомментируем наш02:44:12
просмотрщик страниц, чтобы мы могли увидеть,02:44:15
страница тоже изменится, поэтому02:44:18
давайте обновим, у нас есть контент, если мы02:44:20
нажмите на кнопку «Около», и мы увидим, что это02:44:23
тоже изменилось, так что мы готовы идти, мы02:44:26
теперь у нас есть глобальная шина событий, которую мы можем02:44:28
использовать в нашем приложении сейчас много02:44:31
иногда вам может не понадобиться глобальное событие02:44:34
автобус, но если ты это сделаешь, ты сможешь02:44:37
Реализуйте одно наше маленькое приложение02:44:40
технически это одностраничное приложение02:44:42
это одна страница, которая загружается в02:44:44
браузер, и тогда мы сможем перемещаться02:44:47
к другим частям приложения02:44:49
например, сейчас все, что мы можем02:44:52
навигация осуществляется между домом и окружением02:44:54
страницы, но если подумать, это02:44:56
не очень масштабируема, поскольку страницы02:44:59
которые у нас есть на данный момент, это все02:45:01
тот же тип, на самом деле он основан на данных02:45:04
на основе данных об этих страницах, но02:45:06
у нас также есть компонент, созданный страницей02:45:10
который имеет форму, чтобы мы могли создать02:45:12
больше страниц, которые в идеале должны быть внутри02:45:16
другой страницы, по которой мы будем перемещаться02:45:18
и тогда, если бы у нас были какие-либо другие02:45:20
утилиты, такие как возможность перечислить все02:45:22
страниц и редактировать их все эти02:45:25
будет и на других страницах, поэтому, если02:45:28
вы планируете делать какую-либо навигацию02:45:30
в ваших приложениях это дает много02:45:33
имеет смысл просто пойти вперед и получить02:45:34
начал с роутера, теперь давайте установим02:45:37
маршрутизатор, а затем мы поговорим о02:45:39
что это такое для наших приложений просмотра02:45:42
мы хотим установить View Router и02:45:45
мы хотим сохранить это в нашем проекте сейчас02:45:47
маршрутизатор в смысле программного обеспечения02:45:51
разработка требует ввода данных пользователем и маршрутов02:45:55
это какой-то фрагмент кода, который собирается02:45:57
для обработки этого ввода, если вы думаете о02:46:00
серверное приложение, такое как laravel или02:46:03
asp.net обычно есть маршрутизация02:46:06
двигатель, который ищет входящий02:46:08
запросы, и он будет маршрутизировать эти02:46:10
запросы к различным методам на02:46:13
контроллер, та же идея применима и к02:46:15
наше приложение View, у нас есть маршрутизатор02:46:18
который будет маршрутизировать URL-адреса на02:46:21
компонент, так что он по существу лечит02:46:24
отдельный компонент как отдельный02:46:26
страница в нашем приложении, но02:46:29
все приложение загружается в течение02:46:32
одна страница теперь причина, по которой вы бы02:46:35
хочу начать с просмотра маршрутизатора, чтобы02:46:37
начните с того, что у вас есть какие-либо02:46:39
навигация, потому что она меняет путь02:46:42
что вам нужно развивать свой02:46:44
приложение, как, например, у нас есть02:46:46
это приложение на нем, которое по сути является02:46:50
точку входа нашего приложения я знаю02:46:52
что основной файл JS, но это02:46:55
куда мы загружаем наши данные, здесь мы02:46:57
передать данные другим компонентам, чтобы02:47:00
это основная часть нашей02:47:02
приложение, но всякий раз, когда мы представляем02:47:05
возможность перехода на другие страницы02:47:07
ну, то, как мы взаимодействуем с нашими02:47:10
данные меняются, потому что это не так02:47:11
обязательно что-то, что мы можем просто02:47:13
загрузите здесь внутри нашего компонента приложения02:47:16
вместо этого это то, что мы почти02:47:17
нужно сделать внутри каждого человека02:47:19
компонент, который будет работать02:47:21
с этими данными, и вы поймете, почему это02:47:24
Итак, первое, что нам нужно сделать, это02:47:26
Определим маршруты для нашего роутера и02:47:30
мы собираемся сделать это внутри02:47:31
отдельный файл, и мы можем просто вызвать это02:47:35
Routes.js и первое, что нам нужно02:47:37
сделать, это импортировать две функции, первая02:47:40
будет называться создание маршрутизатора, это02:47:43
конечно, то, что мы используем для создания02:47:45
маршрутизатор, но всякий раз, когда мы создаем маршрутизатор02:47:47
мы также должны сказать ему, как с ним обращаться02:47:49
URL-адреса или, по крайней мере, как обрабатывать02:47:52
истории, и поскольку у нас ее нет02:47:54
поддержка серверного приложения, что мы02:47:57
мы собираемся использовать веб-хэш02:48:00
историю, поэтому нам нужно также импортировать это02:48:04
функция, называемая созданием истории веб-хэшей02:48:06
и мы будем использовать это всякий раз, когда мы02:48:08
создайте наш маршрутизатор, чтобы мы хотели импортировать02:48:11
это с точки зрения маршрутизатора, а затем мы02:48:14
создадим наш маршрутизатор, который мы назовем02:48:17
создайте функцию маршрутизатора, а затем мы будем02:48:19
передать объекту первое свойство02:48:21
что нам нужно определить, это история02:48:23
как будут относиться к истории02:48:26
внутри этого маршрутизатора, и здесь мы02:48:28
используйте это для создания истории веб-хэшей и02:48:31
тогда второе свойство — это маршруты02:48:34
что мы собираемся определить для нашего02:48:36
приложение это массив объектов02:48:39
и самые простые объекты собираются02:48:42
есть две вещи, которые будут02:48:45
URL-путь — это, по сути, то, что мы02:48:47
увидел бы в строке адреса и это02:48:50
как мы определяем, какие запросы получают02:48:53
направляется к каким компонентам, таким образом, домой02:48:56
нашего приложения будет просто косой чертой02:48:59
и тогда нам нужно будет указать02:49:01
компонент, который по сути будет02:49:03
обрабатывать этот URL-адрес так в смысле нашего02:49:07
приложение всякий раз, когда мы переходим к02:49:10
home любой компонент, который мы указываем,02:49:14
будет отображаться теперь у нас есть02:49:16
что-то уже доступное, что есть02:49:18
отвечает за отображение контента и02:49:20
это наша программа просмотра страниц, однако, если02:49:23
вы помните, что программа просмотра страниц очень02:49:25
зависит от данных, которые он получает02:49:27
он должен иметь возможность отображать02:49:30
отдельные страницы, и мы передаем это02:49:32
данные через реквизит, а теперь, когда мы02:49:34
собираемся использовать маршрутизатор, мы действительно не можем02:49:37
использовать реквизит, я имею в виду, что мы можем, но все данные02:49:41
это будет передано в02:49:43
компонент сейчас будет готов02:49:45
через URL-адрес, а не через родительский02:49:48
компонент, поэтому мы, по сути, собираемся02:49:51
нарушить наше приложение, а затем мы02:49:53
исправлю это, чтобы оно работало с02:49:56
маршрутизатор, чтобы у нас был домашний маршрут02:49:59
который будет нашим средством просмотра страниц, но02:50:01
тогда нам также нужен маршрут, чтобы иметь возможность02:50:04
чтобы создать страницу, давайте определим маршрут02:50:08
у которого есть URL-адрес Slash create, а затем02:50:11
мы хотим, чтобы компонент создания страницы был02:50:15
отображается всякий раз, когда этот маршрут обрабатывается02:50:18
теперь, конечно, нам нужно импортировать эти02:50:20
компоненты, поэтому давайте сначала импортируем02:50:22
просмотрщик страниц из наших компонентов02:50:26
просмотрщик страниц папок, тогда нам также понадобится02:50:29
также создайте компонент страницы, а затем02:50:31
после того, как мы создадим этот маршрутизатор, мы02:50:34
просто собираемся экспортировать его, чтобы мы могли02:50:37
затем импортируйте это в наш основной файл02:50:40
теперь мы еще можем сказать, что наше приложение02:50:43
компонент будет хорошо02:50:46
компонент приложения, но потом мы расскажем, скажем02:50:48
наше приложение, что у нас есть этот роутер02:50:50
что мы хотим использовать, давайте импортируем это02:50:53
из маршрутов, а затем мы хотим вызвать02:50:57
метод в нашем приложении просто называется use the02:51:00
метод use позволяет нам передать плагин и02:51:04
объект маршрутизатора, который мы только что создали02:51:06
это плагин, с помощью которого мы сообщаем нашим02:51:08
приложение для использования маршрутизатора мы все еще02:51:11
необходимо изменить наши глобальные свойства и02:51:13
затем мы монтируем наше приложение теперь02:51:15
другое изменение, которое нам нужно сделать, это02:51:17
внутри нашего компонента приложения мы по-прежнему02:51:20
хочу, чтобы здесь была наша панель навигации, но все остальное02:51:23
мы не хотим, потому что маршрутизатор02:51:26
собираюсь загрузить эту информацию и02:51:28
мы сообщаем нашему приложению, что хотим02:51:30
отобразить информацию о маршрутизаторе правильно02:51:33
здесь с этим компонентом просмотра маршрутизатора, так что02:51:36
компонент, который будет загружен02:51:38
маршрутизатором появится здесь или02:51:41
если бы мы хотели, чтобы это было над панелью навигации, которая02:51:43
это не имеет особого смысла, мы02:51:45
можно было бы сделать и это, но идея в том02:51:47
что это заполнитель, поэтому02:51:49
всякий раз, когда маршрутизатор представления перемещается по02:51:52
пользователя к компоненту, который является компонентом02:51:55
будет отображаться прямо здесь, поэтому наш02:51:58
просмотрщик страниц ничего не сделает02:52:01
прямо сейчас, так что давайте изменим это так, чтобы02:52:04
у нас есть текст, который мы можем видеть, поэтому02:52:06
у нас будет только заголовок страницы, а затем02:52:08
у нас будет контент и всякий раз, когда мы02:52:11
зайдите в браузер, мы должны увидеть, что мы02:52:13
есть наша панель навигации, а затем у нас есть02:52:15
заголовок страницы, поэтому обратите внимание на URL-адрес, который у нас есть02:52:18
хэш, потому что всякий раз, когда мы создавали02:52:21
маршрутизатору, которому мы сказали использовать хэш02:52:24
историю, поэтому, если мы хотим перейти к02:52:27
создайте страницу, нам нужно будет произнести хеш02:52:31
слэш, а затем создать, и это займет02:52:34
нас на страницу создания, которую вы можете увидеть02:52:36
теперь наш компонент создания страницы и так02:52:39
теперь возникает вопрос, как нам получить02:52:41
наши данные сейчас, конечно, это навигационная панель02:52:44
все еще отображаю ссылки на них02:52:46
страницы и причина очень проста02:52:48
потому что мы все еще загружаем эти данные02:52:50
внутри компонента приложения, и мы02:52:52
передать эти страницы на панель навигации, но02:52:55
мы только что эффективно сломали02:52:58
функциональность данных активной страницы02:53:01
потому что это то, что мы использовали, чтобы02:53:04
отобразить данную страницу сейчас, конечно,02:53:06
активная страница зависела от знания02:53:09
индекс страницы, которая была в данный момент02:53:11
отображается, что информация теперь находится в02:53:13
URL, и мы можем получить эту информацию от02:53:16
Параметры маршрута, которые мы рассмотрим в02:53:18
следующий урок02:53:20
прежде чем мы просто углубимся и начнем02:53:22
рефакторинг нашего приложения мы в первую очередь02:53:24
всем нужно поговорить о том, как нам нужно02:53:26
проведем рефакторинг нашего приложения и давайте сначала02:53:29
из всего лишь вкратце о том, что у нас было02:53:32
поэтому у нас было приложение, которое полагалось02:53:34
на массив объектов страницы, и мы02:53:38
использовал этот массив для создания меню02:53:42
в этом меню было несколько ссылок, которые всякий раз, когда02:53:44
мы нажали на ссылку, на самом деле это не так02:53:46
переведите нас на другую страницу, но это02:53:48
загрузил содержимое объекта страницы02:53:52
который был связан со ссылкой, которая02:53:54
мы нажали и все это было02:53:56
обрабатывается через компонент приложения02:53:59
отслеживал любую ссылку, по которой мы нажимали02:54:02
и затем предоставил страницу02:54:06
компонент просмотра страниц, чтобы затем02:54:09
контент будет отображаться, но в02:54:11
в предыдущем уроке мы добавили маршрутизатор просмотра02:54:13
и это кардинально меняет способ02:54:15
что мы собираемся использовать нашу программу просмотра страниц02:54:18
компонент, потому что теперь средство просмотра страниц02:54:22
обрабатываю маршрут прямо сейчас, этот маршрут02:54:25
имеет путь, состоящий из косой черты, которая является02:54:29
корень нашего приложения и в отличие от02:54:31
прежде чем мы не сможем просто передать страницу02:54:34
вместо этого нам нужно отобразить в качестве реквизита02:54:36
начни думать с точки зрения просто типичного02:54:39
веб-приложения, поэтому, если мы забудем о02:54:41
просмотреть Всего на короткую минуту, давай02:54:44
представьте, что у нас есть веб-сайты-блоги и02:54:47
мы хотим отобразить отдельный блог02:54:50
хорошо опубликуйте, как мы это сделаем02:54:51
это иметь какой-то уникальный02:54:53
идентификатор в URL-адресе блога02:54:58
приложение может выбрать эти данные02:55:00
из URL-адреса он может получить02:55:02
информацию из базы данных, а затем02:55:04
отобразить это на веб-странице, которая02:55:07
в основном, что нам нужно делать с нашими02:55:10
приложение, которое нам необходимо предоставить02:55:13
уникальный идентификатор объекта страницы02:55:15
что мы хотим отобразить, чтобы мы могли02:55:17
получить этот объект и затем отобразить его02:55:19
внутри средства просмотра страниц, поэтому все данные02:55:22
этот просмотрщик страниц будет полагаться на02:55:25
будет поступать из URL-адреса, поэтому нам нужно02:55:28
чтобы обозначить внутри нашего маршрута, что там02:55:32
это какой-то уникальный идентификатор, который нам нужен02:55:35
работать, и мы делаем это с тем, что02:55:37
называемый параметром, параметр начинается с02:55:41
двоеточие, а затем за ним следует какое-то02:55:43
имя и в этом случае я позвоню02:55:45
это индекс, потому что у нас так02:55:47
имел в виду отдельную страницу02:55:51
объекты, поэтому у этого маршрута теперь есть путь02:55:54
который ожидает индекса, который мы02:55:57
можно использовать, чтобы затем пойти и получить наши данные02:56:00
и показать, что как бы там ни было02:56:02
иметь побочный эффект, что я не все02:56:03
это безумие, потому что теперь, когда ты выглядишь02:56:07
в консоли пишет, что есть02:56:09
не найдено совпадений для местоположения с02:56:11
путь всего лишь косая черта, поэтому я хочу это02:56:16
приложение будет работать так, если мы02:56:18
не указывайте индекс, тогда он будет02:56:21
укажите страницу по умолчанию, которая может быть02:56:24
индекс 0 или это может быть самый низкий показатель02:56:27
индекс опубликованной страницы, но если02:56:31
мы предоставляем индекс, например индекс02:56:34
one, то мы отобразим страницу с02:56:39
этот индекс один, по крайней мере, пока он02:56:42
опубликовано, поэтому это означает, что наш02:56:45
Параметр индекса должен быть необязательным, и мы02:56:48
можно сделать это очень легко, просто добавив02:56:50
вопросительный знак в конце параметра, поэтому02:56:52
это исправит это конкретное02:56:54
проблема, так что теперь индекс не является обязательным02:56:58
на самом деле является пустой строкой всякий раз, когда мы02:57:01
иди и возьми это, так что теперь вопрос02:57:03
как нам получить это значение этого02:57:06
индексный параметр, давайте перейдем на нашу страницу02:57:09
просмотрщик, потому что теперь это компонент02:57:11
это обработка этого маршрута, которую мы не делаем02:57:14
у страницы больше нет реквизита, так что поехали02:57:18
вперед и просто избавьтесь от всего нашего реквизита02:57:19
вместе и добавим созданный хук02:57:22
поэтому на предыдущем уроке всякий раз, когда мы02:57:24
создали наш маршрутизатор, мы добавили его в наш02:57:28
приложение с методом использования, для которого это было02:57:31
включая плагин к нашему приложению02:57:33
и всякий раз, когда вы это делаете, мы получаем02:57:37
особая собственность, к которой у нас есть доступ02:57:39
во всех наших компонентах, называемых просто02:57:42
маршрут это относится к маршруту, который02:57:46
в настоящее время обрабатывается этой страницей02:57:49
компонент просмотра, поэтому у него есть свойство02:57:51
называемые параметрами, которые представляют собой объект, который02:57:55
содержит все параметры, которые будут02:57:57
определено внутри нашего пути маршрута, поэтому мы02:58:00
есть только один, и это индекс, поэтому мы02:58:03
действительно могу написать это в02:58:05
консоль, чтобы мы могли видеть, что это02:58:08
значение, и если мы просто выпишем02:58:12
параметры, то это покажет нам02:58:14
объект и все, что внутри него, поэтому02:58:16
всякий раз, когда мы заходим в браузер, мы видим02:58:18
что у нас есть индекс, но он пустой02:58:21
строка и, конечно, мы могли бы добавить немного02:58:24
другое значение для индекса, давайте добавим02:58:26
индекс один, и мы увидим, что это02:58:29
значение индекса равно единице, теперь есть02:58:32
оговорка с этим и с этим, это не так02:58:35
неважно, что мы включаем в качестве индекса02:58:37
параметр это может быть строка символов02:58:40
и индекс будет этим значением, поэтому есть02:58:44
некоторая проверка, которую нам нужно будет сделать02:58:46
так что давайте сделаем это для контента, давайте02:58:51
возьмем индексный параметр и давайте просто02:58:54
отображать это как контент, который мы, конечно,02:58:57
необходимо использовать правильный синтаксис для вывода02:59:00
это значение, но теперь, когда мы знаем, как это02:59:02
будет работать, тогда мы сможем начать02:59:06
рефакторинг нашего приложения так, чтобы02:59:09
просмотрщик страниц может выйти и получить02:59:11
соответствующую страницу, чтобы она могла затем02:59:14
отобразите этот контент, и мы получим02:59:16
начал с этого на следующем уроке в02:59:19
На предыдущем уроке мы обсуждали, как мы02:59:21
собираемся загрузить данные на нашу страницу02:59:23
компонент просмотра, на который мы собираемся положиться02:59:25
по URL-адресу, чтобы дать нам индекс02:59:28
страница, которую мы хотим отобразить, поэтому это02:59:30
внутри компонента просмотра страниц мы02:59:32
просто получим эту страницу, и мы сможем02:59:35
затем отобразите содержимое, чтобы вопрос02:59:37
затем становится, как мы будем делать02:59:39
это хорошо, типичный шаблон - использовать02:59:42
централизованное хранилище данных, и в идеале мы02:59:45
будет использовать хранилище данных, которое является реактивнымОписание:
In this comprehensive course, Jeremy McPeak will teach you the fundamental concepts you need to start building applications with Vue 3. ► Download Vue.js scripts and plugins from CodeCanyon: https://codecanyon.net/search/vue.js UI frameworks have drastically changed the way we write web applications. There are many frameworks to choose from, and picking one can be hard. In this course, you'll learn why Vue.js is a great choice, and you'll discover how to use it in detail. You'll start with building the simplest Vue components and learning to use core features like data binding, props, events, and computed properties. Then you'll build that knowledge step by step with practical projects learning how to use the Vue CLI, forms, watchers, and custom events. You'll also master key concepts like the Vue router and the Composition API. By the end of this course, you'll be confident in using Vue.js for all your front-end development projects. Here's what the course covers: 1. Introduction 00:00:00 1.1 Introduction 2. Vue.js With no Tool-Chain 00:02:31 2.1 Getting Started With Vue 00:10:51 2.2 Using Loops to Generate Content 00:17:00 2.3 Binding Data to Attributes 00:25:11 2.4 Setting Up Events 00:33:15 2.5 Binding CSS Classes I 00:41:48 2.6 Using Computed Properties 00:48:05 2.7 Binding CSS Classes II 00:55:00 2.8 Introducing Components 01:04:19 2.9 Understanding Data Flow 3. Using the Vue CLI 01:13:00 3.1 Getting Started With the Vue CLI 01:21:30 3.2 Starting a Project From Scratch 01:32:18 3.3 Applying CSS to Components 4. Working With Data 01:41:51 4.1 Using the created() Lifecycle Event to Load Data 01:48:19 4.2 Working With Unset Props 01:55:19 4.3 Deciding When to Load Data 02:01:14 4.4 Working With Forms 02:08:43 4.5 Validating Forms 02:14:39 4.6 Updating and Filtering Data 02:21:05 4.7 Using Watchers 5. Creating and Using Custom Events 02:25:19 5.1 Creating Custom Events 02:32:48 5.2 Writing a Global Event Bus 6. Using Vue Router 02:44:37 6.1 Introducing Vue Router 02:53:19 6.2 Using Route Params 02:59:18 6.3 Loading Data for Views 03:10:07 6.4 Watching Params to Reload Data 03:16:57 6.5 Using the Router's Active Class 03:23:36 6.6 Nesting Routes 7. Using the Composition API 03:30:52 7.1 Introducing the Composition API 03:40:26 7.2 Providing and Injecting Dependencies Into Components 03:48:18 7.3 Accessing Props and Router Functions 03:54:58 7.4 Binding Data and Working Wth Forms 04:06:00 7.5 Defining Computed and Watched Values 04:16:18 7.6 Implementing the Delete Functionality 8. Conclusion 04:20:42 8.1 Conclusion NOTE: Current recommendations are to use create-vue with the Vite tooling for new Vue projects. vue-cli is in maintenance mode, but still works for creating Webpack-powered Vue apps like in this course. ► Download unlimited photos, fonts, and templates with Envato Elements: https://elements.envato.com/ Read free Vue tutorials on Envato Tuts+: https://code.tutsplus.com/categories/vue - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Envato Tuts+ Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/ Envato Elements All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/ ► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus ► Follow Envato Tuts+ on Twitter: https://twitter.com/envato ► Follow Envato on Facebook: https://www.facebook.com/unsupportedbrowser - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Готовим варианты загрузки
* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."
** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах
Вопросы о скачивании видео
Как можно скачать видео "Vue.js Tutorial: Beginner to Front-End Developer"?
Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.
Какой формат видео "Vue.js Tutorial: Beginner to Front-End Developer" выбрать?
Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.
Почему компьютер зависает при загрузке видео "Vue.js Tutorial: Beginner to Front-End Developer"?
Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.
Как скачать видео "Vue.js Tutorial: Beginner to Front-End Developer" на телефон?
Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.
Как скачать аудиодорожку (музыку) в MP3 "Vue.js Tutorial: Beginner to Front-End Developer"?
Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.
Как сохранить кадр из видео "Vue.js Tutorial: Beginner to Front-End Developer"?
Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.
Сколько это всё стоит?
Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.