Шаг 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"; второй — Vue directive. Вообще говоря, все директивы Vue записываются как слово в нижнем регистре с префиксом v-. Для этого элемента input вы будете использовать директиву Vue model (поэтому напишите 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

Во второй части мы расширим возможности приложения для выполнения вычитания, умножения и деления.

Перейти к части 2: выбор из нескольких операторов