超级小狗的博客

我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并。

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。浏览器打开，运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。其中我们需要重点关注的是**mounted,**其他的我们了解即可。mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。"vue挂载完成,发送请求到服务端"

在上述的快速入门中，我们发现了html中输入了一个没有学过的属性v-model，这个就是vue的。指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的。接下来我们通过一个vue的快速入门案例，来体验一下vue。

基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代码开发变得更加的简单。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。在更加复杂的dom操作中，vue只会变得更加的简单！在上述的代码中，我们看不到之前的DOM操作，因为vue全部帮我们封装好了。框架即是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。