之前發(fā)了一篇關(guān)于自己看待前端組件化的文章，但是由于學(xué)習(xí)和實踐的業(yè)務(wù)邏輯差異，所以自己練習(xí)的一些demo邏輯比較簡單，打算用vue重構(gòu)現(xiàn)在公司做的項目，所以在一些小的功能頁面上使用vue來做的，現(xiàn)在寫的這個是項目中用戶反饋功能而來的，收獲還是挺多的。

 

收獲：dom操作=>數(shù)據(jù)操作       router的使用       組件的使用，具體總結(jié)放在尾部。

  • 功能：1.上傳圖片

  • 　　2.顯示縮略圖

  • 　　3.可以刪除

  •         4.可以重新選擇文件

先上成品圖（主要抽取圖片這塊），自己在家主要做的功能，樣式就不計較了。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

 先上文件目錄

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

由于測試demo，結(jié)構(gòu)基本和VUE初始化生成的目錄一致，這里把Hello文件作為了這次組件開發(fā)的文件，App文件是主文件。這里自己理解的vue文件：是組件，也是頁面。所以在定義的時候得根據(jù)實際情況來做路由還是組件。

因為產(chǎn)品給的圖上面要求有5個按鈕，意味著只能選5個文件，這里如果用原來的思維來做的話，就是放5個input進去，但是現(xiàn)在用vue來做了，肯定得用v-for，不然太low了。先看看html部分

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

使用ul列表作為input的容器，然后在li中使用v-for循環(huán)mmm對象，生成5個初始框。

img就是預(yù)覽時候需要用到的了，使用v-if根據(jù)item.data是否為空來渲染，而src就是item.data

input就是上傳的了，在它的change事件中實現(xiàn)我們的主要功能，     ps：實際業(yè)務(wù)使用中應(yīng)該還要指定name，并且item.name應(yīng)該是相同的，這樣提交給后臺的時候才能更好讀取。

span用于刪除item.data，

現(xiàn)在看看data部分：

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

其中的mmm數(shù)組初始有5個子對象（因為需要5個固定的選擇框），name為自己定義，data用于存放圖片上傳后的base64，還有一個flag用于判斷是否上傳成功的?，F(xiàn)在看看效果

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

OK，已經(jīng)得到了5個選擇器，樣式方面主要思路是將input設(shè)置為行內(nèi)塊級元素然后寬高100%  完全透明，比較簡單，現(xiàn)在來實現(xiàn)預(yù)覽效果，

預(yù)覽效果主要使用的是H5新功能 fileReader 實現(xiàn)，

思路：在input指定change事件觸發(fā)pushImg方法，接受兩個參數(shù)，一個是event，一個index

在v-for循環(huán)渲染li的時候，使用的是v-for="(item,index) in mmm" ，其中item就是mmm數(shù)組的元素，index就是元素的下標，這里具體可以看官方的文檔

現(xiàn)在來看pushImg方法：

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

在pushImg內(nèi)部let了4個變量

　　mm指向data中的mmm，因為需要在reader.onload中用到，如果直接this.mmm會由于閉包取到pushImg的this

　　flag用于標記上傳成功，因為要做一個上傳成功的提示

　　flie指向input

　　reader就是我們預(yù)覽圖片需要用到的了，這是一個H5的新接口，具體的使用手冊點擊 這里

在reader.onload中，我們將讀取到的result也就是圖片的base64碼放入mmm[i].data

還設(shè)置了個定時器改變flag的值，實現(xiàn)成功提示的效果

ps：reader.onload是一個異步操作，所以result要么在它內(nèi)部傳出去，要么用回調(diào)或者promise傳出去。

現(xiàn)在上傳一個圖片看看效果

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

已經(jīng)ok，現(xiàn)在來做最后一步——刪除圖片

span中已經(jīng)指定了click事件為delImg，來看看代碼：

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

主要做的就是清空所點擊的選擇器的文件了

 大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

現(xiàn)在來一遍完整的流程：

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

小功告成，接下來說說使用vue-router把這個頁面路由到其它頁面中，要使用首先要安裝這個模塊，在項目目錄下使用cnpm install vue-router就行

還是先說下大致步驟：

　　1.制作頁面（這點上面已經(jīng)做好了，就是我們的Hello文件）

　　2.配置路由

　　3.在頁面中展示

直接來第2步，如果了解實體路由器的應(yīng)該知道路由器中都有一個路由表，這里我建立了一個route.js，就類似于路由器中的路由表。

在route.js中，引入Vue、vue-router、和需要路由的組件Hello，圖中的 

import Hello from '@/components/Hello'　　這里@相當于我配置的一個src目錄的縮寫而已，如果不會不用管，按照正常路徑寫就行。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 


按照上圖，我們就創(chuàng)建了一個路由表，建立好之后我們需要在主入口把路由表掛載上去。這里項目的主入口main.js，
進入main.js，這里就引入上面配置好的路由表route.js，和程序的主模塊App，可以看到我們的Vue實例是掛載到App中的。
大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

接下來在App.vue中展示了，由于是靜態(tài)路由，所以主要配置template模塊，繼續(xù)上配置圖
大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

圖中圈出來的第一部分，就類似于我們的a標簽，只不過vue-router使用router-link標簽封裝了，值得一提的是，router-link標簽只是起到一個包裹的作用，并沒有實際的html意義，里面可以放各種內(nèi)容。

第二部分就是我們要展示的舞臺了，<router-view></router-view> 就是我們的路由的模塊需要映射的地方，現(xiàn)在來測試一下是否成功。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

注意我們的地址欄的變化，從localhost：8080變成了localhost：8080/#/hhh，也就是說這次路由跳轉(zhuǎn)成功。

現(xiàn)在來做組件引入到頁面中

將Hello作為組件放在App中，其實只要其它頁面引用了該組件，就可以使用，并不局限于App。

我們先在App.vue文件中的script部分將Hello引入，并注冊該組件

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

接下來在template部分將組件放進去，我們來把他放在頂部。

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

現(xiàn)在來看看效果，如圖頁面中已經(jīng)渲染出了該模塊
大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

現(xiàn)在我們來看看router和作為模塊引入的結(jié)合效果。
大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)
現(xiàn)在能看到組件部分和路由進去的部分都能夠正常運行，至此我們的功能就算全部完成了。


總結(jié)：   數(shù)據(jù)驅(qū)動的魔力實在太大了，就拿圖片上傳來說，我們在實際操作中其實只是對data中的mmm進行了賦值操作，然后將值綁定在dom節(jié)點上，通過雙向綁定就實現(xiàn)了對DOM的操作，特別是現(xiàn)在的網(wǎng)站項目中，大部分都是處理數(shù)據(jù)，比如電商之類的網(wǎng)站。其實在用VUE做這個上傳功能之前我已經(jīng)用傳統(tǒng)的jQuery寫出了這個插件，從手段上來說，jQuery做的就是操縱DOM節(jié)點，設(shè)置各個DOM節(jié)點的ID，然后js再通過ID取到對應(yīng)的節(jié)點，給DOM綁上事件或者取出DOM的值，需要寫大量的html代碼和js代碼；在VUE中，使用一個v-for就可以渲染出多個想要的內(nèi)容。從復(fù)用性來說，我們這次做的這個上傳圖片功能就已經(jīng)是一個組件了，我們不僅僅可以在App.vue中使用它。像這次的Hello，我們不僅可以使用路由把它作為一個新的頁面，也可以使用component把他作為組件，也就是說，只要業(yè)務(wù)需要，我們可以選擇合理的方式復(fù)用我們已經(jīng)寫好的東西。

　　特別需要注意的就是，使用angular或者vue這種數(shù)據(jù)驅(qū)動的框架，我們需要將原來的操縱DOM的思維轉(zhuǎn)變?yōu)椴倏v數(shù)據(jù)。

http://www.cnblogs.com/lonhon/p/7107824.html