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!