一.技术概述
Ajax即Asynchronous Javascript And XML,它的意思是异步js和xml,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
以上内容引用自百度百科。
二.使用原理
ajax帮我们封装了javascript的XmlHttpRequest对象，使得我们可以很轻松地通过url地址来获取到一些数据，再通过dom操作将数据渲染到页面上，这样我们便不需要刷新整个页面，就能在前端上非常快速地改变外观。
而vue则为我们提供了数据和dom的响应式驱动，帮助我们实时渲染页面中的dom元素，而不再需要我们使用原生js复杂臃肿的document.queryselector方法获取元素再做操作。
总之，ajax负责获取数据，vue负责实时渲染数据，就这么简单。
三.案例示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue和ajax的配合使用</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
</head>
<body>
<div id="app">
<span>{
{message}}</span>
<input type="button" value="获取Message" @click="getMessage">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
message: "demo"
},
methods: {
getMessage:function(){
var that=this;
$.ajax({
type: "method",
url: "url",
data: "data",
dataType: "dataType",
success: function (response) {
that.message = response.data;
}
});
}
}
})
</script>
</body>
</html>在这个案例中，我引入了vue2.0和jquery的官方地址，并随手写了一个id为app的div，在这个div中的span标签中，将我在vue对象中声明的message变量渲染在这里，如读者所见，它的初值是"demo"。
另外，除了声明了变量，我还声明了一个函数，名叫getMessage，它将作为ajax请求的回调函数，它的作用是：获取ajax请求得到的数据并且赋值给message变量。div中的按钮通过vue指令@click绑定了这个函数。当我们点击了这个按钮后，message变量的值就会发生变化，随之发生的就是页面数据的实时渲染，这非常酷！
这里要注意的是，getMessage()函数中的this指向问题。如读者所见，我们必须先将this存放到that(当然也可以取别的名字)中，在ajax回调中使用that而不是this。
如果你使用以下这种写法，那你就大错特错了！
<script>
var vue = new Vue({
el: "#app",
data: {
message: "demo"
},
methods: {
getMessage:function(){
$.ajax({
type: "method",
url: "url",
data: "data",
dataType: "dataType",
success: function (response) {
this.message = response.data;
}
});
}
}
})
</script>这样去写，会导致this.message报undefined异常。这就是this指向不对的问题。
说了这么多，如果读者想要复制这段代码自己测试的话，请将ajax请求中的属性加以更改，否则将无效。
四.前后端分离实现原理
我们以java为例，传统的开发会在jsp中通过嵌入java代码实现与后端的链接，但这，写过的都知道，比较笨重且麻烦，如果有一种办法能让浏览器自己通过脚本语言渲染数据就好了。于是，我们想到了Vue。
我们可以通过ajax请求给后端的Servlet,也就是MVC模式下的视图层，然后通过回调函数将数据存放在Vue对象中，而vue对象中的data是和页面元素双向绑定的，这样就能在不需要刷新页面的情况下渲染新的元素。
这样一来，前端就真的只是前端，后端就真的只是后端了。
前端请求后端接口的数据然后渲染到页面，后端只需要负责开发供前端人员使用的接口。这样一来，相比于传统开发模式，开发效率将大大提高。
以上全部内容仅代表个人观点，如有异议请及时指出，毕竟博主也只是个菜鸟。