Пишем калькулятор на Vue.js

Поделиться
HTML-код
  • Опубликовано: 25 авг 2024
  • Пишем простейший калькулятор на Vue.js.
    Codepen: codepen.io/ksy...
    Vue.js документация: vuejs.org/v2/g...
    vue.js CDN: cdn.jsdelivr.n...
    *уточнение по функции eval(): Функция eval(code) позволяет выполнить код, переданный ей в виде строки. Таким образом, мы можешь записать в input калькулятора абсолютно любое математическое выражение в рамках синтаксиса js , и функция вернёт результат. Тем не менее, не советую с помощью этой функции реализовывать калькулятор для продакшена, ведь функция исполняет любой js код, который получает. Хотя в целом, можно повесить регулярное выражение, которое будет предотвращать выполнение данной функции, если в строке содержится что то, кроме разрешенных выражений. :)

Комментарии • 63

  • @fairboi3061
    @fairboi3061 5 лет назад +17

    Когда следующий урок??

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +1

      Скоро 👀😉

    • @prototype643
      @prototype643 6 месяцев назад

      Следующего видео не будет, автор не может больше заниматься данной деятельностью

  • @roman222k
    @roman222k 4 года назад +10

    Мне понравилось. Одно дело когда говорят теорию, считают и выводят цифры, другое дело как тут - реальный пример использования. Подписался в надежде не выход подобных роликов. Спасибо.

  • @damir_tok
    @damir_tok 5 лет назад +16

    Объясняешь очень понятно, да и голос приятный)

  • @sauvignonblanc5086
    @sauvignonblanc5086 4 года назад +5

    Класс 👍🏼 Очень хорошо поясняешь) Хотелось бы больше таких уроков на разные темы по JS и не только)

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  4 года назад +1

      Хорошо, скоро возможно будет что нибудь по svelte или node.js😉

    • @sauvignonblanc5086
      @sauvignonblanc5086 4 года назад

      @@user-bc2nc5lt5p Оо, по ноде было бы неплохо :)

  • @timbright397
    @timbright397 2 года назад +3

    Круто, краткость - сестра таланта, благодарю, достаточно понятно и результат красивый!

  • @valeevadward
    @valeevadward 3 года назад +2

    Артём, не останавливайся! -)

  • @nargizaliyeva9743
    @nargizaliyeva9743 3 года назад +1

    Супер! Спасибо за познавательный урок! Побольше снимай такие видео!

  • @user-ny4ih2jf5j
    @user-ny4ih2jf5j 10 месяцев назад

    Спасибо за отличное практическое занятие с пояснениями

  • @user-dp8xc9tx8n
    @user-dp8xc9tx8n 3 года назад +3

    Бро спасибо за урок. Было бы круто если было еще такие маленькие практические работы на Vue. Тебе удачи

    • @richardmiller6829
      @richardmiller6829 3 года назад

      Бро?
      Ты же не русский. Тебе можно

    • @user-dp8xc9tx8n
      @user-dp8xc9tx8n 3 года назад

      @@richardmiller6829что ты говоришь. Что это значит. Ты не русский. Тебе можно. А чё тебе нельзя что ле

    • @richardmiller6829
      @richardmiller6829 3 года назад

      @@user-dp8xc9tx8n слово бро это английский

    • @richardmiller6829
      @richardmiller6829 3 года назад

      @@user-dp8xc9tx8n где твоя грамматика

    • @user-dp8xc9tx8n
      @user-dp8xc9tx8n 3 года назад +2

      @@richardmiller6829 ладно в следующий раз буду писать с грамматикой

  • @_fulgrim_9865
    @_fulgrim_9865 2 года назад

    Супер, чётко без воды.

  • @AlexanderGrinvald
    @AlexanderGrinvald 3 года назад

    отличное объяснение, побольше бы таких видео доступным языком, надеюсь на продолжение

  • @dunno10
    @dunno10 5 лет назад +2

    круто ! калькулятор сделан оригинально, по крайне мере из всех калькуляторов на vue этот код написан лаконичным

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +2

      Я рад, что вам понравилось !

  • @yaroslav9465
    @yaroslav9465 Год назад

    Спасибо большое, здоровья тебе друг)

  • @WEBSTART-LIVE
    @WEBSTART-LIVE 4 года назад +6

    «eval is evil»

  • @podbot4231
    @podbot4231 3 года назад +1

    первый внятный пример работы vue, спасибо) правда у меня почему-то не вводятся цифры с клавиатуры, и кнопкой enter идет не подсчет результата, а ввод ранее выбранной цифры. Но это уже особенности моего хрома, видимо)) пытаюсь пофиксить.

  • @user-race-Vulcan
    @user-race-Vulcan 3 года назад +2

    Лол, реально 500 подписчиков? Ты же классный..., странный подбор роликов у youtube.
    Я сначала решил 500 тыс., все интересно и годно... Рекомендую всем кто мимо проходит, даже если это вам не надо!

  • @dogedoge4945
    @dogedoge4945 4 года назад

    Спасибо за реальный, нормальный пример

  • @user-yp9ou7zp9c
    @user-yp9ou7zp9c 3 года назад

    Всё таки стоило добавить некий фильтр, ибо всё таки eval, новички могут это не учесть в продакшене
    Но в целом, хороший урок )

  • @kulchaka
    @kulchaka 3 года назад +1

    круто,
    thx😉

  • @sergeykozhevnikov4208
    @sergeykozhevnikov4208 3 года назад

    Здорово. Спасибо!

  • @user-race-Vulcan
    @user-race-Vulcan 3 года назад

    Возможно стоит проанализировать какие компоненты в моде у джунов и соответственно проблемные, и ролики по их написанию строчить 7-10 минут под музыку. :))
    Хз, жаль терять интересного ютубера!

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  3 года назад

      Спасибо за совет! Ну я делаю видео раз в полгода 😂 Вот хочу на днях про Vue 3 записать

  • @POEOneLove
    @POEOneLove Год назад

    А как этот калькулятор внедрить на живой сайт на любой ЦМС?

  • @user-cs4bp5me5h
    @user-cs4bp5me5h 4 года назад +1

    Покажешь еще какие нибудь проекты на Vue.js?

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  4 года назад +1

      Да, возможно в будущем. Никак времени нет, хоть и хочется что нибудь записать ..(

  • @wond3rfulll
    @wond3rfulll 3 года назад

    Что за тема и подсветка в vs code?
    UPD: нашел, называется Palenight

  • @Tim40404
    @Tim40404 4 года назад

    12:00 - что сделает, транспинирует? может просто выполнит содержимое строки?

  • @alekseigrin6126
    @alekseigrin6126 2 года назад

    "расширения вот такие..."

  • @timkandareli259
    @timkandareli259 4 года назад +1

    А как пофиксить чтобы нельзя было вводить подряд несколько операторов?

    • @unlimited3538
      @unlimited3538 4 года назад

      Можно поставить обработчик событий на ввод, к примеру @input или же подписаться на обновление result с помощью watch

  • @Max-kr4ie
    @Max-kr4ie 5 лет назад +2

    Че так мало уроков. Пили еще

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +1

      Вышло новое видео, про реакт! Следующий видос про vue, думаю рассказать про vuex или mixins

    • @Max-kr4ie
      @Max-kr4ie 5 лет назад

      @@user-bc2nc5lt5p спасибо что написал, заценю завтра с утра.

  • @user-mn2po8ns2z
    @user-mn2po8ns2z 3 года назад

    годно

  • @web2905
    @web2905 3 года назад

    Спасибо, только eval не безопасно использовать, какая есть альтернатива?

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  3 года назад +1

      You can use math.js to evaluate expressions
      mathjs.org/docs/expressions/parsing.html

    • @web2905
      @web2905 3 года назад

      @@user-bc2nc5lt5p Спасибо

  • @lykabraine2766
    @lykabraine2766 5 лет назад +1

    Почему все делают калькулятор на eval

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +1

      Потому что это удобно!) Зачем придумывать велосипед если js сам все прекрасно умеет? Конечно для продакшена придется написать регулярку, которая будет принимать только математические выражения, а не скрипты, которые могут влезть в "мозг" страницы )

    • @lykabraine2766
      @lykabraine2766 5 лет назад +1

      @@user-bc2nc5lt5p на js ето работает а если захочеш написать на другом якизе там eval() нету

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +2

      Ну так и гайд то по vue.js ) а vue.js на js )

  • @aniris825
    @aniris825 5 лет назад

    будет лучше, если в codepen использовать тот же id, что и в видео (app вместо calc)

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  5 лет назад +1

      Исправил, теперь на codepen идентичный код😉

  • @yuritian8830
    @yuritian8830 9 месяцев назад

    eval не стоит вообще не стоит использовать.

  • @artemunix5223
    @artemunix5223 3 года назад +2

    Да также никто боевой проект не пишет)

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  3 года назад

      Видео в целом и не называется "как надо писать боевой проект")

    • @artemunix5223
      @artemunix5223 3 года назад

      @@user-bc2nc5lt5p та хотябы через vue cli сделалбы

    • @user-bc2nc5lt5p
      @user-bc2nc5lt5p  3 года назад

      Ну да, а ещё Vuex, ssr, рест апи с бд на борту, сокеты для рил тайм взаимодействия и т.д.

    • @artemunix5223
      @artemunix5223 3 года назад +1

      @@user-bc2nc5lt5p ясно понятно