第二步：实例化vue对象
第三步：利用photoshop将图片分割成10*10，导入img文件夹下，并在vue的data属性下创建一个图片路径的数组，效果如下：
ps：名字可以利用excel和记事本的替换功能完成，此处不再赘述。
第四步：创建组件，并在组件中写下点击图片事件的方法：
具体思路如下：1.在组件中插入图片，设计一个变量show和v-show来控制图片是否显示，
2.再用div包裹这个图片，用css设置这个块的背景颜色。
3.设计一个方法change用来改变变量show，用@click来调用这个方法 ps：此处的@click不能写在图片标签上，不然无法完成色块到图片的转化。
以下为第一个图片的示例：
发现数组内容写错了（已改正）
此处附上css
第五步：优化代码
背景：一百个图片一个一个做组件插入过于繁琐，应寻找一种更为便捷的方法。
思路：1. 利用v-for将标签循环插入
2.v-for的语句为A in B ，此处我们可以定义A变量为imn，B为我们上边做的图片名字的数组名pic
3.要在子组件中用到父组件中的数据，需要用props来声明，所以有 ：
4.用v-bind 变量innna绑定imn（在父组件中的props中声明过）来接收innna遍历pic数组中的值。此时每一次的遍历都会让innna的值为图片的路径，然后需要将innna传入到组件的图片src中。
注:src后面的字符串当做变量解析使用
常规写法，就是当字符串使用
代码如下：
最终效果实现
附件链接：https://files.cnblogs.com/files/blogs/782373/%E5%9B%BE%E7%89%87%E6%B6%88%E5%A4%B1%E9%AD%94%E6%B3%95(%E8%BD%AF%E4%BB%B62101%E5%AD%99%E4%BA%91%E6%B5%A9).zip?t=1679057787
