Как мы можем построить div Шрёдингера? из Vue!

1656579252 kak my mozhem postroit div shryodingera iz vue

Содержание статьи

от ZAYDEK

Есть 50% шансов, что мы справимся с этим…

Прежде чем перейти к статье, я просто хочу поделиться, что я создаю продукт, и я хотел бы собрать некоторые данные о том, как лучше обслуживать веб-разработчиков. Я создал краткую анкету, чтобы проверить ее до или после прочтения этой статьи. Пожалуйста, посмотрите это – спасибо! А теперь вернемся к нашему обычному запланированному программированию.

JzU2vsqeYVGGDIMtAFHsrXZ9AgC0-bVH7fwi

Привет Интернет!

Вы, наверное, не знаете кто я *кашель* Я Зайдек *кашель*, но я знаю кто ты! Вы начинающий веб-разработчик, заинтересованный в освоении некоторых новых технологий, но несколько нерешительный, потому что фреймворки приходят и уходят, а JavaScript – это хорошо… JavaScript! Легко говоря.

Пожалуйста, дайте мне несколько минут вашего времени, чтобы привести убедительный аргумент, почему изучение Vue может быть отличным решением. Вы должны изучать его не только ради своей квалификации, но и чистого развлечения и радости, которые приходят от изучения хорошо задокументированного и организованного программного обеспечения.

Я тоже учу, как это? работает и многое другое в курсе Vue, который я только что выпустил. Изучите Vue из основ, а также как создавать некоторые вещи! Нажмите здесь, чтобы зарегистрироваться!

Q5mqNqLWLYLhNAOUrVSXEdB7JggDGgdVn-el
Нажмите, чтобы зарегистрироваться на мой бесплатный курс Vue!

Scrimba.com – новый интерактивный веб-сайт для обучения и обмена кодом. Скринкасты можно прерывать и редактировать, что делает обучение активным и весело экспериментировать!

Привет, Феликс!

Кот Шрёдингера – это болезненный мыслительный эксперимент, поставленный Альбертом Эйнштейном и Эрвином Шредингером, чтобы высмеять абсурдность квантовой физики. Это (не)мыслимый эксперимент, для которого случайность на микроуровне можно измерить в переживаемом макромире. По иронии судьбы он стал центральным элементом объяснения квантовой физики!

Вы можете узнать больше об эксперименте и его происхождении здесь.

Это выглядит примерно так: у вас есть кот. Вы помещаете его в закрытую коробку. В коробку помещают некий радиоактивный материал, который в течение часа имеет 50% вероятность того, что его атомы ионизируют. Также в коробку помещен счетчик Гейгера, являющийся измерительным прибором. Если он обнаружит ионизированный атом, он выпустит молоток, разбивший флакон с ядом, убив кошку! ??

Вот более академическое объяснение кота Шрёдингера:

Сценарий представляет кошку, которая может быть одновременно и живой, и мертвой, состояние, известное как квантовая суперпозиция, в результате связи со случайным субатомным событием, которое может произойти, а может и не произойти.

… Шредингер не хотел пропагандировать идею живых и мертвых кошек как серьезную возможность; Напротив, он преследовал цель примера проиллюстрировать абсурдность существующего взгляда на квантовую механику.

— Википедия

И это то, что мы собираемся создать с помощью Vue! ? Это будет не так тяжело, но мы вроде бы обманываем, потому что будем полагаться на псевдослучайные средства JavaScript, а не на ионизированные атомы!

Для этого курса вы должны знать немного JavaScript и немного HTML. Но в курсе, который я только что выпустил, я посвящаю 10 минут обучению абсолютных основ JavaScript, необходимых для начала работы с Vue! Так что не забудьте записаться!

Здание Шрёдингера см.

eGCUyk4FWzRswbeA6e4YCbYCVOl8y2sFOBdE
fixclM1DbhaY4DQOXdmV5GwDgeTTzZUaTqao
NUcSEKbB1PCj4JBoAL5ZYK5pn8Ksokcd7VMv
Нажмите, чтобы бросить кубик.

Используя Vue, мы можем привязать обработчик кликов к a span — Я солгал, это не а div — содержащий ?, и выбирает из ? or ? emojis. При нажатии на нее вызывается функция, имитирующая бросание костей и показывающая, жил ли наш кот или умер. И повторное нажатие может сбросить состояние в исходный закрытый ящик. Все это можно добиться с помощью vh от Vue.tml, @клick, and :class atдани.

DsQgm6XM86dxM4PN93SJQYGwwTvjSojOKnJ4

Psst.. полный код доступен в восьмом скринкасте.

Внутри <div id="app»> есть ап что shows Click the box! The caц…?! Также внутри стр. is a span с несколькими атрибутамиtes. v-html and emojify() – это методы, которые я использую, чтобы показывать эмодзы как изображение.

@click="quantum_fluctuation()" это то, как я присоединяю функцию к span нажатия, и :class="jittering()" — также :class="theme()" — создавать тонкие спецэффекты.

Давайте теперь разберемся, как quantum_fluctuation() работает: при вызове он вызывает JavaScript Math.random() влиять на состояние нашего кота, к которому инициализирован ?, и выбирает из одного? or ? emojis.

Имейте в виду, я затуманиваю некоторые детали для большей картины, например, что мы имеем состояние нашего кота this.catхранящиеся в данных и устанавливающие вызов функции this.cat состояние, которое также обновляется в DOM.

Вы, конечно, можете узнать больше о реализации this.cat, rand(), this.alive_cats, this.dead_cats, this.is_open()и this.is_alive() в соответствующем скринкасте.

Чтобы коснуться того, как :classes работают, они возвращают объекты JavaScript, связывающие обычные классы CSS на основе состояния нашей программы. И это очень важно, потому что это означает, что наш CSS можно считать живым. Вааааа!!

3hm9upv14BeozAJasRDO4UwONrkjP71HClaY

Главным моментом является то, что теперь вполне возможно и разумно для отдельного лица создавать веб-продукты и услуги, имитирующие скорость современных родных приложений, без того же технического долга. И это очень важно, потому что, хотя нативные программы хороши, они требуют дополнительных шагов и часто имеют доступ к десяткам, если не 100 МБ для загрузки. ?

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

v82fTM9hJAhq4n2RC6euR6jsEq2758k-cDzx
evKfsXXPPpeztne9a8Xkjs89D6zUu5MxKFkq
Слева: «Изучите Vue.js в этом бесплатном курсе! ?✨» Правильно: «Как сделать? выбор цветов с помощью Vue!

Vue — это суперсила, замаскированная во фреймворке.

Я люблю программное обеспечение, создающее значимую ценность — и не только для конечных пользователей, но и для разработчиков, решивших его изучать и использовать. Хорошо задокументированное и организованное программное обеспечение отличное для обучения, и это еще лучше, когда опыт разработчика соответствует желаемому опыту пользователя. Vue здесь не исключение, и программирование Vue было блаженным опытом и гораздо проще, чем ожидалось.

Я долгое время отказывался изучать JavaScript, потому что, исходя из высокопроизводительных, параллельных и статических языков программирования, я привык к общему пренебрежению JavaScript. Однако, когда я научился немного Vue, так привлекает то, что Vue предоставляет идиоматическое руководство по программированию на JavaScript, таким образом уменьшая нагрузку и обучая хорошим практикам программирования.

Сейчас пора, как никто другой, чтобы заняться веб-разработкой. С появлением CSS Flexbox и Grid веб-дизайн стал по крайней мере на порядок более легким, веселым и мощным. Благодаря бэкенд-языкам, таким как Go, и отличным интерфейсным фреймворкам, таким как Vue, один программист/дизайнер теперь может делать то, что раньше требовали целые команды или компании.

Итак, пожалуйста, отправляйтесь в прекрасный мир и научитесь немного Vue! Вы можете(!) создавать удивительные вещи и даже изменять жизнь людей, даже свою собственную. И если это поможет, попробуйте бесплатный курс!

K4EgWlAYcUSuINupYvMFrERMz5OmPnwS4J-V

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *