摘要：文件可以包含模板和樣式塊，因此組件的所有必需代碼都可以存在于單個文件中。該方法將使用其顏色信息發(fā)布事件，畫布組件將偵聽該顏色信息。包含任意顏色的像素名稱，是包含值的顏色字典對象。從中使用了來渲染。

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

::代碼我已經(jīng)歸納在github上：【vue2-pixel-art】::
::__查看【Demo】__::

最近有人問我為什么選擇使用Vue.js來實(shí)現(xiàn)我們公司的第一款產(chǎn)品。哈哈哈，并不是每個人都有機(jī)會去探索Vue.js的；使用在這里，我先可以通過寫一個簡簡單單的Vue.js例子來快速介紹它，將讓大家對Vue.js有著很好認(rèn)識和了解，希望這些能給大家有所幫助。

繪制圖形可能不是Vue.js最受歡迎的用例，甚至很多市場上的Demo都很少有關(guān)繪制圖形的；但在這篇文章中，我想用繪制圖形來舉一個例子，我想其他人已經(jīng)在github上發(fā)現(xiàn)這個非常樂趣并好玩的動sai -- 超級馬里奧像素藝術(shù)（靈感來自GithubData-Pixels），它繪制許多像素，當(dāng)點(diǎn)擊其中一個像素時，周邊相似的都會隨之而改變。
哦，我們這里不是使用canvas來說實(shí)現(xiàn)的，是使用了div。

在這里我使用了Vue.js來改寫，用Vue.js的方法來繪制和更新顏色，感覺超級棒棒的。

在開始編寫代碼之前，我就構(gòu)建了兩個Vue組件來實(shí)現(xiàn)這個圖形：

pixel.vue
pixel.vue是一個組件（這里放著每個小小像素單位）；參數(shù)有color（RGB值）和size（像素大?。┑膬蓚€數(shù)據(jù)，當(dāng)它被點(diǎn)擊并觸發(fā)事件，就是通知其父組件并也將會觸發(fā)一個事件。

canvas.vue
是一個基于具有每個像素的顏色的二維數(shù)組初始化像素分量的容器。

.vue 文件可以包含template模板、JavaScript和CSS樣式塊，因此組件的所有必需代碼都可以存在于單個文件中。

在script標(biāo)簽中，color(background color)和size(pixel size)是組件初始化時傳遞的必需屬性（props）。

如果沒有必要指定type，并required不在props有要求，那它可以簡化為props: ["color", "size"]。屬性的值應(yīng)用于pixelStyle()計(jì)算的屬性，該屬性綁定到div.style。

如果color屬性值更改，它將通過計(jì)算屬性傳播到模板，并且div.l-pixel將更新背景。v-bind:（完整語法）或 :（簡寫）用于綁定模板中的屬性或數(shù)據(jù)。傳播是：

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