前言：组件作为Vue.js最强大的功能之一，因其封装可复用的代码方便程序员调用和可根据需求对组件进行个性化开发而深受广大前端程序员的喜爱。组件化的开发大大提升了代码的复用性，提升了项目开发效率，本文主要制作一个简易的小组件用来实现图片的点击翻转效果。
实现效果：
界面效果分析：
1.基本框架，创建盒子盛放界面
2. 点击事件，点击图片浏览器交互产生翻转效果
3. 图片翻转，点击图片消失再次点击出现
实现流程：
一 创建一个web项目，本地导入vue.js
创建一个包含HTML基本项目的Web项目，在js文件下下导入本地的Vue.js文件，通过<script src="js/vue.js"></script> 将Vue.js文件引入到我们的Web项目中。
二 实例化Vue对象 ,挂载Vue所绑定的DOM节点
在界面中通过引入<script>标签，并在<script>标签中实例化Vue对象。实例化对象后通过el属性将我们对象所需要挂载DOM节点的id值进行绑定。注：先创建DOM节点然后进行绑定。
三 实现效果分析
1.点击事件判断，给图片添加v-show属性通过@clike改变v-show的值，因为v-show属性值为false时将隐藏img节点导致我们无法进行再次点击进行值转换，所以要将@clike给盛放img的盒子，用盒子进行占位来实现再次点击翻转效果。
2. 用盒子盛放图片。给图片添加v-show属性通过属性值变换用来控制图片是否显示，给盒子添加背景实现图片的隐藏，当我们点击时隐藏img展现为盒子的背景图片再次点击展现图片。
四 创建组件
五 组件中存在的不足之处及改进思路
1.在template中图片的路径问题。img路径为固定值，当我们再次调用组件时不能进行值传递，代码的复用性太差
2. 组件使用时。路径固定不能修改当图片较多时需要重复调用组件，代码冗余。
改进思路：
1.创建一个数组用来存放图片路径，当图片较多时在数组中添加图片路径即可
2.增添v-for属性，用for循环遍历数组中的元素即可确定创建个数
3.增添v-bind属性接收传递的值，v-for 循环遍历创建数组中的每一个元素然后将获取到的值传递给v-bind属性
4.给src添加动态绑定属性，v-bind所获取到的值通过动态绑定将拿到的每一项的 src 值绑定给 img 标签的 src 上
具体实施
六 完整代码展示
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script src="js/vue.js"></script>
7 <style>
8 #app {
9 display: flex;
10 flex-wrap: wrap;
11 justify-content: space-around;
12 width: 1010px;
13 height: 610px;
14 margin: 0 auto;
15 }
16
17 .item {
18 width: 100px;
19 height: 60px;
20 background-color: #ccc;
21 }
22
23 img {
24 width: 100px;
25 height: 60px;
26 }
27 </style>
28 <noscript></noscript>
29 </head>
30 <body>
31 <div id="app">
32 <long v-for="img in arrayimg" v-bind:im="img"></long>
33
34 </div>
35
36 </body>
37
38 <template id="around">
39 <div class="item" @click="change">
40 <img :src="im" v-show="show" />
41 </div>
42
43
44 </template>
45
46 <script type="text/javascript">
47 Vue.component("long", {
48 template: "#around",
49 props: ["im"],
50 data: function() {
51 return {
52 show: true,
53
54 }
55 },
56 methods: {
57 change: function() {
58 this.show = !this.show
59 }
60 }
61
62 });
63
64 var vm = new Vue({
65 el: "#app",
66 data: {
67 arrayimg: ["img/1 (1).gif", "img/1 (2).gif", "img/1 (3).gif", "img/1 (4).gif", "img/1 (5).gif",
68 "img/1 (6).gif", "img/1 (7).gif", "img/1 (8).gif", "img/1 (9).gif", "img/1 (10).gif",
69 "img/1 (11).gif", "img/1 (12).gif", "img/1 (13).gif", "img/1 (14).gif", "img/1 (15).gif",
70 "img/1 (16).gif", "img/1 (17).gif", "img/1 (18).gif", "img/1 (19).gif", "img/1 (20).gif",
71 "img/1 (21).gif", "img/1 (22).gif", "img/1 (23).gif", "img/1 (24).gif", "img/1 (25).gif",
72 "img/1 (26).gif", "img/1 (27).gif", "img/1 (28).gif", "img/1 (29).gif", "img/1 (30).gif",
73 "img/1 (31).gif", "img/1 (32).gif", "img/1 (33).gif", "img/1 (34).gif", "img/1 (35).gif",
74 "img/1 (36).gif", "img/1 (37).gif", "img/1 (38).gif", "img/1 (39).gif", "img/1 (40).gif",
75 "img/1 (41).gif", "img/1 (42).gif", "img/1 (43).gif", "img/1 (44).gif", "img/1 (45).gif",
76 "img/1 (46).gif", "img/1 (47).gif", "img/1 (48).gif", "img/1 (49).gif", "img/1 (50).gif",
77 "img/1 (51).gif", "img/1 (52).gif", "img/1 (53).gif", "img/1 (54).gif", "img/1 (55).gif",
78 "img/1 (56).gif", "img/1 (57).gif", "img/1 (58).gif", "img/1 (59).gif", "img/1 (60).gif",
79 "img/1 (61).gif", "img/1 (62).gif", "img/1 (63).gif", "img/1 (64).gif", "img/1 (65).gif",
80 "img/1 (66).gif", "img/1 (67).gif", "img/1 (68).gif", "img/1 (69).gif", "img/1 (70).gif",
81 "img/1 (71).gif", "img/1 (72).gif", "img/1 (73).gif", "img/1 (74).gif", "img/1 (75).gif",
82 "img/1 (76).gif", "img/1 (77).gif", "img/1 (78).gif", "img/1 (79).gif", "img/1 (80).gif",
83 "img/1 (81).gif", "img/1 (82).gif", "img/1 (83).gif", "img/1 (84).gif", "img/1 (85).gif",
84 "img/1 (86).gif", "img/1 (87).gif", "img/1 (88).gif", "img/1 (89).gif", "img/1 (90).gif",
85 "img/1 (91).gif", "img/1 (92).gif", "img/1 (93).gif", "img/1 (94).gif", "img/1 (95).gif",
86 "img/1 (96).gif", "img/1 (97).gif", "img/1 (98).gif", "img/1 (99).gif", "img/1 (100).gif"
87 ]
88 }
89 });
90 </script>
标签：Vue,img,show,gif,点击,隐藏,图片 From： https://www.cnblogs.com/d1102/p/17231643.html