一、vue的使用

直接用 <script> 引入
开发版本：https://cn.vuejs.org/js/vue.js

二、生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

Vue 实例生命周期

三、vue常见指令

{{}}
vue一直解析数据的指令
v-bind: 【简写：】
表示通知vue在渲染的 DOM 标签时，将bind绑定的属性和 Vue 实例data中同名属性值保持一致，单项绑定
v-model:
与v-bind类似，不过数据可同步改动，双向绑定
v-html= {{属性}}
会原样输出数据属性，如果说数据是带有html格式的数据时，此时需要使用v-html指令
v-if= 【 v-else-if= 】
判断指令
v-for=
循环指令
v-for="item in arr"
for="(item, index) in arr"
v-on【简写@】
事件绑定指令，可缩写成@，方法写在methods：{//所有vue实例属性，所有vue相关的函数都在这里定义}里

四、vue事件

methods: { choseClick: function (){...}}
@click .. 事件函数
$event
事件信息封装对象：使用 $event 标记
e.currentTarget
获取事件源
choseClick($event,u.id,u.name)"
事件传参，调用事件函数传入参数
choseClick:function (e, id, name) {...}

五、vue的属性

el : "#app"
用来指示vue编译器从什么地方开始解析 vue的语法
data:
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中，data:{ arr:[1,2,3] }
methods:
放置页面中的业务逻辑，js函数一般都放置在methods中
filters:
vue过滤器集合

dataFormat:function () {
},
sexFilter:function (sex) {
      return sex == 0? '女':'男'
}

mounted:function(){...}
是一个函数，用来初始化，在vue实例创建完成后被立即调用（html加载完成后执行）

六、前后端分离

浏览器怎么发起请求

前后端分离操作流程.png

vue怎么接受处理请求

浏览器访问页面，vue的mounted 属性初始化发起跨域异步请求，调用后端暴露的接口，控制器处理返回json数据data,使用js加工，设置到vue的data:属性，通过v-for循环取出数据

vue怎么发起异步请求

mounted 属性初始化操作，发起$.get异步请求

接口服务器怎么接受并处理异步请求

控制器通过$get异步请求，调用后端暴露的接口，再通过业务方法查询出list数据后返回json数据给前端

vue怎么处理接口返回json格式结果

通过控制器出来返回json数据，使用异步请求的回调函数来接收参数，设置进vue的data属性里

七、其他

跨域

mvc配置方式

@SpringBootApplication
public class MongodbApplication implements WebMvcConfigurer {

   //跨域访问
   @Bean
   public WebMvcConfigurer corsConfigurer() {
       return new WebMvcConfigurer() {
           @Override
           //重写父类提供的跨域请求处理的接口
           public void addCorsMappings(CorsRegistry registry) {
               //添加映射路径
               registry.addMapping("/**")
                       //放行哪些原始域
                       .allowedOrigins("*")
                       //是否发送Cookie信息
                       .allowCredentials(true)
                       //放行哪些原始域(请求方式)
                       .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                       //放行哪些原始域(头部信息)
                       .allowedHeaders("*")
                       //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                       .exposedHeaders("Header1", "Header2");
           }
       };
   }
   public static void main(String[] args) {
       SpringApplication.run(MongodbApplication.class,args);
   }
}

注解方式
@CrossOrigin(origins = "http://localhost:8888")表示只允许这一个url可以跨域访问这个controller

vue