后台取值頁面顯示——Vue.js

在實際的應用中，幾乎90%的數據是來源於服務端的，前端和服務端之間的數據交互一般是通過ajax請求來完成的。 
說到ajax請求，第一反應肯定想到了jQuery，項目中如果引入jQuery會幫助我們簡化很多操作，簡化DOM操作，ajax方法獲取后端數據等。 
然而，Vue.js和jQuery沖突嗎？？？ 
答案顯然是不沖突！！！ 
接下來會實現Vue.js組件中使用jQuery的ajax方法獲取服務器端數據並綁定至組件的data中。

DOM

<table border="1" width="500" style="text-align:center" id="myView">
	    <tr>
	        <td>id</td>
	        <td>名字</td>
	        <td>性別</td>
	        <td>年齡</td>
	    </tr>
	    <tr v-for="user in userList"> //userList為后台保存在請求中的值
	    	<td>{{user.id}}</td>
	        <td>{{user.userName}}</td>
	        <td>{{user.sex}}</td>
	        <td>{{user.age}}</td>
	    </tr>
</table>

JS

<script>
var myModel = {userList:[]};

myViewModel = new Vue({
	el: '#myView',
	data: myModel
})

//寫成函數的目的，為了【復用】
function getData(){
	$.ajax({
		url: "userAction_getAllUser",                //后端的API地址
		type: 'POST',                                //http:POST/GET
		//data: postData,                            //指客戶端提交給后台的參數
		dataType: 'json',                            //服務端返回類型text，JSON
		timeout: 3000,
		success: function(result){
			myModel.userList = result.userList
		},
		error: function(){
			alert('服務器忙，請稍候');
		}
	});
}
getData();
</script>