Vue中的ajax

4.1 脚手架配置代理

方式一：

在vue.config.js中添加如下配置：

devServer: {
    proxy: 'http://localhost:8080'
}

说明：

1. 优点：配置简单，请求资源时直接发给前端(8080)即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方式二：

在vue.config.js中添加如下配置：

devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        pathRewrite:{'^/api': ''},
        // ws: true, // 用于支持websocket
        // changeOrigin: true // 用于控制请求头中的host值
        // 设置为true 时，服务器收到的请求头中的host为：localhost:8000
        // 设置为false 时，服务器收到的请求头中的host为：localhost:8000
        // 默认值为true
      },
      // '/foo': {
      //   target: '<other_url>'
      // }
    }
}

优点：可以配置多个代理，且可以灵活控制请求是否走代理

缺点：配置略微繁琐，请求资源时必须加前缀

request() {
    axios.get('http://localhost:8080/test.txt').then(
        response => {
            console.log('请求成功', response.data);
        },
        error => {
            console.log('请求失败', error.message);
        }
    )
}

4.2 github搜索案例

4.3 vue-resource

和 axios 用法一样，只不过在开始需要 Vue.use(vueResource)

4.4 插槽

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

2. 分类：默认插槽，具名插槽，作用域插槽

3. 使用方式：

   1. 默认插槽：

      父组件中：
      <Category>
          <div>
              html结构1
          </div>
      </Category>
      
      子组件中：
      <template>
          <div>
              <slot>插槽默认内容</slot>
          </div>
      </template>
      

   2. 具名插槽

      父组件中：
      <Category>
          <template slot="center">
              <div>
                  html结构1
              </div>
          </template>
          
          <template v-slot:"footer">
              <div>
                  html结构2
              </div>
          </template>
      </Category>
      
      子组件中：
      <template>
          <div>
              <slot name="center">插槽默认内容</slot>
              <slot name="footer">插槽默认内容</slot>
          </div>
      </template>
      

   3. 作用域插槽：

      1. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

      2. 具体编码：

         父组件中：
         <Category>
             <template scope="scopeData">
                 <ul>
                     <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                 </ul>
             </template>
         </Category>
         
         子组件中：
         <template>
             <div>
                 <slot :games="games"></slot>
             </div>
         </template>
         
         <script>
             export default {
                 name: 'Category',
                 props: ['title'],
                 // 数据在子组件身上
                 data(){
         			return {
                         games: ['....', 'fsfds', 'fsdfs']
                     }
                 }
             }
         </script>