jQuery轉Vue專案實踐總結
工作需要，將公司專案從jQuery轉成Vue來寫。這裡分享下轉變專案的過程並寫了一個小demo，希望能對遇到同樣問題的朋友一些幫助。
PS： 本人Android開發，兼職前端，前端知識淺薄，有什麼不對的地方還請指出，大家共同進步。謝謝~
jQuery和Vue的區別
jQuery是使用選擇器（$）選取DOM物件，對其進行賦值、取值、事件繫結等操作，其實和原生的HTML的區別只在於可以更方便的選取和操作DOM物件，而資料和介面是在一起的。比如需要獲取label標籤的內容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue物件將資料和View完全分離開來了。對資料進行操作不再需要引用相應的DOM物件，可以說資料和View是分離的，他們通過Vue物件這個vm實現相互的繫結。這就是傳說中的MVVM。
jQuery to Vue
1. 匯入Vue.js，去除jQuery。
下載Vue.js，匯入工程,我將其放在標頭檔案中。
<script src="vue.js"></script>2. 根檢視id繫結
為最外層的div標籤定義id，然後使用Vue的el屬性進行繫結
<div id="app">
<h2>學生資訊登記</h2>
...
<label>{{ result }}</label>
</div>
... 3. 為input新增v-model
使用v-model屬性將input標籤的value值繫結到data的相應資料中。
<div>
<label>姓名：</label>
<input type="text" placeholder="請輸入姓名" v-model="name">
</div>
<div>
<label 注意上方的v-model，我們在Vue物件的data屬性中繫結資料：
new Vue({
el: '#app',
data: {
name: '',
sex: '',
age: '',
member: '',
result: ''
},
...
})到這裡就實現了將表單input框和資料的繫結。更多Vue表單繫結可以檢視表單控制元件繫結
4. 刪除id、name這些用於jQuery的屬性
在使用jQuery時，在HTML中需要定義大量的id、name之類的屬性用於jQuery選擇器獲取元素。
<input type="text" placeholder="請輸入姓名" id="name">
...
var name = $('#name').val();我們這裡就不需要了。去除HTML中的這些屬性。
（其實這裡v-model和id的作用有些類似，都是一個橋樑作用。我在修改的時候偷懶直接將id改成v-model，後面的name不改~）
5. 將點選事件onclick改為v-on:click
Vue提供了v-on來監聽DOM事件，如demo中的點選事件監聽屬性v-on:click。
<button id="btnCommit" v-on:click="commit">提交</button>
<button id="btnReset" v-on:click="reset">重置</button>然後在Vue物件的methods屬性中建立這兩個事件方法。
new Vue ({
...
methods: {
commit: function () {...},
reset: function () {...},
...
...另外，Vue還提供了其他v-on:屬性，如v-on:change、v-on:keyup等。具體請看：方法與事件處理
6. 引用資料
作為MVVM，當然是雙向繫結的。Vue用v-model屬性使input可以修改資料內容，實現介面修改資料；使用雙大括號來引用資料內容，實現資料修改介面。
具體寫法如下：
<label>{{ result }}</label>
...
data: {
result: 'hello world',
...
}如上引用後，資料hello world將會實時同步顯示在labal標籤上，每當result資料有所改變，label的內容立即會改變。
7. 替換ready方法
jQuery中為我們提供了一個document的ready方法，Vue中有ready屬性，它們的觸發時間差不多，具體要參考各自的生命週期。
jQuery寫法：
$(document).ready(function () {
alert("載入完成");
});Vue寫法：
new Vue ({
...
ready: function () {
alert("載入完成");
},
...
})8.修改獲取和修改元素屬性的方式
這是jQuery和Vue的最大不同點了。先看程式碼:
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);這是顯示錶單結果的函式。jQuery是通過美元符號$來獲取指定元素，然後通過val()、text()等方法獲取指定元素的內容或者為指定元素賦值。
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;同樣是顯示錶單結果的函式。Vue不需要獲取DOM元素，只需要獲得和修改data物件中的資料就可以了。
這裡需要注意的是：要用jQuery獲得或者修改一組radio很麻煩，需要操作checked屬性；而Vue處理radio只需通過資料，資料內容就是radio的value值，修改value值radio就會自動選擇目標項。checkbox也是如此，jQuery要使用checked，而Vue只需要知道checkbox繫結的data為true或者false就可以知道checkbox是否被選中。
9. Vue使用watch方法測試
Vue的watch方法真的挺好用，當程式出現問題時可以將出問題的data使用watch打log，每當該資料發生變化時，watch方法都會被觸發。很好用~
watch: {
'sex': function (val, oldVal) {
console.log('oldVal = ' + oldVal + ' val = ' + val);
}
}總結心得
jQuery完全是通過美元符號來對各種元素進行操作！根據HTML元素的id、name等屬性來獲取到元素並對其進行取值、賦值、修改屬效能行為。
Vue的使用過程 是：先繪製HTML介面，然後在需要繫結資料的地方寫下v-model、v-on等這些繫結屬性和方法，在顯示資料內容的地方使用雙大括號顯示內容。然後在Vue中，el屬性繫結根檢視的id，data屬性定義並初始化v-model、雙大括號用到的資料和一些其他資料。methods屬性定義在v-on中用到的和一些其他方法。更新介面修改資料實現。而修改資料通過操作介面實現。
寫完了這個demo後，感覺到Vue的確有它的魅力所在。它的MVVM讓業務邏輯變得更加清晰和簡單。
所有程式碼
jQueryPage
<!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>學生資訊登記</h2>
<br>
<div>
<label>姓名：</label>
<input type="text" placeholder="請輸入姓名" 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>VuePage
<!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>學生資訊登記</h2>
<br>
<div>
<label>姓名：</label>
<input type="text" placeholder="請輸入姓名" 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>