后台取值页面显示——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>