這篇博客也不知道起個什么名字比較好，畢竟剛開始學(xué)習(xí)vue，很多還不是很熟悉，一直在慢慢摸索中；之前也習(xí)慣了用jQuery寫js代碼，思維邏輯也要有個轉(zhuǎn)換的過程。
1. 轉(zhuǎn)變思維
使用vue編寫代碼，首先要做的就是轉(zhuǎn)換思維，vue是一個數(shù)據(jù)驅(qū)動的框架，我們只需要操作數(shù)據(jù)，數(shù)據(jù)變化后，vue會自動改變DOM結(jié)構(gòu)，而jQuery是直接操作DOM的。比如剛開始寫的代碼中犯的錯誤，有一個頁面中的input標簽是并列多個的，而且name屬性的值是自增的，那么我就用v-for循環(huán)下，把index填充進去就行了，刪除的時候根據(jù)index再進行刪除。于是代碼是這樣的：
html:
<div id="app"> <ul> <li v-for="(item, index) in username"> ${index}. <input type="text" :name="'sb['+index+']'" /> <a href="javascript:;" :index="index" @click="del">delete</a> </li> </ul> <a href="javascript:;" @click="add">add</a></div>js:
var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : [1, 2, 3] // 只要數(shù)組的下標，因此數(shù)值無所謂 }, methods : { // 添加選項 add : function(){ this.username.push(1); }, // 刪除當(dāng)前選項 del : function(e){ var index = e.target.getAttribute('index'); // 獲取所在位置然后刪除 this.username.splice(index, 1); } }})我們先在輸入框中輸入不同的內(nèi)容，然后刪除中間的某個選項。[demo1]
結(jié)果發(fā)現(xiàn)，被刪除的永遠是最后一個。這是為什么呢，我也是刪除數(shù)組了呀？我是看了官方文檔后才明白：用戶往輸入框內(nèi)輸入的內(nèi)容只保存在了DOM中，而我們是用vue中的username的下標渲染的出來的DOM元素，我們并沒有保存用戶輸入的內(nèi)容。當(dāng)我們刪除了其中的某一項時，username發(fā)生變化，導(dǎo)致DOM重新渲染，渲染后，最后一項就沒有了。
那么怎么修改才能真正的實現(xiàn)刪除某一項呢？我們只需要把用戶輸入的內(nèi)容保存到username數(shù)組中即可：
html:
<div id="app"> <ul> <li v-for="(item, index) in username"> ${index}. <input type="text" :name="'sb['+index+']'" :value="item" > <a href="javascript:;" :index="index" @click="del">delete</a> </li> </ul> <a href="javascript:;" @click="add">add</a></div>js:
var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : ['wenzi', 'xxxx', 'yyyy'] // 只要數(shù)組的下標，因此數(shù)值無所謂 }, methods : { // 添加選項 add : function(){ this.username.push(''); // 新添加的輸入框為空 }, // 刪除當(dāng)前選項 del : function(e){ var index = e.target.getAttribute('index'); // 獲取所在位置然后刪除 this.username.splice(index, 1); } }})再來看下效果：[demo2]
2. 上傳圖片
剛開始時，使用的jQuery的插件fileupload，功能很全，當(dāng)我為file標簽綁定上change事件后，然后再調(diào)用該插件進行圖片上傳，總是會出現(xiàn)意想不到的bug，比如我先對圖片格式進行限制，只能上傳png格式的圖片，可是有時候jpg格式的也能上傳上去；png格式的圖片，英文名稱無法上傳，先傳個中文名稱，然后就可以再上傳英文呢名稱的了。
后來發(fā)現(xiàn)html5下的formData屬性，能非常方便的上傳圖片，而且同時還能上傳其他的參數(shù)，一小段代碼即可搞定：
// 上傳圖片，綁定change事件uppic : function(e){ var file = e.target.files[0]; // 每次只允許上傳一張圖片，因此只取[0] // 判斷圖片格式 if( file.type!='image/png' ){ alert('圖片格式不正確'); e.target.files.length = 0; $(e.target).val(''); return false; } // 使用formData組裝數(shù)據(jù) var formData = new FormData(); formData.append('pic', $(e.target)[0].files[0]); // 文件數(shù)據(jù) formData.append('flag', '1'); // 其他的一些參數(shù) $.ajax({// ajax上傳 url: 'xxxxx.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(result) { console.log('上傳完成'); });}3. 總結(jié)
現(xiàn)在也是剛開始學(xué)習(xí)vue，代碼肯定比較爛，最重要的還是轉(zhuǎn)變思維吧！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
