前端学习笔记-vue2-vue中的Ajax

Vue中的Ajax

配置代理-解决跨域问题

1.在vue.config.js中进行配置

devServer:{proxy:'跨域服务器地址'}

1. 优点：配置简单，请求资源时直接发送给前端
2. 缺点：不能配置多个代理，不能灵活控制请求是否走代理，配置请求内容不能与public内容冲突，否则不会触发代理，转发请求

2.在vue.config.js中进行配置

devServer:{
   proxy:{
   '/api':{//匹配以'/api'开头的请求路径
      target:'\<url>',//代理目标的基础路径
      pathRewrite:{'^/api'},//去掉前缀
      ws:true,//支持websocket
      changeOrigin:true},//为true，服务器收到的请求头则是以代理目标的请求地址，否则就算请求的原始地址
   '/foo':{
      target:'<other_url>',
      ...
   }
}}

1. 优点：可以配置多个代理，且可以灵活控制是否走代理
2. 缺点：配置略微繁琐，请求资源时必须加前缀

vue常用的Ajax库

1. axios（官方推荐）
2. vue-resouce（vue1.0常用库，后期不再维护）

slot插槽

作用 ：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件=》子组件

分类

1.默认插槽

<!-- 父组件中 -->
<组件>
  <div>结构</div>
</组件>
<!-- 子组件中 -->
<template>
  <div>
    <!-- 定义插槽 -->
    <slot>插槽默认内容</slot>
  </div>
</template>

2.具名插槽

<!-- 父组件中 -->
<组件>
  <template slot="名字1">
    <div>结构1</div>
  </template>
  <template v-slot:名字2>
    <div>结构2</div>
  </template>
</组件>
<!-- 子组件中 -->
<template>
  <div>
    <!-- 定义插槽 -->
    <slot name="名字1">插槽默认内容</slot>
    <slot name="名字2">插槽默认内容</slot>
  </div>
</template>

3.作用域插槽

数组在组件的自身，但根据数据生成的结构需要组件的使用者来决定
作用域插槽也能命名

<!-- 父组件中 -->
<组件>
  <template scope="插槽名">
    <ul>
      <li v-for="g in 插槽名.具体数据">{{g}}</li>
    </ul>
  </template>
</组件>

<组件>
  <template slot-scope="插槽名">
    <ul>
      <li v-for="g in 插槽名.具体数据">{{g}}</li>
    </ul>
  </template>
</组件>

<组件>
  <template slot-scope="{{具体数据}}}">
    <ul>
      <li v-for="g in 具体数据">{{g}}</li>
    </ul>
  </template>
</组件>
<!-- 子组件中 -->
<template>
  <div>
     <slot :data="data">插槽默认内容</slot>
  </div>
  <script>
  export default{
     data(){
        return data:[...]
     }
  }
  </script>
</template>

更多前端学习笔记