Часть 5: Рефакторинг ненужных полей ввода [Учебник для начинающих: Изучите Vue, CSS Grid и Flexbox]

Прежде чем продолжить, убедитесь, что вы видите это в Codepen

Что мы выполним

К концу этой части наше приложение будет иметь нулевые входные данные. На их месте будут два заголовка, которые отображают данные из нашей модели.

На первых трех шагах мы останемся на панели JS, обновляя части нашей модели.

Шаг 1. Переименуйте свойства данных, чтобы лучше отразить их роль в модели.

Цель состоит в том, чтобы удалить оба поля ввода и заменить их двумя заголовками: один отображает текущее число total, а другое — число current, введенное пользователем.

На панели JS найдите объект data. В настоящее время у него есть два свойства, first и second, которые относятся к полям ввода. Мы собираемся изменить эти имена соответственно на current и total.

Шаг 2. Обновите значения вычисляемых свойств, чтобы они правильно ссылались на недавно названные свойства данных.

Обратите внимание, что функция answer в нашем объекте computed по-прежнему ссылается на this.first и this.second. Давайте исправим: по-прежнему должно быть три ссылки на this и два знака +, по одной между каждой ссылкой. Но первая ссылка должна быть на this.total, а последняя ссылка должна быть на this.current. Если это кажется обратным, то мне нравится, куда вы смотрите, и я надеюсь, что к концу этой серии вы поймете, почему они упорядочены таким образом.

Шаг 3: Рефакторинг метода updateTotal

Действие, которое мы собираемся выполнить, ненадолго остановит приложение. Не волнуйтесь, следующая часть предназначена специально для исправления того, что мы сломали здесь.

Измените функцию updateTotal следующими способами:

function должен принимать нулевые параметры по сравнению с тем, который он принимает в настоящее время.
Удалите строку, которая присваивает несуществующий параметр свойству экземпляра Vue selected.
Обновите вторую строку, чтобы this.answer было назначено this.total.

Чтобы подтвердить, ваша функция updateTotal теперь должна выглядеть так:

methods: {
  updateTotal: function() {
   this.total = this.answer
  }
}

Мы закончили обновление нашей модели на панели JS. Теперь давайте обновим наш шаблон в представлении на панели HTML.

Шаг 4. Замените первый ввод текстовым интерполированным заголовком уровня 1.

Вы правильно прочитали: удалите первый input — тот, у которого v-model связан со старым свойством first из нашей модели. Вместо него добавьте элемент заголовка h1 уровня 1.
Между открывающим и закрывающим тегами вашего нового h1 добавьте текстовую интерполяцию для отображения значения, связанного со свойством current из модели данных. Это был длинный способ написать <h1>{{current}}</h1> .

Шаг 5: Удалите второй ввод и вставьте другой заголовок с интерполяцией текста.

Как и выше: удалите второй input — тот, у которого v-model связан со старым свойством second из нашей модели.
Переместите курсор на новую строку между h1 и button, чтобы то, что вы собираетесь добавить, отображалось под h1, но над button на странице.
Добавьте сюда заголовок 2 уровня h2. Его текстовое содержимое должно быть интерполяцией текста total из нашей модели данных.

Шаг 6. Удалите знак «=»

Сделайте именно это: удалите строку кода с одним знаком =. Мы добавим его в более поздней части как рабочую кнопку.

Шаг 7. Обновите директиву в кнопке с цифрами, чтобы она ссылалась на недавно переименованное свойство.

Ранее в этой части мы переименовали first в current в нашей модели данных. Несколько минут назад мы удалили ввод, ссылающийся на first, и заменили его на h1, который ссылается на current. Есть еще одно место, которое все еще ссылается на first: директива v-on:click в кнопке, которая отображает все цифры.

Замените ссылку на first на current в директиве v-on:click в кнопке, отображающей все цифры. Теперь должно отображаться "current = digit" .

Попробуйте... и он сломан

Эта часть, к сожалению, рассказывает только половину истории. Нажатие кнопок сейчас не приносит большой пользы. Мы исправим самую большую ошибку в Части 6. Однако приложение не будет работать должным образом, пока не будет завершена Часть 8. Надеюсь, вы доведете это до конца.

Если вы считаете, что ваше приложение не работает из-за того, что вещи не работают, как описано выше, перейдите к части 6, чтобы увидеть скриншот моего Codepen до этого момента.

Это знаменует собой конец части 5

В части 6 мы повторно соединим одну из частей, которые мы разъединили в этой части, и ваш калькулятор станет на один шаг ближе к ожидаемой работе.