Vue学习笔记（六）

Zzz小白飞

已于 2022-07-31 11:54:28 修改

阅读量515

点赞数

分类专栏： # Vue 文章标签： vue.js 学习前端 java

于 2022-07-28 23:15:24 首次发布

本文链接：https://blog.csdn.net/qq_45075124/article/details/126045063

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

点击跳转：Vue学习（一）

点击跳转：Vue学习（二）

点击跳转：Vue学习（三）

点击跳转：Vue学习（四）

点击跳转：Vue学习（五）

点击跳转：Vue学习（七）

点击跳转：Vue学习（八）

文章预览：

5、Vue中的ajax

5.1 vue脚手架配置代理

解决开发环境Ajax跨域问题

Vue CLI文档

方法一

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

devServer:{
  proxy:"http://localhost:5000"
  //配置代理服务器，这个路径端口号要与传送数据的服务器端口号一致
}

说明：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理。不能灵活的控制请求是否走代理，这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:5000。
工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器，自身带有同名资源，则优先使用自身资源（优先匹配前端资源）。

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径，路径到5000就不往后写了
        changeOrigin: true,
        pathRewrite: {'^/api1': ''} //重写路径
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''} //重写路径
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

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

module.exports = {
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',

        },
    },
    lintOnSave: false, //关闭语法检查
    //开启代理服务器（方式一）
    // devServer: {
    //     proxy: 'http://localhost:5000'
    // },
    //开启代理服务器（方式二）
    devServer: {
        proxy: {
            // /atguigu ，/demo 叫前缀
            '/atguigu': {
                target: 'http://localhost:5000',
                // 路径到5000就不往后写了
                pathRewrite: { '^/atguigu': '' },
                // 取消发送请求的前缀名
                // ws: true, //用于支持websocket，不写默认为true
                // changeOrigin: true //用于控制请求头中的host值，不写默认为true
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite: { '^/demo': '' },
                // ws: true, //用于支持websocket
                // changeOrigin: true //用于控制请求头中的host值
            }
        }
    }
}

App.vue

<template>
  <div>
    <button @click="getStudents">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
import axios from "axios";
// 引入axios，需要先下载，npm i axios

export default {
  name: "App",
  methods: {
    //   方式一：axios url就是请求地址http://localhost:8080/students
   getStudents() {
      axios.get("http://localhost:8080/students").then(
        // 将端口号改为默认的端口号
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  // 方式二：axios url请求在端口号之后加上前缀名
    getStudents() {
      axios.get("http://localhost:8080/atguigu/students").then(
        // 将端口号改为默认的端口号
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
    // 方式二：axios url请求在端口号之后加上前缀名
    getCars() {
      axios.get("http://localhost:8080/demo/cars").then(
        (response) => {
          console.log("请求成功了", response.data);
        },
        (error) => {
          console.log("请求失败了", error.message);
        }
      );
    },
  },
};
</script>

5.2、AJAX案例实操

Github搜索案例

在这里插入图片描述

5.3、vue-resource（发送AJAX的插件库）

在这里插入图片描述

Github搜索案例

在这里插入图片描述

1.先安装插件库
npm i vue-resource
2.在main.js中引入插件库
//引入插件
import vueResource from 'vue-resource'
3.在main.js中使用插件
//使用插件
Vue.use(vueResource)
4.使用方法与axios一致，只是吧axios.get()替换成this.$http.get()

、

5.4、插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时,就需要使用slot技术，注意：插槽内容是在父组件中编译后,再传递给子组件的。

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
分类：默认插槽、具名插槽、作用域插槽

使用方式：

默认插槽：

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

具名插槽：

父组件中：
        <Category>
         <!-- 两种写法指定名称，新版本已废弃-->
            <div slot="center">
<!-- 放入指定名字的插槽中-->
              <div>html结构1</div>
            </div>
<!-- 两种写法指定名称，但 v-slot:footer只能用在template标签中:用这个-->
            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽：

理解：数据在组件的自身（在slot插槽定义的那个组件里面），但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

具体编码：

父组件中：
   <Category>
   //必须包裹template标签，scope属性标签必带，收到数据，但" "内名字随意起
   //scopeData是一个对象，里面包含着 <slot></slot>插槽传递过来的数据
   //因为可能传递多个数据 <slot :games="games" :a="a></slot>
   //新版本已弃用
           <template scope="scopeData">
                   <!-- 生成的是ul列表 -->
                   <ul>
                        <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                   </ul>
           </template>
   </Category>

   <Category>
          //新版本Vue推荐使用 v-slot
           <template v-slot="scopeData">
                   <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
           </template>
   </Category>
子组件中：
<template>
    <div>
        <slot :games="games"></slot>
        //通过插槽将数据从子组件传递给父组件
    </div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>

备注：作用域插槽也可以取名字

子：
<slot name="center" :games="games">插槽默认内容...</slot>
父：
<template v-slot:center="scopeData">
    <!-- 生成的是h4标题 --> 
    <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4> 
</template>

5.4.1 不使用插槽

在这里插入图片描述

Category

<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <ul>
      <li v-for="(item, index) in listData" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title", "listData"],
};
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h3 {
  text-align: center;
  background-color: orange;
}
video {
  width: 100%;
}
img {
  width: 100%;
}
</style>

App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods"></Category>
    <Category title="游戏" :listData="games"></Category>
    <Category title="电影" :listData="films"></Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《与神同行》"],
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

5.4.2 默认插槽

在这里插入图片描述

App.vue

<template>
	<div class="container">
		<Category title="美食" >
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>

		<Category title="游戏" >
			<ul>
			     <li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>

		<Category title="电影">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
		data() {
			return {
                            foods:['火锅','烧烤','小龙虾','牛排'],
                            games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                            films:['《教父》','《拆弹专家》','《你好，李焕英》','《与神同行》']
			}
		},
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}
</style>

Category

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

5.4.3 具名插槽

在这里插入图片描述

Category

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
		<slot name="center">定义一个名为center的插槽</slot>
		<slot name="footer">定义一个名为footer的插槽</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title']
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

App.vue

<template>
  <div class="container">
    <Category title="美食">
    //放入center插槽中
      <img
        slot="center"
        src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
        alt=""
      />
      //放入footer插槽中
      <a slot="footer" href="http://www.atguigu.com">更多美食</a>
    </Category>

    <Category title="游戏">
      <ul slot="center">
        <li v-for="(g, index) in games" :key="index">{{ g }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="http://www.atguigu.com">单机游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>

    <Category title="电影">
      <video
        slot="center"
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
        <!-- 两种写法，但 v-slot:footer只能用在template标签中，footer不带""-->
      <template v-slot:footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">热门</a>
          <a href="http://www.atguigu.com">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category";
export default {
  name: "App",
  components: { Category },
  data() {
    return {
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《与神同行》"],
    };
  },
};
</script>
<style scoped>
.container,
.foot {
  display: flex;
  justify-content: space-around;
}
h4 {
  text-align: center;
}
</style>

5.4.4 作用域插槽

App.vue

<template>
	<div class="container">

		<Category title="游戏">
                //v-slot="atguigu",引号内名字随便起，是一个对象，真正的数据在这个对象中
			<template v-slot="atguigu">
				<ul>
					<li v-for="(g,index) in atguigu.games" :key="index">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category title="游戏">
                //解构
			<template v-slot="{games}">
				<ol>
					<li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li>
				</ol>
			</template>
		</Category>

		<Category title="游戏">
			<template v-slot="{games}">
				<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
			</template>
		</Category>

	</div>
</template>

<script>
	import Category from './components/Category'
	export default {
		name:'App',
		components:{Category},
	}
</script>

<style scoped>
	.container,.foot{
		display: flex;
		justify-content: space-around;
	}
	h4{
		text-align: center;
	}
</style>

Category

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
	export default {
		name:'Category',
		props:['title'],
		data() {
			return {
				games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
			}
		},
	}
</script>

<style scoped>
	.category{
		background-color: skyblue;
		width: 200px;
		height: 300px;
	}
	h3{
		text-align: center;
		background-color: orange;
	}
	video{
		width: 100%;
	}
	img{
		width: 100%;
	}
</style>

Zzz小白飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记（六）

理解数据在组件的自身（在slot插槽定义的那个组件里面），但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）父组件向子组件传递带数据的标签，当一个组件有不确定的结构时,就需要使用slot技术，注意插槽内容是在父组件中编译后,再传递给子组件的。作用让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于。分类默认插槽、具名插槽、作用域插槽。............
复制链接

扫一扫