1.创建文件夹PhotoTest。
2.并在当前文件夹下创建img包用来存储图片。
3.把vue.js文件复制到PhotoTest文件夹下
4.图片切片
(1)图片在photoshop(ps)中打开。
(2)右键选择切片工具。
(3)左键拉一个框选中整张图片,再点击右键选择划分切片。
(4)勾上水平和垂直划分,并且内容都改为10
(5)存储为web格式,选择JPEG格式
(6)选择新建文件夹得到100张图片
5.页面布局
(1).打开HBuilder创建一个HTML文件并写好整体结构
(2) 写好主体盒子样式
(3)写一个自定义组件(component),并且在template下写好我们要重复使用的模板。
(4).因为我们要把100张切片图片都放进去所以使用v-for循环遍历我们的图片更方便,:obj(v-bind:obj)这个是我们用props设置的自定义属性,其目的是让我们img标签中的 :src 中的值变为一个动态的对像。
(5) .在data中写一个imgs数组用来存放我们100张图片的地址
(6)运行效果图(每个方框都可以点击隐藏和显示)。