步骤
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 {
width: 80px;
height: 45px;
margin: 2px 0px;
background-color:greenyellow;
}
img {
width: 80px;
height: 45px;
}
</style>
4.js部分（创建组件和vue实例对象）
<script>
//组件化的自定义
Vue.component("test-div",{
template:"#bbq",
props:["im"],// 声明一个自定义属性 实现父组件向子组件数据传递
data:function(){
return{
show:true,
img:"./images/666_01.jpg",
}
},
methods:{
change:function(){
this.show=! this.show
}
}
});
//实例化一个Vue对象
var vm =new Vue({
el:"#app", //确定Vue对象的作用域
data:{
images:["./images/666_01.jpg","./images/666_02.jpg","./images/666_03.jpg","./images/666_04.jpg","./images/666_05.jpg","./images/666_06.jpg","./images/666_07.jpg","./images/666_08.jpg","./images/666_09.jpg","./images/666_10.jpg","./images/666_11.jpg","./images/666_12.jpg","./images/666_13.jpg","./images/666_14.jpg","./images/666_15.jpg","./images/666_16.jpg","./images/666_17.jpg","./images/666_18.jpg","./images/666_19.jpg","./images/666_20.jpg","./images/666_21.jpg","./images/666_22.jpg","./images/666_23.jpg","./images/666_24.jpg","./images/666_25.jpg","./images/666_26.jpg","./images/666_27.jpg","./images/666_28.jpg","./images/666_29.jpg","./images/666_30.jpg","./images/666_31.jpg","./images/666_32.jpg","./images/666_33.jpg","./images/666_34.jpg","./images/666_35.jpg","./images/666_36.jpg","./images/666_37.jpg","./images/666_38.jpg","./images/666_39.jpg","./images/666_40.jpg","./images/666_41.jpg","./images/666_42.jpg","./images/666_43.jpg","./images/666_44.jpg","./images/666_45.jpg","./images/666_46.jpg","./images/666_47.jpg","./images/666_48.jpg","./images/666_49.jpg","./images/666_50.jpg","./images/666_51.jpg","./images/666_52.jpg","./images/666_53.jpg","./images/666_54.jpg","./images/666_55.jpg","./images/666_56.jpg","./images/666_57.jpg","./images/666_58.jpg","./images/666_59.jpg","./images/666_60.jpg","./images/666_61.jpg","./images/666_62.jpg","./images/666_63.jpg","./images/666_64.jpg","./images/666_65.jpg","./images/666_66.jpg","./images/666_67.jpg","./images/666_68.jpg","./images/666_69.jpg","./images/666_70.jpg","./images/666_71.jpg","./images/666_72.jpg","./images/666_73.jpg","./images/666_74.jpg","./images/666_75.jpg","./images/666_76.jpg","./images/666_77.jpg","./images/666_78.jpg","./images/666_79.jpg","./images/666_80.jpg","./images/666_81.jpg","./images/666_82.jpg","./images/666_83.jpg","./images/666_84.jpg","./images/666_85.jpg","./images/666_86.jpg","./images/666_87.jpg","./images/666_88.jpg","./images/666_89.jpg","./images/666_90.jpg","./images/666_91.jpg","./images/666_92.jpg","./images/666_93.jpg","./images/666_94.jpg","./images/666_95.jpg","./images/666_96.jpg","./images/666_97.jpg","./images/666_98.jpg","./images/666_99.jpg","./images/666_100.jpg",
]
}
})
</script>
5.嵌入模板<template></template>
<template id="bbq">
<div class="item" @click="change">
<img :src="im" v-show="show"/>
<!-- v-bind:src="路径" 可简写成:src="路径" 通过v-bind单项绑定元素的属性并绑定关联至vue的数据 -->
</div>
</template>
6.整体代码及运行效果
