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

步骤

1. 先用ps切片工具将图片切成10X10的效果

完事打包成images文件夹。

2.打开VScode 新建一个VueDemo文件夹，将图片素材导入 。同时新建一个html文件然后将Vue.js引入(在官网下载）

3.html代码部分

• 定义一个盒子

    <div id="app">
    <!--大容器提供给vm实例对象使用-->
    <div class="content">
        <!--小容器用于规范内部全部元素的样式-->
        <test-div v-for="i in images" :im="i"></test-div>   
        <!-- test-div为定义的新组件 V-for循环拿到images数组的每个对应元素，每一次循环都把拿到的数组元素给到i-->
        <!-- 这里   : 号的都是v-bind单向绑定数据 -->
    </div>
</div>

• 用<style></style>为盒子定义样式

<style>
            .content {
     
				width: 850px;
				border: 1px solid pink;
				margin: 0 auto;
                /* 上下外边距清零 水平居中 */
				display: flex;
                /*使用弹性布局 */
				justify-content: space-around;
                /* 水平对齐方式：水平方向间隔相等 */
				flex-wrap: wrap;
                /* 换行属性：换行 */
			}
            .item {