小米官方网站开发版在哪里,柳州网站建设公,免费弄空间的网站,湖北省住房和城乡建设部门户网站目录 Vue中的ajaxvue脚手架配置代理方法一方法二 插槽 hello, 这篇文章是Vue2学习笔记的第四篇#xff0c;也是第四章#xff1a;Vue中的ajax。 Vue中的ajax
vue脚手架配置代理
方法一
在vue.config.js中添加如下配置#xff1a;
devServer:{proxy:http://localho… 目录 Vue中的ajaxvue脚手架配置代理方法一方法二 插槽 hello, 这篇文章是Vue2学习笔记的第四篇也是第四章Vue中的ajax。 Vue中的ajax
vue脚手架配置代理
方法一
在vue.config.js中添加如下配置
devServer:{proxy:http://localhost:5000
}说明
1 优点配置简单请求资源时直接发给前端8080即可。 2.缺点不能配置多个代理不能灵活的控制请求是否走代理。 3.工作方式若按照上述配置代理当请求了前端不存在的资源时那么该请求会转发给服务器 优先匹配前端资源
templatedivbutton clickgetStudents获取学生信息/buttonbutton clickgetCars获取汽车信息/button/div
/templatescriptimport axios from axiosexport default {name:App,methods: {getStudents(){axios.get(http://localhost:8080/students).then(response {console.log(请求成功了,response.data)},error {console.log(请求失败了,error.message)})},//加了开头getCars(){axios.get(http://localhost:8080/demo/cars).then(response {console.log(请求成功了,response.data)},error {console.log(请求失败了,error.message)})}},}
/script
方法二
编写vue.config.js配置具体代理规则
module.exports {devServer: {proxy: {/api1: {// 匹配所有以 /api1开头的请求路径target: http://localhost:5000,// 代理目标的基础路径changeOrigin: true,pathRewrite: {^/api1: }},/api2: {// 匹配所有以 /api2开头的请求路径target: http://localhost:5001,// 代理目标的基础路径changeOrigin: true,pathRewrite: {^/api2: }}}}
}
/*changeOrigin设置为true时服务器收到的请求头中的host为localhost:5000changeOrigin设置为false时服务器收到的请求头中的host为localhost:8080changeOrigin默认值为true
*/说明
1.优点可以配置多个代理且可以灵活的控制请求是否走代理。 2. 缺点配置略微繁琐请求资源时必须加前缀。
插槽
1 作用让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于 strong stylecolor:red父组件 子组件/strong 。
2.分类默认插槽、具名插槽、作用域插槽
3.使用方式 默认插槽 父组件中Categorydivhtml结构1/div/Category
子组件中templatediv!-- 定义插槽 --slot插槽默认内容.../slot/div/template具名插槽 父组件中Categorytemplate slotcenterdivhtml结构1/div/templatetemplate v-slot:footerdivhtml结构2/div/template/Category
子组件中templatediv!-- 定义插槽 --slot namecenter插槽默认内容.../slotslot namefooter插槽默认内容.../slot/div/template作用域插槽 理解数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。games数据在Category组件中但使用数据所遍历出来的结构由App组件决定 具体编码 父组件中Categorytemplate scopescopeData!-- 生成的是ul列表 --ulli v-forg in scopeData.games :keyg{{g}}/li/ul/template/CategoryCategorytemplate slot-scopescopeData!-- 生成的是h4标题 --h4 v-forg in scopeData.games :keyg{{g}}/h4/template/Category
子组件中templatedivslot :gamesgames/slot/div/templatescriptexport default {name:Category,props:[title],//数据在子组件自身data() {return {games:[红色警戒,穿越火线,劲舞团,超级玛丽]}},}/script(注意以上的部分的.vue文件由于没有对应的.vue代码模板代码由于无法高亮所以选择了html格式
