工作需要，將公司項(xiàng)目從jQuery轉(zhuǎn)成Vue來(lái)寫(xiě)。這里分享下轉(zhuǎn)變項(xiàng)目的過(guò)程并寫(xiě)了一個(gè)小demo，希望能對(duì)遇到同樣問(wèn)題的朋友一些幫助。
PS： 本人Android開(kāi)發(fā)，兼職前端，前端知識(shí)淺薄，有什么不對(duì)的地方還請(qǐng)指出，大家共同進(jìn)步。謝謝~
jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過(guò)Vue對(duì)象將數(shù)據(jù)和View完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說(shuō)數(shù)據(jù)和View是分離的，他們通過(guò)Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的MVVM。
下載Vue.js，導(dǎo)入工程,我將其放在頭文件中。
<script src="vue.js"></script>為最外層的div標(biāo)簽定義id，然后使用Vue的el屬性進(jìn)行綁定
<div id="app"> <h2>學(xué)生信息登記</h2> ... <label>{{ result }}</label> </div>...<script> new Vue({ el: '#app', ... });</script>...使用v-model屬性將input標(biāo)簽的value值綁定到data的相應(yīng)數(shù)據(jù)中。
<div> <label>姓名：</label> <input type="text" placeholder="請(qǐng)輸入姓名" v-model="name"></div><div> <label>性別：</label> <input id="sex01" type="radio" value="1" v-model="sex"> <label for="sex01">男</label> <input id="sex02" type="radio" value="2" v-model="sex"> <label for="sex02">女</label></div><div> <label>年齡：</label> <select v-model="age"> <option selected>18</option> <option>19</option> <option>20</option> <option>21</option> </select></div><div> <label>黨員：</label> <input type="checkbox" v-model="member"></div>注意上方的v-model，我們?cè)赩ue對(duì)象的data屬性中綁定數(shù)據(jù)：
new Vue({ el: '#app', data: { name: '', sex: '', age: '', member: '', result: '' }, ...})到這里就實(shí)現(xiàn)了將表單input框和數(shù)據(jù)的綁定。更多Vue表單綁定可以查看表單控件綁定
在使用jQuery時(shí)，在HTML中需要定義大量的id、name之類的屬性用于jQuery選擇器獲取元素。
<input type="text" placeholder="請(qǐng)輸入姓名" id="name">...var name = $('#name').val();我們這里就不需要了。去除HTML中的這些屬性。
（其實(shí)這里v-model和id的作用有些類似，都是一個(gè)橋梁作用。我在修改的時(shí)候偷懶直接將id改成v-model，后面的name不改~）
Vue提供了v-on來(lái)監(jiān)聽(tīng)DOM事件，如demo中的點(diǎn)擊事件監(jiān)聽(tīng)屬性v-on:click。
<button id="btnCommit" v-on:click="commit">提交</button><button id="btnReset" v-on:click="reset">重置</button>然后在Vue對(duì)象的methods屬性中創(chuàng)建這兩個(gè)事件方法。
new Vue ({ ... methods: { commit: function () {...}, reset: function () {...}, ......另外，Vue還提供了其他v-on:屬性，如v-on:change、v-on:keyup等。具體請(qǐng)看：方法與事件處理
作為MVVM，當(dāng)然是雙向綁定的。Vue用v-model屬性使input可以修改數(shù)據(jù)內(nèi)容，實(shí)現(xiàn)界面修改數(shù)據(jù)；使用雙大括號(hào)來(lái)引用數(shù)據(jù)內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)修改界面。
具體寫(xiě)法如下：
<label>{{ result }}</label>...data: { result: 'hello world', ...}如上引用后，數(shù)據(jù)hello world將會(huì)實(shí)時(shí)同步顯示在labal標(biāo)簽上，每當(dāng)result數(shù)據(jù)有所改變，label的內(nèi)容立即會(huì)改變。
jQuery中為我們提供了一個(gè)document的ready方法，Vue中有ready屬性，它們的觸發(fā)時(shí)間差不多，具體要參考各自的生命周期。
jQuery寫(xiě)法：
$(document).ready(function () { alert("加載完成");});Vue寫(xiě)法：
new Vue ({ ... ready: function () { alert("加載完成"); }, ...})這是jQuery和Vue的最大不同點(diǎn)了。先看代碼:
jQuery:
var name = $('#name').val();var sex = '';if (getChackedValue('input[name=sex]') == 1){ sex = '男'}else if (getChackedValue('input[name=sex]') == 2){ sex = '女'}var age = $('#age').val();var member = '';if($('#member').is(':checked')) { member = '黨員';}else { member = "非黨員";}var result = name + ' ' + sex + ' ' + age + ' ' + member;$('#result').text(result);這是顯示表單結(jié)果的函數(shù)。jQuery是通過(guò)美元符號(hào)$來(lái)獲取指定元素，然后通過(guò)val()、text()等方法獲取指定元素的內(nèi)容或者為指定元素賦值。
Vue：
var name = this.name;var sex = '';if (this.sex == 1){ sex = '男';}else if (this.sex == 2){ sex = '女';}var age = this.age;var member = '';if (this.member){ member = '黨員';}else { member = '非黨員'}var result = name + ' ' + sex + ' ' + age + ' ' + member;this.result = result;同樣是顯示表單結(jié)果的函數(shù)。Vue不需要獲取DOM元素，只需要獲得和修改data對(duì)象中的數(shù)據(jù)就可以了。
這里需要注意的是：要用jQuery獲得或者修改一組radio很麻煩，需要操作checked屬性；而Vue處理radio只需通過(guò)數(shù)據(jù)，數(shù)據(jù)內(nèi)容就是radio的value值，修改value值radio就會(huì)自動(dòng)選擇目標(biāo)項(xiàng)。checkbox也是如此，jQuery要使用checked，而Vue只需要知道checkbox綁定的data為true或者false就可以知道checkbox是否被選中。
Vue的watch方法真的挺好用，當(dāng)程序出現(xiàn)問(wèn)題時(shí)可以將出問(wèn)題的data使用watch打log，每當(dāng)該數(shù)據(jù)發(fā)生變化時(shí)，watch方法都會(huì)被觸發(fā)。很好用~
watch: { 'sex': function (val, oldVal) { console.log('oldVal = ' + oldVal + ' val = ' + val); }}jQuery完全是通過(guò)美元符號(hào)來(lái)對(duì)各種元素進(jìn)行操作！根據(jù)HTML元素的id、name等屬性來(lái)獲取到元素并對(duì)其進(jìn)行取值、賦值、修改屬性能行為。
Vue的使用過(guò)程 是：先繪制HTML界面，然后在需要綁定數(shù)據(jù)的地方寫(xiě)下v-model、v-on等這些綁定屬性和方法，在顯示數(shù)據(jù)內(nèi)容的地方使用雙大括號(hào)顯示內(nèi)容。然后在Vue中，el屬性綁定根視圖的id，data屬性定義并初始化v-model、雙大括號(hào)用到的數(shù)據(jù)和一些其他數(shù)據(jù)。methods屬性定義在v-on中用到的和一些其他方法。更新界面修改數(shù)據(jù)實(shí)現(xiàn)。而修改數(shù)據(jù)通過(guò)操作界面實(shí)現(xiàn)。
寫(xiě)完了這個(gè)demo后，感覺(jué)到Vue的確有它的魅力所在。它的MVVM讓業(yè)務(wù)邏輯變得更加清晰和簡(jiǎn)單。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title> <script src="jquery-2.2.3.js"></script></head><body> <div> <h2>學(xué)生信息登記</h2> <br> <div> <label>姓名：</label> <input type="text" placeholder="請(qǐng)輸入姓名" id="name"> </div> <div> <label>性別：</label> <input id="sex01" type="radio" value="1" name="sex"> <label for="sex01">男</label> <input id="sex02" type="radio" value="2" name="sex"> <label for="sex02">女</label> </div> <div> <label>年齡：</label> <select id="age"> <option selected>18</option> <option>19</option> <option>20</option> <option>21</option> </select> </div> <div> <label>黨員：</label> <input type="checkbox" id="member"> </div> <br> <button id="btnCommit" onclick="commit()">提交</button> <button id="btnReset" onclick="reset()">重置</button> <br> <br> <label id="result"></label> </div> <script type="text/javascript"> $(document).ready(function () { alert("加載完成"); }); function commit() { var name = $('#name').val(); var sex = ''; if (getChackedValue('input[name=sex]') == 1){ sex = '男' }else if (getChackedValue('input[name=sex]') == 2){ sex = '女' } var age = $('#age').val(); var member = ''; if($('#member').is(':checked')) { member = '黨員'; }else { member = "非黨員"; } var result = name + ' ' + sex + ' ' + age + ' ' + member; $('#result').text(result); } function reset() { $('#result').text(''); } function getChackedValue (CheckboxId) { var value = 0; var i = 0; $(CheckboxId).each(function () { if($(CheckboxId).eq(i).is(':checked')) { value = $(CheckboxId).eq(i).val(); return; } i++; }); return value; } </script></body></html><!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>index</title> <script src="vue.js"></script></head><body> <div id="app"> <h2>學(xué)生信息登記</h2> <br> <div> <label>姓名：</label> <input type="text" placeholder="請(qǐng)輸入姓名" v-model="name"> </div> <div> <label>性別：</label> <input id="sex01" type="radio" value="1" v-model="sex"> <label for="sex01">男</label> <input id="sex02" type="radio" value="2" v-model="sex"> <label for="sex02">女</label> </div> <div> <label>年齡：</label> <select v-model="age"> <option selected>18</option> <option>19</option> <option>20</option> <option>21</option> </select> </div> <div> <label>黨員：</label> <input type="checkbox" v-model="member"> </div> <br> <button id="btnCommit" v-on:click="commit">提交</button> <button id="btnReset" v-on:click="reset">重置</button> <br> <br> <label>{{ result }}</label> </div> <script> new Vue({ el: '#app', data: { name: '', sex: '', age: '', member: '', result: '' }, ready: function () { alert("加載完成"); }, methods: { commit: function () { var name = this.name; var sex = ''; if (this.sex == 1){ sex = '男'; }else if (this.sex == 2){ sex = '女'; } var age = this.age; var member = ''; if (this.member){ member = '黨員'; } else { member = '非黨員'; } var result = name + ' ' + sex + ' ' + age + ' ' + member; this.result = result; }, reset: function () { this.result = ''; } }, watch: { 'sex': function (val, oldVal) { console.log('oldVal = ' + oldVal + ' val = ' + val); } } }); </script></body></html>聯(lián)系客服
