Vue 3 - это последняя версия простой в использовании инфраструктуры Vue JavaScript, которая позволяет нам создавать клиентские приложения.
В этой статье мы рассмотрим, как создать простой калькулятор с Vue 3 и JavaScript.
Создать проект
Мы можем создать проект Vue с помощью Vue CLI.
Для его установки запускаем:
npm install -g @vue/cli
с NPM или:
yarn global add @vue/cli
с пряжей.
Затем запускаем:
vue create calculator
и выберите все параметры по умолчанию для создания проекта.
Нам также нужен пакет Math.js, чтобы мы могли оценивать строки математических выражений.
Для его установки запускаем:
npm install mathjs
Создать калькулятор
Мы можем создать калькулятор, написав:
<template> <div> <div>{{ expression }}</div> <form @submit.prevent="calculate"> <div> <button type="button" @click.stop="expression += '+'">+</button> <button type="button" @click.stop="expression += '-'">-</button> <button type="button" @click.stop="expression += '*'">*</button> <button type="button" @click.stop="expression += '/'">/</button> </div> <div> <button type="button" @click.stop="expression += '.'">.</button> <button type="button" @click.stop="expression += '9'">9</button> <button type="button" @click.stop="expression += '8'">8</button> <button type="button" @click.stop="expression += '7'">7</button> </div> <div> <button type="button" @click.stop="expression += '6'">6</button> <button type="button" @click.stop="expression += '5'">5</button> <button type="button" @click.stop="expression += '4'">4</button> <button type="button" @click.stop="expression += '3'">3</button> </div> <div> <button type="button" @click.stop="expression += '2'">2</button> <button type="button" @click.stop="expression += '1'">1</button> <button type="button" @click.stop="expression += '0'">0</button> <button type="submit">=</button> </div> <div> <button type="button" @click.stop="expression = ''">Clear</button> </div> </form> </div> </template> <script> import { evaluate } from "mathjs"; export default { name: "App", data() { return { expression: "", }; }, methods: { calculate() { this.expression = evaluate(this.expression); }, }, }; </script> <style scoped> button { width: 20px; } #clear-button { width: 50px; } </style>
Сначала мы добавляем строку expression
в верхнюю часть шаблона.
Затем мы добавляем кнопки для калькулятора.
Они используются, чтобы позволить нам добавлять символы к выражению, которое мы оцениваем.
Мы делаем это, объединяя символы в реактивное свойство expression
.
Для всех кнопок, кроме одной, установлено значение type
button
, поэтому мы не будем запускать метод calculate
, пока не будет нажата кнопка =.
Кроме того, у нас есть провайдер stop
, чтобы остановить распространение события click
.
В объекте компонента у нас есть метод calculate
для оценки введенного выражения.
У нас есть директива @submit.prevent
, позволяющая вызывать calculate
при отправке формы, когда мы нажимаем =.
prevent
позволяет нам предотвратить механизм отправки по умолчанию на стороне сервера.
Мы вызываем метод evaluate
из mathjs
, чтобы оценить введенное нами выражение.
Затем мы устанавливаем реактивное свойство this.expression
для возвращенного результата.
В теге style
мы устанавливаем ширину кнопки на 20 пикселей и устанавливаем кнопку очистки на 40 пикселей, чтобы текст находился внутри кнопки.
Заключение
Мы можем легко добавить простой калькулятор с Vue 3 и JavaScript.
Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!