Vue.js快速入门-超级马里奥像素画

.l-pixel{display:inline-block;原始出处：Vue.js快速入门—超级马里奥像素画::我在github上总结了代码：[vue2-pixel-art]::::__查看【Demo】__::最近有人问我为什么选择使用Vue.js来实现我们公司的第一个产品。哈哈哈，不是每个人都有机会探索Vue.js；使用到这里，我可以通过写一个简单的Vue.js例子来快速介绍一下，让大家对Vue.js有一个很好的认识和了解，希望这些能对大家有所帮助。绘制图形可能不是Vue.js最流行的用例，甚至市面上的很多demo都很少涉及绘制图形；但是在本文中，我想以绘制图形为例，我想其他人已经这样做了。在github上发现了这个很好玩很好玩的动画——SuperMarioPixelArt（灵感来自GithubData-Pixels），它绘制了很多像素，当你点击其中一个像素时，周围相似的像素也会随之变化。哦，我们不是用canvas来实现的，而是用div。这里我用Vue.js改写，用Vue.js方法绘制和更新颜色，感觉超级牛逼。搭建两个Vue组件在开始写代码之前，我搭建了两个Vue组件来实现这个图形：pixel.vuepixel.vue是一个组件（这里是每个小像素单元）；参数是color（RGB值）和size（像素大小），当它被点击并触发事件时，会通知它的父组件，同时也会触发一个事件。canvas.vue是一个容器，它基于具有每个像素颜色的二维数组来初始化像素组件。pixel.vue.l-pixel{display:inline-block;.vue文件可以包含template模板、JavaScript和CSS样式块，所以一个组件需要的所有代码都可以存在于一个文件中在script标签中，color（背景色）和size（像素大小）是必需的组件初始化时传递的属性（props）。如果不需要指定类型，并且props中不需要required，那么可以简化为props:['color','size']。该属性的值应用于pixelStyle()计算属性，该属性绑定到div.style。如果颜色属性值发生变化，它将通过计算属性传播到模板，div.l-pixel将更新背景。v-bind:（完整语法）或:（速记）用于绑定模板中的属性或数据。传播是：canvas.vue中的颜色变化>>>pixel.vue中“props”中的“color”>>>“computed”中的“pixelStyle()”>>>“div.l-pixel”中的样式属性