vue颜色选择器

by ZAYDEK

由ZAYDEK

如何制作？ Vue的颜色选择器！ (How to make a ? color picker with Vue!)

注意：颜色看起来可能比实际颜色更可爱！ (Caution: colors may appear cuter than they are!)

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!)

I’m Zaydek and I’m newish to web development. I come from a background in graphic design and programming, so picking up the frontend has been fascinating for me.

我是Zaydek，并且刚接触 Web开发。 我来自图形设计和编程领域，因此选择前端对我而言很着迷。

The web is like the offspring of a graphic designer and programmer — it’s both visual and programmatic. So today, I’m going to introduce you to Vue.js and component-based web design — that is, modern web development. I’ll take you from a newbie web developer to an all-powerful, all-knowing web developer seer!

网络就像图形设计师和程序员的后代一样-既可视又编程。 因此，今天，我将向您介绍Vue.js和基于组件的Web设计-即现代Web开发。 我将把您从新手Web开发人员带到功能强大，无所不知的Web开发人员先行者！

How can you make such claims, sir?

先生，您如何提出这样的要求？

— Fancy you

- 看上你

Well, the thing is, most people learned how to Internet before we (as a whole) understood how to Internet! Including me! ? Which, to be honest, is probably why I refused to learn web development for the longest time. It just felt so broken!

好吧，事实是，大多数人在我们(整体上)了解互联网之前就已经学会了互联网！ 包括我！ ？ 老实说，这可能就是为什么我拒绝学习最长的时间的原因。 感觉好破！

But times they are a-changin’ and web development has never been more accessible or streamlined. So it is my great honor, and privilege, to introduce you to how to Internet in 2018, and perhaps even beyond!

但是，随着时代的变化，Web开发从未像现在这样容易访问或简化。 因此，向您介绍2018年甚至以后的互联网使用方式是我的荣幸和荣幸。

我也教这怎么？ 在我刚刚发布的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!)

那么，Vue怎么了？ (So, what’s the deal with Vue?)

So why Vue? It’s a great and fair question you should be asking. Some people protest and scorn the idea of using any framework, and I think this is a dangerous idea. I do, however, suggest that for whatever tool it is that you use, to be very deliberate and thoughtful in why you’re using it.

那么为什么选择Vue ？ 您应该问的是一个很好的公平问题。 有人抗议并蔑视使用任何框架的想法，我认为这是一个危险的想法。 但是，我确实建议，无论您使用什么工具，都要对使用的原因进行深思熟虑。

I picked up Vue because I want to use newer tools that are not too mainstream. I wanted them to have learned from tools that have come before them (or in other words, are not too trailblazing). They should have best-in-class documentation, and have a critical mass of users.

我选择Vue是因为我想使用不太主流的更新工具。 我希望他们从之前的工具中学到东西(或者换句话说，不是太开拓性)。 他们应该拥有一流的文档 ，并且拥有大量的用户。

Since Vue, in the last weeks, surpassed React is stars in GitHub, that is evidence to me that Vue has a critical mass. ?

由于Vue在过去的几周中超过了React，因此在GitHub上众星云集 ，这向我证明了Vue具有临界质量。 ？

Furthermore, Vue is an extraordinary open-source project, is publicly-funded, and has a great developer-experience! Like user-experience but for developers. This has the wonderful consequence that the common developer can now create interactive websites intuitively. And Vue builds on one of the most successful ideas from the Angular-React wars which is the Virtual DOM. So let’s talk about that now.

此外， Vue是一个非凡的开源项目 ， 是由公共资助的 ，并且具有出色的开发人员经验！ 像用户体验一样，但对于开发人员来说。 这产生了一个奇妙的结果，即普通开发人员现在可以直观地创建交互式网站。 Vue基于Angular-React战争中最成功的想法之一，即虚拟DOM。 现在让我们来谈谈。

Virtual WUT?

虚拟WUT？

— Internet You

—你上网

Virtual DOM, yo. LOL sorry. So let’s back up — DOM is short for document-object-model. I think of the DOM as a paradigm for how we think about text as data structures to compose what we call web pages. And a virtual DOM is a clever abstraction for dealing with the text that goes between the elements, like <p>hello, world!</p>. In an idiomatic Vue-based website it’s something like <p>;{{ message }}</p>, where the data is stored inside of the JavaScript instead!

虚拟DOM，哟。 大声笑对不起。 因此，让我们备份一下— DOM是document-object-model的缩写。 我认为DOM是我们如何将文本视为数据结构来构成网页的范式。 虚拟DOM是处理元素之间的文本(例如<p>hello, worl d！</ p>)的巧妙抽象。 在基于Vue的惯用网站中，它的ething like <p> ; {{message}} </ p>，其中数据存储在JavaScript内部！

Why rely on JavaScript for a simple website?

为什么要依靠JavaScript创建简单的网站？

— Innocent You

—无辜的你

That’s a great (and fair) point. But there’s a significant benefit to relying on some JavaScript to compose websites, static or dynamic. We can write and build websites programmatically instead of copypasta’ing data around. Once the data is separate from the HTML, just like having CSS separate from the HTML, that’s when magical things can start to happen. ?

这是一个很好的观点。 但是，依靠一些JavaScript来组成静态或动态网站会有很大的好处。 我们可以以编程方式编写和构建网站，而无需复制数据。 一旦数据与HTML分离，就像CSS与HTML分离一样，神奇的事情就会开始发生。 ？

The good news is that because we’ve come to expect so much from websites, it’s fair to assume that the majority of people will have JavaScript enabled by default. So we’d have no reason to disable it. I might have disagreed with this a few years ago, but I can now appreciate just how much the benefits of using JavaScript far outweigh whatever possible concerns may arise.

好消息是，由于我们对网站的期望如此之高，因此可以公平地假设大多数人将默认启用JavaScript。 因此，我们没有理由禁用它。 我可能在几年前不同意这一点，但是现在我可以体会到使用JavaScript的好处远远超过了可能引起的担忧。

那…那个颜色选择器呢？ (So… what about that color picker, eh?)

Sorry for blabbering! It’s hard for me not to talk about this at length, partly because it’s so exciting. And also partly because of the gamut of possibilities that present themselves when a sole developer can be responsible for building beautiful and interactive web apps/businesses. Businesses you say? Yes — Follow me on Twitter and I’ll be be sure to follow up! ?

很抱歉 对于我来说，很难不一一列举，这部分是因为它是如此令人兴奋。 另外，部分原因是，当唯一的开发人员负责构建美观且交互式的Web应用程序/业务时，就会呈现出各种可能性。 你说的企业？ 是的- 在Twitter上关注我 ，我一定会跟进！ ？

Without further ado, here’s the HTML for the website:

事不宜迟，这里是网站HTML：

Psst… the full code is available in the ninth screencast.

请注意，完整的代码可在第九个屏幕广播中找到。

Feeling shocked? The thing is, let’s think about the inherent complexity of the website I’ve shown you. It’s really just a box with two cells, one with an emoji and one with text, repeating 12 times. Yes, there’s some padding, there are some gradients, but the fundamental design is unchanged. So what if the code’s complexity was proportional to the design’s complexity?

感到震惊吗？ 问题是，让我们考虑一下我向您展示的网站的固有复杂性。 它实际上只是一个有两个单元格的盒子，一个带有表情符号，另一个带有文本，重复12次。 是的，有一些填充，有一些渐变，但是基本设计没有变化。 那么，如果代码的复杂度与设计的复杂度成比例呢？

Here I’ve applied a CSS debugger to disambiguate the design, but this only goes as far as the CSS is concerned. What’s more important here, the real significance of Vue, is how we can think about our website in terms of data and not in terms of HTML elements.

在这里，我应用了CSS调试器来消除设计的歧义，但这仅涉及CSS。 Vue的真正意义在这里更重要的是，我们如何从数据而非HTML元素的角度来思考我们的网站。

So look again at those images. If we think about our website purely in terms of data, how much data is there?

因此，请再次查看这些图像。 如果我们仅根据数据来考虑我们的网站，那么那里有多少数据？

Allow me to now share the underlying data structure used:

现在，让我分享使用的基础数据结构：

The following sentence is possibly the most important: Vue frees us to think about our website in terms of data, separate from the HTML; this is a revolution for how we can build for the web!

以下句子可能是最重要的： Vue使我们可以根据HTML之外的数据来思考我们的网站； 这是我们如何为网络构建的一场革命！

To be explicit, what I’m showing you is an array of anonymous objects each with two keys: emoji, and color. Now that we can represent the website in terms of data, we just iterate over the data using Vue’s v-for and a custom component.

明确地说，我向您展示的是一个匿名对象数组，每个对象都有两个键： emoji和color 。 现在我们可以用数据表示网站了，我们只需要使用Vue的v-for和自定义组件对数据进行迭代。

是的，对。 那么组件呢？ (Yeah, right. So what about components?)

Components — yes! Second to separating the data from the HTML, one of the coolest things Vue offers is component-based design. Components can help us abstract blocks of HTML/CSS/JS into a reusable unit: a component.

组件-是的！ 除了将数据与HTML分开之外，Vue提供的最酷的功能之一就是基于组件的设计。 组件可以帮助我们将HTML / CSS / JS块抽象为可重用的单元：组件。

A quick note: I decided it would be best to first learn how to use Vue without a build-process, meaning I’m not making use of single-file-components. But I am making use of components via Vue.component().

快速说明 ：我认为最好先学习如何在没有构建过程的情况下使用Vue，这意味着我不使用单一文件组件。 但是我正在通过Vue.component()使用组件。

Remember the <swatch> element I demo’d earlier in the source code? That’s a custom component I engineered using Vue to abstract the element from the implementation. This is a significant concept, because it means we can start to think more functionally than imperatively.

还记得我之前在源代码中演示的<swat ch>元素吗？ 这是我使用Vue设计的自定义组件，用于从实现中抽象元素。 这是一个重要的概念，因为它意味着我们可以开始从功能上而不是命令上进行思考。

What’s the difference? Functional design cares about the result, whereas imperative design cares about the result and the implementation. Designing a component is an imperative process, whereas using one is a functional. ?

有什么不同？ 功能设计关心结果，而命令式设计关心结果和实现。 设计组件是当务之急，而使用组件则是功能。 ？

This is the implementation for the swatch element shown earlier. How it works is that Vue scans the DOM for instances of swatch and replaces it with the quotes HTML inside of the component’s template value. This means we can do major refactoring to better understand our website in terms of concepts, rather than being worried about how something ought to be engineered all the time.

这是前面显示的swatch元素的实现。 Vue的工作方式是Vue扫描DOM中的swatch实例，并将其替换为组件template值内HTML引号。 这意味着我们可以进行重大的重构，以从概念上更好地理解我们的网站，而不用担心应该始终设计什么。

学习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!)

好吧，你改变了主意。 (Well, you’ve changed my mind..)

I know this might be a lot to take in, especially for something appearing so harmless as a ? color picker. But what I’ve shown you is (besides the CSS) 90% of the codebase. There are at least a few helper functions I’m omitting, but the point is that the techniques and ideologies discussed add up to a lot more than a cute web app. It means that a sole individual can create beautiful and functional web-based products and services for others.

我知道这可能要花很多钱，尤其是对于看起来如此无害的东西呢？ 选色器。 但是，我向您展示的是(除CSS之外)代码库的90％。 我至少要省略一些辅助功能，但要点是，所讨论的技术和意识形态的总和要比可爱的Web应用程序多得多。 这意味着一个人可以为他人创建美观且实用的基于Web的产品和服务。

I’m also suggesting that Vue is a lot more than a framework. If paired with the right backend language (let’s hear it for Go!), learning and using Vue adds up to a lot more. Idiomatic Vue can also teach what modern software development means, and how to access the billions(!) of us that are now connected, without the same technical barriers that come with app development.

我还建议Vue不仅仅是框架。 如果与正确的后端语言搭配使用(让我们一起去Go ！)，那么学习和使用Vue的好处就更多了。 Idiomatic 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-to-make-a-color-picker-with-vue-9640043b6c82/

vue颜色选择器