Vue.js快速介绍-超级马里奥像素艺术

摘要：文件可以包含模板和样式块，因此组件的所有必需代码都可以存在于单个文件中。该方法将使用其颜色信息发布事件，画布组件将侦听该颜色信息。包含任意颜色的像素名称，是包含值的颜色字典对象。从中使用了来渲染。

原文出处：Quick Introduction to Vue.js — Super Mario Pixel Art

::代码我已经归纳在github上：【vue2-pixel-art】::
::__查看【Demo】__::

最近有人问我为什么选择使用Vue.js来实现我们公司的第一款产品。哈哈哈，并不是每个人都有机会去探索Vue.js的；使用在这里，我先可以通过写一个简简单单的Vue.js例子来快速介绍它，将让大家对Vue.js有着很好认识和了解，希望这些能给大家有所帮助。

绘制图形可能不是Vue.js最受欢迎的用例，甚至很多市场上的Demo都很少有关绘制图形的；但在这篇文章中，我想用绘制图形来举一个例子，我想其他人已经在github上发现这个非常乐趣并好玩的动sai -- 超级马里奥像素艺术（灵感来自GithubData-Pixels），它绘制许多像素，当点击其中一个像素时，周边相似的都会随之而改变。
哦，我们这里不是使用canvas来说实现的，是使用了div。

在这里我使用了Vue.js来改写，用Vue.js的方法来绘制和更新颜色，感觉超级棒棒的。

在开始编写代码之前，我就构建了两个Vue组件来实现这个图形：

pixel.vue
pixel.vue是一个组件（这里放着每个小小像素单位）；参数有color（RGB值）和size（像素大小）的两个数据，当它被点击并触发事件，就是通知其父组件并也将会触发一个事件。

canvas.vue
是一个基于具有每个像素的颜色的二维数组初始化像素分量的容器。

.vue 文件可以包含template模板、JavaScript和CSS样式块，因此组件的所有必需代码都可以存在于单个文件中。

在script标签中，color(background color)和size(pixel size)是组件初始化时传递的必需属性（props）。

如果没有必要指定type，并required不在props有要求，那它可以简化为props: ["color", "size"]。属性的值应用于pixelStyle()计算的属性，该属性绑定到div.style。

如果color属性值更改，它将通过计算属性传播到模板，并且div.l-pixel将更新背景。v-bind:（完整语法）或 :（简写）用于绑定模板中的属性或数据。传播是：

color change in canvas.vue >>> "color" in "props" in pixel.vue >>> "pixelStyle()" in "computed" >>> style attribute of "div.l-pixel" in "