Шаг 1. Добавьте элемент на свою страницу и установите его в качестве корневого элемента нового экземпляра Vue.
- В области HTML добавьте пустой элемент
div
, который имеетid
изapp
. - На панели JS назначьте переменной
vm
инициализацию экземпляраnew
Vue
. - Передайте этому новому экземпляру Vue единственный аргумент — значение типа
object
, которое имеет одну паруkey: value
: ключ —el
, аvalue
— этоstring
селектора CSS для выбора элемента сid
изapp
.
Шаг 2. Добавьте данные в свой экземпляр Vue и привяжите их в своем шаблоне.
- Находясь в панели JS, добавьте еще одну пару
key: value
к вашемуobject
. Егоkey
равноdata
, а его значение равноobject
. Это значение вложенного объекта имеет одну паруkey: value
. Егоkey
— этоfirst
, а егоvalue
— это число1
. Не забудьте добавить необходимую запятую,
после первой парыkey: value
в вашем объектеdata
. - Вернувшись на панель HTML, внутри
div
добавьте элементinput
. У него будет два атрибутаkey="value"
: первый — собственный атрибут HTML с именемtype
— присвойте ему значение"number"
; второй — Vuedirective
. Вообще говоря, все директивы Vue записываются как слово в нижнем регистре с префиксомv-
. Для этого элементаinput
вы будете использовать директиву Vuemodel
(поэтому напишитеv-model
). Подобно тому, как недавно атрибутуtype
было присвоено значение"number"
, вы присвоите этой директивеv-model
значение"first"
. - Поскольку Codepen автоматически обновляет вашу страницу после любого периода паузы при наборе текста, вы должны заметить, что в поле ввода каким-то образом есть значение
1
. Я рекомендую вам заменить1
на панели JS новым номером, например3
. Теперь вы должны увидеть3
в поле ввода. Это доказательство того, что вы успешно выполнили последние несколько шагов. Поздравляю! Прежде чем продолжить, измените его обратно на1
. - Прежде чем мы двинемся дальше, давайте добавим
modifier
к директивеv-model
, которая гарантирует, что мы захватываем и отображаем значение, тип которого являетсяnumber
, а неstring
. Синтаксис добавленияmodifier
к директиве Vue таков:v-directive.modifier
. В данном случае мы хотим добавить модификаторnumber
.
Шаг 3: Повторите то же самое, что и в шаге 2.
- На панели JS добавьте еще одну пару
key: value
к вашему объектуdata
(у которого уже есть параfirst: 1
). На этот разkey
— этоsecond
, аvalue
— это1
. Не забывайте запятую,
после первой парыkey: value,
. - На панели HTML добавьте еще один элемент
input
с такими же атрибутами, как и у уже существующего. - Для второго из двух идентичных элементов
input
измените значение директивыv-model
сfirst
наsecond
. Теперь вы должны увидеть два поля ввода на странице, каждое из которых имеет 1 в качестве значения. Как и ранее, попробуйте изменить JS так, чтобыsecond
имело значение3
. Вы должны увидеть мгновенное обновление страницы и второе поле ввода, показывающее значение 3. Еще раз поздравляем! Прежде чем продолжить, изменитеsecond
обратно на1
. - Наконец, в HTML и между обоими элементами
input
введите символ+
. Таким образом, на странице вы должны увидеть в одну строку:1 + 1
.
Шаг 4: Вычисление и отображение ответа
Эта инструкция может показаться длинной, но я рекомендую вам полностью прочитать ее один раз, а затем попробовать написать код при втором прочтении. Если вы застряли, изображение ниже полного кода.
- В вашем JS
object
, переданный экземпляруnew Vue
, в настоящее время имеет две парыkey: value
: одна, чьяkey
равнаel
, и другая, чьяkey
равнаdata
. Также должна быть запятая,
послеvalue
el
. - Вам нужно добавить третью пару
key: value
послеdata
.key
равноcomputed
, а само значение равноobject
. - Этот
object
будет иметь одну паруkey: value
.key
— этоanswer
, а значение… ну,function
. Этотfunction
не получает никаких параметров. В телеfunction
вы напишете одну строку.function
долженreturn
быть результатом сложения двух значений:this.first
иthis.second
. - Дважды проверьте, не забыли ли вы поставить запятую
,
после закрывающей фигурной скобки},
дляobject
, которое является значением ключаdata
. - Вернувшись на панель HTML, после второго элемента
input
добавьте элементspan
. Между открывающим и закрывающим тегами введите:{{answer}}
. Если вы набрали его правильно, вы должны увидеть число2
после второго ввода на странице. Если вы видитеanswer
с одной или нулевой фигурными скобками с обеих сторон, вы набрали ее неправильно. - Наконец, на панели HTML между вторым полем
input
и новым элементомspan
введите символ=
. Таким образом, уравнение правильно отображается в браузере как1 + 1 = 2
.
Чтобы объяснить, во всех трех случаях (входные данные и теперь этот диапазон), где вы вводили first
second
и answer
, Vue оценивает их как выражения и отображает соответствующие значения для каждого key
с аналогичным именем, которые вы добавили в свою панель JS. first
и second
исходят из объекта, назначенного data
. answer
происходит от function
, назначенного answer
key
объекта computed
.
В первых двух случаях значение в вашем шаблоне отображается в контексте атрибута HTML. В Vue синтаксис двойной фигурной скобки {{ }}
здесь не разрешен. Однако в третьем случае answer
отображается не как атрибут, а как текстовое содержимое. Этот контекст требует синтаксиса двойной фигурной скобки {{ }}
для выполнения того, что называется интерполяцией текста. Все, что появляется между двойными фигурными скобками, должно быть допустимым выражением JavaScript и будет оцениваться. Результат будет отображаться на месте.
Это знаменует собой конец части 1
Во второй части мы расширим возможности приложения для выполнения вычитания, умножения и деления.