使用 Vue 及自定义组件完成 10x10 图片表格的点击效果

• 实现步骤

1. 图片(使用ps切图，工具栏切换为切片工具，图片上右键点击切片划分，水平划分为10，垂直划分为10，点击确定，点击右上角文件，存储为web所用的格式，并将图片位置放置项目里的images文件夹下)

2.布局(html、css、js、vue) ，布局最为关键

• html部分（负责网页结构的构造）

        <div id="app">
            <div class="content">
                <fu-img v-for="a in imgs" :im="a">
                    
                </fu-img>
            </div>
        </div>

1. 首先就要明白10*10图片表格靠一个一个摆盒子是繁琐的，这里就用到了vue里面的v-for循环语句；

2. 其中site我们给个变量a，sites我们给个数组imgs,其中imgs数组里面有多少个元素，就会生成多少个fu-img盒子（imgs数组的定义，在script中的vue部分会给出)；

3. 还有组件fu-img的定义，暂且把fu-img理解为div盒子，盒子里面包裹了nei盒子以及nei盒子里面包裹了img就行，后面vue会提到;

4. 盒子外层用类名为content的盒子包裹，content内包含了所有的图片，最外层用id名为app的盒子包裹（其中最外层的这个app盒子是vue的作用范围，在vue中会提到）。

tip:v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

• css部分