vue做一个图片上传预览的组件，附vue-router基础用法
7-4更新 => 已将本次项目上传至 githulb/lonhon 欢迎大家下载，以后做的新东西也都会更新在上面。
之前发了一篇关于自己看待前端组件化的文章，但是由于学习和实践的业务逻辑差异，所以自己练习的一些demo逻辑比较简单，打算用vue重构现在公司做的项目，所以在一些小的功能页面上使用vue来做的，现在写的这个是项目中用户反馈功能而来的，收获还是挺多的。
收获：dom操作=>数据操作 router的使用 组件的使用，具体总结放在尾部。
- 功能：1.上传图片
- 2.显示缩略图
- 3.可以删除
先上成品图（主要抽取图片这块），自己在家主要做的功能，样式就不计较了。
先上文件目录
由于测试demo，结构基本和VUE初始化生成的目录一致，这里把Hello文件作为了这次组件开发的文件，App文件是主文件。这里自己理解的vue文件：是组件，也是页面。所以在定义的时候得根据实际情况来做路由还是组件。
因为产品给的图上面要求有5个按钮，意味着只能选5个文件，这里如果用原来的思维来做的话，就是放5个input进去，但是现在用vue来做了，肯定得用v-for，不然太low了。先看看html部分
使用ul列表作为input的容器，然后在li中使用v-for循环mmm对象，生成5个初始框。
img就是预览时候需要用到的了，使用v-if根据item.data是否为空来渲染，而src就是item.data
input就是上传的了，在它的change事件中实现我们的主要功能， ps：实际业务使用中应该还要指定name，并且item.name应该是相同的，这样提交给后台的时候才能更好读取。
span用于删除item.data，
现在看看data部分：
其中的mmm数组初始有5个子对象（因为需要5个固定的选择框），name为自己定义，data用于存放图片上传后的base64，还有一个flag用于判断是否上传成功的。现在看看效果
OK，已经得到了5个选择器，样式方面主要思路是将input设置为行内块级元素然后宽高100% 完全透明，比较简单，现在来实现预览效果，
预览效果主要使用的是H5新功能 fileReader 实现，
思路：在input指定change事件触发pushImg方法，接受两个参数，一个是event，一个index
在v-for循环渲染li的时候，使用的是v-for="(item,index) in mmm" ，其中item就是mmm数组的元素，index就是元素的下标，这里具体可以看官方的文档
现在来看pushImg方法：
在pushImg内部let了4个变量
mm指向data中的mmm，因为需要在reader.onload中用到，如果直接this.mmm会由于闭包取到reader.onloadg的this
flag用于标记上传成功，因为要做一个上传成功的提示
flie指向input
reader就是我们预览图片需要用到的了，这是一个H5的新接口，具体的使用手册点击 这里
在reader.onload中，我们将读取到的result也就是图片的base64码放入mmm[i].data
还设置了个定时器改变flag的值，实现成功提示的效果
ps：reader.onload是一个异步操作，所以result要么在它内部传出去，要么用回调或者promise传出去。
现在上传一个图片看看效果
已经ok，现在来做最后一步——删除图片
span中已经指定了click事件为delImg，来看看代码：
主要做的就是清空所点击的选择器的文件了
现在来一遍完整的流程：
小功告成，接下来说说使用vue-router把这个页面路由到其它页面中，要使用首先要安装这个模块，在项目目录下使用cnpm install vue-router就行
还是先说下大致步骤：
1.制作页面（这点上面已经做好了，就是我们的Hello文件）
2.配置路由
3.在页面中展示
直接来第2步，如果了解实体路由器的应该知道路由器中都有一个路由表，这里我建立了一个route.js，就类似于路由器中的路由表。
在route.js中，引入Vue、vue-router、和需要路由的组件Hello，图中的
import Hello from '@/components/Hello' 这里@相当于我配置的一个src目录的缩写而已，如果不会不用管，按照正常路径写就行。
下图中的path就是一个路径，在后面要用到，name相当于一个别名，component就是对应组件了。
按照上图，我们就创建了一个路由表，建立好之后我们需要在主入口把路由表挂载上去。这里项目的主入口main.js，
进入main.js，这里就引入上面配置好的路由表route.js，和程序的主模块App，可以看到我们的Vue实例是挂载到App中的。
接下来在App.vue中展示了，由于是静态路由，所以主要配置template模块，继续上配置图
图中圈出来的第一部分，就类似于我们的a标签，只不过vue-router使用router-link标签封装了，值得一提的是，router-link标签只是起到一个包裹的作用，并没有实际的html意义，里面可以放各种内容。
第二部分就是我们要展示的舞台了，<router-view></router-view> 就是我们的路由的模块需要映射的地方，现在来测试一下是否成功。
注意我们的地址栏的变化，从localhost：8080变成了localhost：8080/#/hhh，也就是说这次路由跳转成功。
现在来做组件引入到页面中
将Hello作为组件放在App中，其实只要其它页面引用了该组件，就可以使用，并不局限于App。
我们先在App.vue文件中的script部分将Hello引入，并注册该组件
接下来在template部分将组件放进去，我们来把他放在顶部。
现在来看看效果，如图页面中已经渲染出了该模块
现在我们来看看router和作为模块引入的结合效果。
现在能看到组件部分和路由进去的部分都能够正常运行，至此我们的功能就算全部完成了。
总结： 数据驱动的魔力实在太大，就拿图片上传来说，我们在实际操作中其实只是对data中的mmm进行了赋值操作，然后将值绑定在dom节点上，通过双向绑定就实现了对DOM的操作，特别是现在的网站项目中，大部分都是处理数据，比如电商之类的网站。其实在用VUE做这个上传功能之前我已经用传统的jQuery写出了这个插件，从手段上来说，jQuery做的就是操纵DOM节点，设置各个DOM节点的ID，然后js再通过ID取到对应的节点，给DOM绑上事件或者取出DOM的值，需要写大量的html代码和js代码；在VUE中，使用一个v-for就可以渲染出多个想要的内容。从复用性来说，我们这次做的这个上传图片功能就已经是一个组件了，我们不仅仅可以在App.vue中使用它。像这次的Hello，我们不仅可以使用路由把它作为一个新的页面，也可以使用component把他作为组件，也就是说，只要业务需要，我们可以选择合理的方式复用我们已经写好的东西。
特别需要注意的就是，使用angular或者vue这种数据驱动视图的框架，我们需要将原来的操纵DOM的思维转变为操纵数据。这点可能需要我们的抽象能力，将需要操作的对象封装成结构合理的数据。
