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

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

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

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

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

在這里我使用了Vue.js來(lái)改寫，用Vue.js的方法來(lái)繪制和更新顏色，感覺(jué)超級(jí)棒棒的。

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

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

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

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

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

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

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

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