南京建设银行网站首页,wordpress 繁体转简,网站引导页一般是什么格式,北京新冠最新情况最新消息4 Vue中的ajax
4.1 解决开发环境Ajax跨域问题
vue脚手架配置代理
配置参考 | Vue CLI方法一#xff1a;在vue.config.js中添加如下配置:
module.exports {devServer: {proxy: http://localhost:4000}
}
说明: 1.优点:配置简单#xff0c;请求资源时直接发给前端(8080)即…4 Vue中的ajax
4.1 解决开发环境Ajax跨域问题
vue脚手架配置代理
配置参考 | Vue CLI方法一在vue.config.js中添加如下配置:
module.exports {devServer: {proxy: http://localhost:4000}
}
说明: 1.优点:配置简单请求资源时直接发给前端(8080)即可。 2.缺点:不能配置多个代理不能灵活的控制请求是否走代理。 3.工作方式:若按照上述配置代理当请求了前端不存在的资源时那么该请求会转发给服务器(优先匹配前端资源)
方法二编写vue.config.js配置具体代理规则:
module.exports {devServer:{prqxy:/api1:{// 匹配所有以/api1开头的请求路径target:http://localhost:5000//代理目标的基础路径changeOrigin:true,pathRewrite:{^/api1:・}},/api2:{// 匹配所有以/api2开头的请求路径target:http://localhost:5001,//代理目标的基础路径changeOrigin:true,pathRewrite:{^/api2:}}}}
}
/* change0rigin设置为true时服务器收到的请求头中的host为:1ocalhost:5000-撒谎change0rigin设置为false时服务器收到的请求头中的host为:1ocalhost:8080-诚实change0rigin默认值为true
*/
4.2 github用户搜索案例-axios 新建项目文件夹 components文件
MySearch.vue:
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search v-modelkeyword/button clicksearchUsersSearch/button/div/section
/templatescriptimport axios from axiosexport default {name:MySearch,data(){return{keyword:}},methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit(updateListObj,{isFirst:false,isloading:true,errMsg:,users:[]})axios.get(https://api.github.com/search/users?q${this.keyword}).then(response{/* 请求成功了后更新List数据 */this.$bus.$emit(updateListObj,{isloading:false,errMsg:,users:response.data.items})},error{/* 请求失败了后更新List数据 */this.$bus.$emit(updateListObj,{isloading:false,errMsg:error.message,users:[]})})}}
}
/script
MyList.vue:
templatediv classrow!-- 展示用户列表 --div v-showinfo.sers.length classcard v-foruser in info.users :keyuser.login a :hrefuser.html_url target_blankimg :srcuser.avatar_url stylewidth: 100px//ap classcard-text{{user.login}}/p/div!-- 展示欢迎词 --h1 v-showinfo.isFirst欢迎使用/h1!-- 展示加载中 --h1 v-showinfo.isloadingLoading....../h1!-- 展示错误信息 --h1 v-showinfo.errMsg{{info.errMsg}}/h1/div
/templatescriptexport default {name:MyList,data(){return{info:{isFirst:true,isloading:false,errMsg:,users:[]}}},mounted(){this.$bus.$on(updateListData,(dataObj){console.log(dataObj)//this.users usersthis.info {...this.info,...dataObj}})},
}
/scriptstyle scoped.album{min-height: 50rem;padding-top: 3rem;padding-bottom: 3rem;background: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
/style
App.vue
templatediv classcontainerMySearch/MyList//div/templatescript
import MySearch from ./components/MySearch
import MyList from./components/MyListexport default {name:App,components:{MySearch,MyList}
}
/scriptstyle/stylemain.js
/* 该文件是整个项目的入口文件 */
//引入vue
import Vue from vue
//引入App组件它是所有组件的父组件
import App from ./App.vue
//关闭vue的生产提示
Vue.config.productionTip false
//创建vue实例对象-vm
new Vue({render: h h(App),beforeCreate(){Vue.prototype.$bus this}
}).$mount(#app)引入第三方文件
/*!* Bootstrap v3.3.5 (http://getbootstrap.com)* Copyright 2011-2015 Twitter, Inc.* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 案例效果 4.3 vue-resource-已不再维护
下载
npm i vue-resource
main.js引用
//引入插件
import vueResource from vue-resource
MySearch.vue更改
template
......
/templatescriptexport default {......methods:{searchUsers(){/* 请求前更新List的数据 */this.$bus.$emit(updateListObj,{isFirst:false,isloading:true,errMsg:,users:[]})//更改此处前缀即可this.$http.get(https://api.github.com/search/users?q${this.keyword}).then(。。。。。。)}}
}
/script
4.4 插槽
1.作用:让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于父组件 子组件 2.分类:默认插槽、具名插槽、作用域插槽
案例演示 4.4.1 默认插槽
模板
父组件中:Categorydivhtml结构1/div/Category
子组件中:
templatediv!--定义插槽 --slot插槽默认内容.../slot/div
/template
MyCategory.vue
templatediv classcategory h3{{title}}分类/h3ulslot我是一些默认值当使用者没有传递具体结构时我会出现/slot/ul/div
/templatescriptexport default {name:MyCategory,props:[title]}
/scriptstyle 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
templatediv classcontainerMyCategory title美食img srchttps://www.bing.com/images/search?viewdetailV2ccidEyva9J6Hid58A35885A9ABF4B4008D3D18096A4122F9029A3BthidOIP.Eyva9J6Hqfa0-gY_T5UH2QHaE8mediaurlhttps%3A%2F%2Fth.bing.com%2Fth%2Fid%2FR.132bdaf49e87a9f6b4fa063f4f9507d9%3Frik%3DO5oC%252bSJBagkYPQ%26riu%3Dhttp%253a%252f%252fseopic.699pic.com%252fphoto%252f50042%252f9686.jpg_wh1200.jpg%26ehk%3DCVgCwwuyvk3yAH1jdMUEzZ5EZTtv2EJohlzI%252fGFGqHg%253d%26risl%3D%26pid%3DImgRaw%26r%3D0exph800expw1200q%E8%8D%89%E8%8E%93%E8%9B%8B%E7%B3%95simid608008331698973000FORMIRPRSTckB54535D1D089E109A832BFC96E23CCD8selectedIndex4itb0cw1375ch664ajaxhist0ajaxserp0 alt/MyCategoryMyCategory title游戏ulli v-for(g,index) in games :keyindex{{g}}/li/ul/MyCategoryMyCategory title电影video controls srchttps://www.bilibili.com/video/BV1TezjYAEDV/?spm_id_from333.1387.homepage.video_card.clickvd_source56a27fe8aee59c56c0c0bfabcae02918/video/MyCategory/div/templatescript
import MyCategory from ./components/MyCategoryexport default {name:App,components:{MyCategory},data(){return{foods:[火锅,烧烤,小龙虾,牛排],games:[红色禁戒,穿越火线,劲舞团,超级玛丽],films:[教父,拆弹专家,你好李焕英,流浪地球]}}
}
/scriptstyle scoped.container{display: flex;justify-content: space-around;}
/style4.4.2 具名插槽
模板
父组件中:
Categorytemplate slotcenterdivhtml结构1/div/templatetemplate v-slot:footerdivhtml结构2/div/template
/Category
子组件中:
templatediv!-- 定义插槽--slot namecenter插槽默认内容.../slotslot namefooter插槽默认内容.../slot/div
/template 4.4.3 作用域插槽
1.理解:数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中但使用数据所遍历出来的结构由App组件决定)
模板
父组件中:Categorytemplate scopescopeData!--生成的是u1列表 --u1li 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
