作业"/>
vue作业
1素材处理（ps)
打开ps使用切片工具，把图片切成10*10
储存为web格式
2.导入图片进行布局
实用弹性布局，在主轴上换行显示，在主轴上的对齐方式为元素两边距离一样
给图片设置固定宽高，item上下边距设置为5px
3.1导入vue源码并实例化一个Vue对象
3.2定义组件
1.使用Vuepnent()方法用于全局注册组件，通过id绑定template属性
2.使用props["im"]用来接受父组件定义的数据
3.使用v-for获取data中的数据，放入a中
4.添加点击效果，定义change（）方法
5.v-bind绑定src动态改变图片地址
4.效果图
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>body{background-color: antiquewhite;}.content{border: 1px solid red;width: 1300px;margin: 0 auto;display: flex;flex-wrap: wrap;justify-content: space-around;}.item{width: 120px;height: 50px;margin: 5px 0px;background-color: #ccc;}img{width: 120px;height: 50px;}</style><script src="js/vue.js"></script></head><body><div id="app"><div class="content"><fu-img v-for="a in imgs" :im="a"></fu-img></div></div></body><template id="testImg"><div class="item" @click="change"><img :src="im" V-show="show" /></div></template><script>Vueponent("fu-img",{template:"#testImg",props:["im"],data:function(){return{show:true}},methods:{change:function(){this.show = !this.show}}});var vm =new Vue({el:"#app",data:{imgs:["img/images/1_01.jpg","img/images/1_02.jpg","img/images/ 1_03.jpg","img/images/ 1_04.jpg","img/images/ 1_05.jpg","img/images/ 1_06.jpg","img/images/1_07.jpg","img/images/ 1_08.jpg","img/images/ 1_09.jpg","img/images/ 1_10.jpg","img/images/ 1_11.jpg","img/images/1_12.jpg","img/images/ 1_13.jpg","img/images/ 1_14.jpg","img/images/ 1_15.jpg","img/images/ 1_16.jpg","img/images/1_17.jpg","img/images/ 1_18.jpg","img/images/ 1_19.jpg","img/images/ 1_20.jpg","img/images/ 1_21.jpg","img/images/1_22.jpg","img/images/ 1_23.jpg","img/images/ 1_24.jpg","img/images/ 1_25.jpg","img/images/ 1_26.jpg","img/images/1_27.jpg","img/images/ 1_28.jpg","img/images/ 1_29.jpg","img/images/ 1_30.jpg","img/images/ 1_31.jpg","img/images/1_32.jpg","img/images/ 1_33.jpg","img/images/ 1_34.jpg","img/images/ 1_35.jpg","img/images/ 1_36.jpg","img/images/1_37.jpg","img/images/ 1_38.jpg","img/images/ 1_39.jpg","img/images/ 1_40.jpg","img/images/ 1_41.jpg","img/images/ 1_42.jpg","img/images/ 1_43.jpg","img/images/ 1_44.jpg","img/images/ 1_45.jpg","img/images/ 1_46.jpg","img/images/ 1_47.jpg","img/images/ 1_48.jpg","img/images/ 1_49.jpg","img/images/ 1_50.jpg","img/images/ 1_51.jpg","img/images/ 1_52.jpg","img/images/ 1_53.jpg","img/images/ 1_54.jpg","img/images/ 1_55.jpg","img/images/ 1_56.jpg","img/images/ 1_57.jpg","img/images/ 1_58.jpg","img/images/ 1_59.jpg","img/images/ 1_60.jpg","img/images/ 1_61.jpg","img/images/ 1_62.jpg","img/images/ 1_63.jpg","img/images/ 1_64.jpg","img/images/ 1_65.jpg","img/images/ 1_66.jpg","img/images/ 1_67.jpg","img/images/ 1_68.jpg","img/images/ 1_69.jpg","img/images/ 1_70.jpg","img/images/ 1_71.jpg","img/images/ 1_72.jpg","img/images/ 1_73.jpg","img/images/ 1_74.jpg","img/images/ 1_75.jpg","img/images/ 1_76.jpg","img/images/ 1_77.jpg","img/images/ 1_78.jpg","img/images/ 1_79.jpg","img/images/ 1_80.jpg","img/images/ 1_81.jpg","img/images/ 1_82.jpg","img/images/ 1_83.jpg","img/images/ 1_84.jpg","img/images/ 1_85.jpg","img/images/ 1_86.jpg","img/images/ 1_87.jpg","img/images/ 1_88.jpg","img/images/ 1_89.jpg","img/images/ 1_90.jpg","img/images/ 1_91.jpg","img/images/ 1_92.jpg","img/images/ 1_93.jpg","img/images/ 1_94.jpg","img/images/ 1_95.jpg","img/images/ 1_96.jpg","img/images/ 1_97.jpg","img/images/ 1_98.jpg","img/images/ 1_99.jpg","img/images/ 1_100.jpg"
]}})</script>
</html>
更多推荐
vue作业
发布评论