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

原文出處：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 "