我们如何建立Schrödinger的div？ 与Vue！

by ZAYDEK

由ZAYDEK

我们如何建立Schrödinger的div？ 与Vue！ (How we can build Schrödinger’s div ? with Vue!)

我们有50％的机会会解决这个问题…… (There’s a 50% chance we’ll get this right…)

Before I get to the article, I just want to share that I’m building a product, and I would love to collect some data about how to better serve web developers. I created a short questionnaire to check out before or after reading this article. Please check it out — thanks! And now, back to our regular scheduled programming.

在开始阅读本文之前，我只想分享我正在开发的产品，并且我希望收集一些有关如何更好地为Web开发人员提供服务的数据。 在阅读本文之前或之后，我创建了一个简短的问卷调查表以进行检查。 请检查一下-谢谢！ 现在，回到我们的常规计划编程。

您好，互联网！ (Hello Internet!)

You probably don’t know who I am *cough* I’m Zaydek *cough* but I know who you are! You’re an aspiring, budding web developer interested in learning some new technologies, but a bit hesitant because frameworks come and go, and JavaScript is well.. JavaScript! To put it lightly.

您可能不知道我是谁*咳嗽*我是Zaydek *咳嗽*，但我知道您是谁！ 您是一个有抱负的，新兴的Web开发人员，对学习一些新技术感兴趣，但由于框架来来往往而JavaScript很好，因此有点犹豫。JavaScript！ 轻轻地说。

So please allow me a few minutes of your time to make a convincing argument for why learning Vue could be a great decision. You should learn it not only for your qualifications, but for the pure fun and glee that comes with learning a well-documented and orchestrated piece of software.

因此，请您花几分钟时间提出令人信服的论点，说明为什么学习Vue可能是一个明智的决定。 您不仅应该为您的学历而学习它，还应该为学习一个经过良好记录和精心编排的软件所带来的纯粹乐趣和欢乐而学习。

我也教这怎么？ 在我刚刚发布的Vue课程中可以正常工作，还有更多其他功能。 从基础知识中学习Vue，以及如何构建一些东西！ 点击此处免费注册！ (I also teach how this ? works and a whole lot more in the Vue course I just released. Learn Vue from the basics and how to build a few things, too! Click here to enroll for free!)

Scrimba.com是一个新的交互式网站，用于学习和共享编码方式。 截屏视频可以中断和编辑，使学习变得活跃而有趣！ (Scrimba.com is a new and interactive website for learning and sharing how to code. Screencasts can be interrupted and edited, making learning active and fun to experiment with!)

你好，菲利克斯！ (Hello, Felix!)

Schrödinger’s cat is a morbid thought experiment posited by Albert Einstein and Erwin Schrödinger to mock the absurdity of quantum physics. It’s an (in)conceivable experiment for which randomness at a micro-level can be measured in the macro-world we experience. Ironically, it has become a centerpiece for explaining quantum physics!

薛定ding的猫是阿尔伯特·爱因斯坦和埃尔温·薛定er为模拟量子物理学的荒谬性而进行的病态思想实验。 这是一个(可以想象的)实验，可以在我们经历的宏观世界中测量微观水平的随机性。 具有讽刺意味的是，它已经成为解释量子物理学的核心！

You can learn more about the experiment and its origins here.

您可以在此处了解有关该实验及其起源的更多信息。

It goes something like this: You have a cat. You put it in a sealed box. In the box is placed some radioactive material that over an hour has a 50% chance of one if its atoms ionizing. Also placed in the box is a Geiger counter, which is a measuring device. If it detects an ionized atom, it will release a hammer that will smash a vial of poison thus killing the cat! ??

它是这样的：您有一只猫。 您将其放在密封盒中。 在盒子里放着一些放射性物质，如果其原子电离，一个小时内有一个放射性物质的概率为50％。 盒子中还装有盖革计数器，它是一种测量装置。 如果它检测到离子原子，它将释放锤子，该锤子会砸碎一小瓶毒药，从而杀死猫！ ??

Here’s a more academic explanation of Schrödinger cat:

这是对薛定ding猫的更多学术解释：

The scenario presents a cat that may be simultaneously both alive and dead, a state known as a quantum superposition, as a result of being linked to a random subatomic event that may or may not occur …

该场景展示了一只猫可能同时活着和死了，一种被称为量子叠加的状态，这是由于与可能发生或可能不会发生的随机亚原子事件相关联的结果。

… Schrödinger did not wish to promote the idea of dead-and-alive cats as a serious possibility; on the contrary, he intended the example to illustrate the absurdity of the existing view of quantum mechanics.

……薛定ding不希望将死活猫的想法推广为一种严重可能性； 相反，他打算举这个例子来说明现有量子力学观点的荒谬性。

— Wikipedia

— 维基百科

And this is what we are going to build using Vue! ? It won’t be that hard, but we are sort of cheating because we’ll be relying on JavaScript’s pseudo-random facilities and not ionized atoms!

这就是我们将要使用Vue构建的东西！ ？ 不会那么难，但是我们有点作弊，因为我们将依靠JavaScript的伪随机设施而不是电离原子！

For this course, you should know some JavaScript and some HTML. But in the course I just released, I dedicate 10 minutes to teaching the absolute basics of JavaScript needed to get up and running with Vue! So don’t forget to enroll!

对于本课程，您应该了解一些JavaScript和一些HTML。 但是在我刚刚发布的课程中 ，我花了10分钟来讲授Vue入门和运行所需JavaScript的绝对基础知识！ 因此，不要忘记注册！

建立薛定ding的div (Building Schrödinger’s div)

Using Vue, we can bind a click handler to a span — I lied, it’s not a div — containing the ?, and selects from either the ? or ? emojis. Clicking it calls a function that emulates throwing dice, and reveals whether our cat lived or died. And clicking again could reset the state back to the original closed-box. This can all be achieved with Vue’s v-html, @click, and :class attributes.

使用Vue，我们可以将点击处理程序绑定到包含?,的span (我撒谎，它不是div ?,并从？中进行选择。 o ？ em ojis。 单击它会调用一个函数，该函数模仿掷骰子，并揭示我们的猫是死还是死。 再次单击可以将状态重置为原始的封闭框。 这一切都可以通过Vue的vh tml, @ cl ick, a和致敬ick, a nd：cl ass at 。

Psst.. the full code is available in the eighth screencast.

Psst ..的完整代码在第八个截屏中可用。

Inside of <div id="app"> is a p that shows Click the box! The cats…?! Also inside the p is a span with a few attributes. v-html and emojify() are techniques I’m using to show emojis as images.

在<div id="ap p”>内部 是shows Click the box! The ca ap shows Click the box! The ca shows Click the box! The ca TS ...？ 也在里面 p is a具有一些属性is a跨度tes. v tes. v and emoj ify()是我用来将表情符号显示为图像的技术。

@click="quantum_fluctuation()" is how I’m attaching a function to the span being clicked, and :class="jittering()" — also :class="theme()" — make for subtle special effects.

@click="quantum_fluctuation()"是我将功能附加到要单击的span ，并且:class="jittering()" -也:class="theme()" -可以产生细微的特殊效果。

Let’s now understand how quantum_fluctuation() works: when called, it invokes JavaScript’s Math.random() to influence the state of our cat, which is initialized to ?, and selects from either ? or ? emojis.

现在，让我们了解quantum_fluctuation()工作原理：被调用时，它将调用JavaScript的Math.random()来影响猫的状态，该状态已初始化为?,并从其中一个进行选择。 o ？ em ojis。

Bear in mind, I’m obfuscating a few details for the bigger picture, that being that we have our cat’s state, for example this.cat, stored in data, and that a function call sets this.cat state, which also gets updated in the DOM.

请记住，我为大图混淆了一些细节，因为我们将猫的状态(例如this.cat )存储在数据中，并且函数调用设置了this.cat状态，该状态也得到了更新在DOM中。

You can of course learn more about the implementation of this.cat, rand(), this.alive_cats, this.dead_cats, this.is_open(), and this.is_alive() in the corresponding screencast.

您当然可以在相应的截屏视频中进一步了解this.cat ， rand() ， this.alive_cats ， this.dead_cats ， this.is_open()和this.is_alive()的实现。

To touch on how the :classes work, these return JavaScript objects that bind normal CSS classes based on the state of our app. And this is a big deal, because it means our CSS can be thought of as alive. Whaaaaat!!

为了说明:classes工作原理，这些返回基于我们应用程序状态绑定普通CSS类JavaScript对象。 这很重要，因为这意味着我们CSS可以被认为是生动的。 哇！

The overarching point is that it’s now conceivable — and sensible — for a sole individual to create web-based products and services that emulate the snappiness of modern native apps, all without the same technical debt. And this is a big deal because while native apps are nice, they do require extra steps and often access to dozens if not one hundred MB to download. ?

最重要的一点是，现在可以想象并且明智的是，一个人可以创建基于网络的产品和服务来模仿现代本机应用程序的灵巧性，而这些技术和负担都没有相同的技术负担。 这很重要，因为尽管本机应用程序不错，但它们确实需要额外的步骤，并且经常可以访问数十个(即使不是一百MB)下载。 ？

学习Vue还有很多东西，所以我写了两篇关于该主题的文章。 请阅读本文后，看看！ (There’s a lot more to learning Vue, so I wrote two more articles on the subject matter. Please, after this article, have a look!)

Vue是伪装成框架的超级大国 (Vue is a superpower disguised as a framework)

I love software that creates meaningful value — and not just for the end-users, but also for the developers who choose to learn and use it. Well-documented and orchestrated software feels great to learn, and feels even greater when the developer-experience is on par with the desired user-experience. Vue is no exception here, and programming Vue has been a blissful experience, and much easier than anticipated.

我喜欢能够创造有意义的价值的软件-不仅是最终用户，还有选择学习和使用它的开发人员。 记录良好且精心编排的软件使您学习起来很棒，并且当开发人员的经验与所需的用户经验相当时，感觉甚至更好。 Vue也不例外，对Vue进行编程是一种幸福的经历，并且比预期的要容易得多。

I refused to learn JavaScript for a long time because, coming from high-performance, concurrent and static programming languages, I had grown comfortable with a general disregard for JavaScript. However, having learned me some Vue, what’s so appealing is that Vue provides an idiomatic guide to programming in JavaScript, therefore lessening the burden and teaching good programming practices, too.

我拒绝学习JavaScript很长时间了，因为来自高性能，并发和静态编程语言的我已经习惯了对JavaScript的普遍无视。 但是，在了解了一些Vue之后，最吸引人的是Vue提供了JavaScript编程的惯用指南，因此也减轻了负担，并教导了良好的编程习惯。

Now is a time like no other to get into web development. With the introduction of CSS Flexbox and Grid, web design has become at least an order of magnitude easier, more fun, and more powerful. With backend languages like Go, and delightful frontend frameworks like Vue, one programmer/designer can now do what would have required entire teams or companies in the past.

现在是进入Web开发的时代。 随着CSS Flexbox和Grid的引入，网页设计至少变得更加容易，有趣和强大了一个数量级。 借助Go之类的后端语言以及诸如Vue之类的令人愉悦的前端框架，一个程序员/设计师现在可以完成过去需要整个团队或公司的工作。

因此，请进入美丽的世界，学习一些Vue！ 您可以(！)做出令人惊奇的事情，甚至可以改变人们的生活，甚至改变您自己的生活。 如果有帮助，请尝试免费课程 ！ (So please, go out into the beautiful world and learn you some Vue! You can(!) make amazing things and even change people’s lives, even your own. And if it helps, try the free course!)

翻译自: https://www.freecodecamp.org/news/how-we-can-build-schrodingers-div-with-vue-4068f6423830/