前置概述：

Vue.js是类似于Angular.js的灵活前端Js框架，vue本身是一个构建数据驱动的渐进式框架**数据驱动：**前提是事先将DOM与数据绑定，当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改DOM
**事件驱动：**通过js提供的事件对象(Document)完成某些操作，监听该事件，触发后从页面的DOM元素中逐个收集数据，然后再进行数据处理最后调用接口进行提交优势：直观，页面做出的任何改变全部交由js处理，整个流程由自己掌控劣势：适用于小型项目，项目扩大化后代码编写成本与维护成本将急剧上升，具有较高的代码抽象与规范要求，整个项目代码好烂可能受制于某一个人，木桶原理**渐进式：**可以只独立使用使用一部分而不是所有，具有较强的灵活性与兼容性**双向绑定与单向绑定:**双向绑定：数据驱动，效果上视图层与模型层直接进行了交互，即数据变化更新视图，视图变化更新数据缺点：由于自动更新的特点，无法确定data改变的时机与原因，但是可以通过watch监听来实现控制单向绑定：指的是我们先把模板写好，把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。缺点：操控不够灵活，当用户页面数据发生改变时，必须要重新利用DOM操作获取页面数据再提交后台来处理，不能自动的将页面数据传给数据模型，严格地讲单向绑定的情况下没有数据模型的概念

MVVM模式:

Model-View-ViewModel原理：通过DOM Listeners监听视图层，一旦视图层内容发生改变则更新模型层内容通过Data Bindings实现当模型层内容发生改变时更新视图层内容本质上ViewModel与Controller还是十分类似的，都是用以控制数据的双向流转

Vue.Js相关:

**使用流程：**1.实例化Vue对象，格式：

		new Vue({el:"",          //Vue挂载点data:{          //数据模型...},methods:{       //方法函数函数名:function({...})}});

    2.配置挂载点(控制区域)el3.准备数据模型data4.添加方法函数methods5.使用插值表达式进行数据展示[注意]:插值表达式可以进行数值运算，但是当进行字符串拼接时，需要使用引号包裹拼接内容，否则将会出现undefine**指令：**事件绑定：v-on:事件        v-on:click            鼠标单击v-on:keydown          键盘按下v-on:mouseover        光标悬停...**[注意]:**可以直接使用 @ 符号替换 v-on: 标识，如v-on:click ---> @ click事件修饰符：事件.修饰符.prevent              阻止默认.stop                 阻止冒泡.按键                 只有按下特定键位时才会触发对应事件，如：enter、space......文本展示：v-text                文本展示v-html                解析展示...数据绑定：v-model               双向绑定强制绑定：v-bind:属性 或 :属性v-bind:color强制将js的属性识别为vue的属性，从而完成目标数据的替换循环遍历：v-for = "... in ..."[注意]:可以在遍历的同时显示下标,格式：v-for="(e,i) in list"其中e表示被遍历对象中一个元素，i表示在对象中的下标控制显隐：v-if                  标签变更v-show                样式变更[注意]:两者区别：if方式隐藏将会移除整个标签，show方式仅仅是变更标签的样式控制显隐，前者对性能影响较大适用于高安全需求，后者对性能影响相对较小，适用于高效需求生命周期：前后可做处理创建实例、挂载、数据更新、销毁实例[注意]:Vue实例销毁后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用，但是dom结构依然存在，对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能拓展：1.阻止浏览器默认事件           event.preventDefault();2.事件的传播性（冒泡）任何事件首先向下传播直到遇到目标元素，然后再向上冒泡返回3.回调函数(钩子函数)：一个被作为参数传递的普通函数

Axios: 详见官方中文文档https://www.kancloud.cn/yunye/axios/234846

Vue.js中使用一个第三方插件替代vue-resource，发送Ajax请求特点：1.支持浏览器和node.js 2.支持promise3.能拦截请求和响应4.能转换请求和响应数据5.能取消请求6.自动转换JSON数据7.浏览器支持防止CSRF（跨站请求伪造）格式：axios.请求方式(url[, data[, config]]).then(function(res){...}).catch(function(err){...})注：其中请求方式共计七种常用get/post，then类似ajax的成功回调函数，catch类似失败回调函数如：

         axios.post(url,_this.user).then(function(result){_this.findAll();}).catch(function(err){console.log(err);});

综合案例：(此案例仅提供流程思路，代码过长不作展示)

SpringBoot+SpringMVC+SpringDataJpa+Vue.js1.准备启动类@SpringBootApplication
2.准备实体类[注意]:当数据库字段与实体类属性名一致时可以不用添加@Colunm注解进行映射，若字段格式清晰（如：user_name）且实体类属性名使用驼峰命名法则可以自动进行关系映射
3.准备dao持久层接口
4.准备service业务层及实现类[注意]:当查询单个对象时，由于JPA默认返回值类型为Optional<T>类型，故需要通过.get()方法获取对应泛型的对象，再进行返回
5.准备controller控制层
6.准备静态资源文件在resources下准备static文件夹用以存储静态资源文件
7.编写前端Vue.js代码1.实例化Vue对象设置挂载点准备数据模型准备方法函数准备生命周期钩子函数[注意]:挂载点即控制区域，超出其范围的组件将不接受Vue控制2.使用axios发送ajax请求[注意]:1.控制台打印后端响应数据：console.log();控制组件显隐：$(选择器).modal('show')2.前端this只会代表距离最近的对象实例，注意axios也算，可能需要另外定义变量代表Vue实例对象进行赋值3.后端响应格式可以参照控制台打印内容格式，所需的响应数据内容在data集合中