背景
在一pc端的web項目里，由於某些特性需要由動態語言處理，所以只在有需要使用vue來處理數據的頁面，直接引入vue.js來處理。
由於剛開始並沒有打算使用前端來渲染數據和處理交互，所以使用了一些非vue的ui和插件，導致后來沖突坑點不少。
非vue模塊化下使用vue，雖然不能import vue文件，使用組件方式也有點惡心，但處理一些事情還是不錯的。
使用formdata提交表單數據
先上代碼
var that = this; var myForm = document.getElementById("form_add"); var submitFormData = new FormData(myForm); submitFormData.append('action', this.action);//添加自定義的參數，這里是動作，添加或者修改 layer.load(0,{time:500}); $.ajax({ url : apiAddressAdd, type : 'POST', dataType : 'json', cache : false, processData : false, contentType : false, data : submitFormData })
有2個參數是必須設置processData 和 contentType
這里要說的是contentType，經實踐，不管是否有包括file上傳文件或圖片，則必須設置為false, 設置為true或不設置，后台都不能獲取
jquery賦值不響應input使用v-model綁定的值
在做某個修改數據功能的時候，由於表單的所有數據，使用v-model綁定的， 包括地址。
地址使用了一個jquery地址選擇器， 當選擇器選擇好地址的時候，只是賦值給input，並沒有觸發v-model綁定的數據
查看了一篇文章，賦值之后，需要觸發input的原生input事件，才會響應v-model：方式如下
$("#city-picker")[0].dispatchEvent(new Event('input'))
商品篩選之參數組選擇組件
這是很常見的一個功能，本處只是記錄一下思路過程，以防日后老年痴呆，請看下圖
如圖中，有4個參數組，每個參數組只能選定一個參數，選中的參數在下面以標簽，點擊X可以去掉相應已選擇的標簽
但由於參數組是從后台輸出的接口得到的，也就是說，不同的種類的商品，有不同的參數組，有的可能只有1組參數，也有可能有4組
本篇實現此處功能的前提，數據庫表應該設計為：
參數組為單獨一張表，如上面的是選擇了茶具種類，有：分類、材質 、風格、擺放空間，四種參數組（不同的商品種類可能會有相同的參數組，但統一添加到此表中，即唯一id值不會重復）
參數組的參數項為單獨一張表，關聯參數組表，和上面情況一樣，有可能和別的商品種類的一樣的參數組中有相同的參數項（名字就算相同，但是同表中唯一id值不會重復）
這2點也是實現本篩選功能的基礎。
以下為代碼的實現思路：
先看json數據結構
如圖所示，和上面的篩選組件截圖對應，4個參數組，每個參數組不同的id,所有參數項的id也不同,即便name相同也沒有關系。
請求到參數組的時候，做如下處理
res.data.paramGroup.forEach(function(item){ vm.$set(vm_data.param_group_active,'active_'+item.gid,0); }) //更新數據 that.dataParamsGroup = res.data.paramGroup;
把參數組所有數據原始格式放到一個叫param_group_active中
這個對象，用來標識當前哪組參數選中的哪項參數項，0，當然就是默認沒有選中
然后並遍歷參數組，以參數組的唯一id為標識，創建一個響應式的對象，值為0 （注意，這里說的是參數組，非參數組下面的參數項）
得到如下對象
然后看參數組dom結構 ：
里面的A標簽，就是參數的詳細項，激活的狀態，就是常見的tab的那個做法
選中當前標簽，當然是以class來表示了，上面綁定的class，取決於參數項自己的id,對應 param_group_active組中，激活的值
點擊參數項的時候：
參數帶入：參數組和id,當前點擊的參數項的id,並且vue的set方法來設置響應數據
比如當我選擇風格中的花鳥之后，風格的唯一id是14，而花鳥是12
很明了了，可以理解成動態tab。。。
接下來，選中的參數，都要顯示在下排，並可以取消。結構如下：
根據我們的激活參數項的數據param_group_active循環出來，大於0，當然是有了選擇，
然后你會看到paramsFlattening[item]這個東西，很明顯這是一個object，item一看就知道是當前選中的參數項的id值，
這里是要顯示所選中的參數項的名稱，所以，這個paramsFlattening里面肯定放了參數項的數據
但ahax取回來的數據是一個二維object,暫且這么叫，我們想一個辦法，我們在這例子中暫時叫參數扁平化
看代碼：
也就是把所有參數項，放到一個新的object中 （注意，我們這里的paramsFlattening是一個計算屬性）
以參數項的id為鍵名，中文名稱為值，遍歷放進去，得到了這么個對象：
所以我們在dom結構中直接以插值方式調用：{{paramsFlattening[item]}} ，便可以顯示所選中的標簽的對應中文名稱。
接下來是取消選中的標簽
從上面的截圖中可以看到點擊了i 標簽（是一個x圖標）調用了deleteParam,並帶進了參數item, 是參數項的id
來看這個方法：
遍歷存放激活狀態的對象，這里的key，就是這串:
看哪個對象（每個參數組）的id（記得這里存的是激活的參數項的id）值 和帶進來的id值一致，就設為0，
這樣，選中的標簽那個地方，是依賴這里值大於0才顯示的，設為0就不顯示了
最后你可能會問，選中是選中了，但怎么提交這些參數數據
在本例中，老衲把這些選中的參數項id值，堆成一塊，用,號分隔，開來，當然后台查詢的時候還要處理這個數據
封裝一個不完美的圖片上傳類
我們暫且稱它為類，雖然不是用es6 class...此處只當充數字量記錄一下，沒什么難度
使用場景：多個地方需要上傳圖片，於是搞了這么個東西，有可能直接點file元，也有可能點擊的是別的觸發元素，比如換頭像的時候。
依賴jquery和layer消息,使用formdata數據來當ajax發送的數據，好像有file元素，就要設置這2項:
contentType : false, processData : false
由於項目中api接口直接統一寫進配置文件，則這里不做成參數帶進方式
/** * [圖片上傳類，統一上傳地址] * @param {[type]} params [description] * @param {Function} cb [description] */ function ClassUploadImage(params,cb){ this.__proxyEl = params.proxyEl; this.__imgFileInput = params.imgFileInput; this.__module = params.module; this.__cb = cb ; } //初始化過程 ClassUploadImage.prototype.init = function(){ var that = this //先判斷是否有layer和jquery if(!window.$ || !window.jQuery){alert('沒有jquery!'); return false;} if(typeof layer == 'undefined'){alert('沒有引入layer!'); return false;} //綁定代理解發file事件的元素 $(that.__proxyEl).on("click",this,function(){ $(that.__imgFileInput).trigger('click'); }) //綁定文件表單的選擇事件，當選擇了文件，立即執行上傳 $(that.__imgFileInput).change(function(){ var files = $(this)[0].files[0]; var formObj = new FormData(); formObj.append('image', files); formObj.append('module', that.__module); that.upload(formObj); }); } //上傳過程 ClassUploadImage.prototype.upload = function(formObj){ var that = this; console.log('執行上傳！'); layer.load(0, {shade: false,time:300}); $.ajax({ url : apiImageUpload, type : 'post', dataType : 'json', data : formObj, cache : false, contentType : false, processData : false }) .done(function(res) { //此處未對返回的報文進行狀態碼判斷 $.lightTip.success(res.msg); that.__cb(res); }) .fail(function(e) { console.log('不知發生了什么錯誤...'); }) }
使用：
//上傳圖片初始化 var myUploadImg = new ClassUploadImage({ proxyEl:'#proxyuploadbutton,#proxyuploadimg', imgFileInput:'#image', module:'headimg' },function(res){ $(".header_original_img").val(res.img); $("#proxyuploadimg").attr('src',res.imgurl) }); myUploadImg.init();
參數__proxyEl為代理input的點擊事件元素，如果忽略此參數，就只能直接點擊file元素
data 里的Object變量中的Array類型屬性值坑人記錄
場景： 產品詳情頁數據返回的對象中，其中有一個是數組類型，是產品的相冊
{ "code": 0, "msg": "數據正常！", "data": { "id": 1, "img": "http://dummyimage.com/360x360", "name": "唐五代耀州窯剔刻蓮瓣水注", "artist": "藝術家名字", "authorId": 93, "price": "250000", "dsc": "鐮田先生的天目已經燒造幾十年，作品風格古朴自然 ，口部自然露胎，和傳統油滴建盞有很多相似之處。微距下，斑紋底部透明有反射膜 ，膜上斑紋大而立體，表面微有有觸感。胎體輕盈，色為棕，表面略泛光，喝茶之佳物。", "view": 779, "pcid": 2, "album": [ "http://lorempixel.com/600/600/technics/", "http://lorempixel.com/600/600/technics/", "http://lorempixel.com/600/600/technics/" ], "birth": "1986-11-16", "birthplace": "安徽省 宿州市 埇橋區", "birthtype": 2, "awidth": "30", "aheight": "80", "liked": 57, "detail": "事拉我道象特據片四信廠華。種海點支育容量作積斗眾運進。南界眼參派傳我真音例活術者所。持人較方觀切度題始可做習列。主萬適等自件教相全門話取用。低金色其命么放從特長拉線經便。", "selled": 0, "favorite": 1 } }
如代碼中的album,
如果在視圖中直接使用：<img :src="dataProduct.album[0]"/>
可以正常顯示圖片，但是會報錯，並且頁面中其它地方某些純粹的html結構出不來：
如果使用計算屬性：
<div>{{albumFirstImg}}</div>
一樣會報上面那個錯誤
開發工具中查看，確實是數組沒錯：
總結應該因為Vue數據包裝的問題，沒有學習研究過vue源碼，不知怎么回事，先放一邊
解決辦法：直接把返回數據中的album再賦值到data根對象下的album即可正常使用
文章結束
要不，加老衲微信做個朋友？
