Этот урок посвящен созданию функционала конвертации криптовалют в приложении Vue.js. Мы установим необходимую библиотеку и реализуем процесс получения данных от пользователя, их обработки и выполнения конвертации. Код и домашние задания доступны на сайте itproger.com.
Получение данных от пользователя
Приложение состоит из нескольких компонентов. Для обработки данных необходимо получать значения из дочерних компонентов и обрабатывать их в основном компоненте App.vue.
App.vue
В этом файле создадим переменные для хранения данных:
data() {
return {
amount: 0,
message: '',
cryptoFirst: '',
cryptoSecond: ''
};
},Также создадим методы для обработки данных, получаемых из дочерних компонентов:
methods: {
changeAmount(value) {
this.amount = value;
},
setCryptoFirst(value) {
this.cryptoFirst = value;
},
setCryptoSecond(value) {
this.cryptoSecond = value;
}
}Компонент Input
В этом компоненте, используя props, примем метод changeAmount:
props: {
changeAmount: {
type: Function,
required: true
}
},При вводе данных в поле вызовем метод changeAmount с помощью $event.target.value:
@input="changeAmount($event.target.value)"Компонент Selector
Здесь создадим атрибут setCrypto, принимающий разные методы в зависимости от компонента. Для первого компонента это будет setCryptoFirst, для второго – setCryptoSecond.
props: {
setCrypto: {
type: Function,
required: true
}
},При нажатии на элемент вызовем переданный метод setCrypto с соответствующим значением (например, ‘btc’, ‘eth’, ‘usdt’):
@click="setCrypto('btc')"Для обеспечения активности выбранного элемента добавим переменную current и метод selectItem:
data() {
return {
current: ''
};
},
methods: {
selectItem(w) {
this.setCrypto(w);
this.current = w;
}
}Используем условное применение класса active в зависимости от значения current.
Реализация процесса конвертации
В компоненте Input добавим кнопку с обработчиком события, вызывающим метод convert, переданный из App.vue через props.
В методе convert добавим проверки:
- Проверка на положительное значение amount.
- Проверка на совпадение выбранных криптовалют.
- Проверка на наличие выбранных криптовалют.
Установим библиотеку crypto-convert с помощью npm install crypto-convert. Подключим её в App.vue и создадим объект converter.
После проверки данных используем converter для выполнения конвертации и выводим результат на экран. Для этого добавим переменную result и соответствующие условные отображения. Добавим условия для обработки различных пар валют и вывода соответствующих результатов конвертации.
В результате создан функционал конвертации криптовалют, включающий получение данных от пользователя, валидацию данных и использование внешней библиотеки для выполнения конвертации. Приложение обрабатывает различные пары валют и выводит результат на экран. Дополнительно были применены стили для улучшения внешнего вида приложения.