苏州论坛建站模板,淮安做网站.哪家网络公司好,生鲜网站开发背景,app定制开发收费一、脚手架配置代理
老师讲的主要有两种方法#xff1a; 但是我的没有proxy#xff0c;只有proxyTable,之前一直不成功#xff0c;现在我是这样配置的#xff1a;
config文件夹下的index.js: App.vue: 然后就成功了#xff1a;#xff08;我真服了#xff0c;之前在这…一、脚手架配置代理
老师讲的主要有两种方法 但是我的没有proxy只有proxyTable,之前一直不成功现在我是这样配置的
config文件夹下的index.js: App.vue: 然后就成功了我真服了之前在这里卡了两天现在莫名其妙就好了 二、github案例
从https://api.github.com/search/users?qxxx请求数据过来然后点击搜索按钮可以显示所有github用户咋做呢 1、首先拆分html和css这块儿直接用现成的需要注意的是bootstrap样式需要在public下新建css文件夹粘贴bootstrap.css然后去index.html引入直接import会有问题不知道为什么我的bootstrap无效没作用 2、使用全局事件总线把请求的数据给List并使用v-for展示到页面 3、这里如果再完善一点一上来显示欢迎词发请求前显示loading请求发送完若成功显示数据失败则显示失败信息。这样的话在传数据时就要在不同的事件节点去触发全局事件并且传不同的值比较好的做法是数据配置到对象里传值也传一个对象这样写起来比较方便。各个文件如下
index.html
!DOCTYPE html
htmlheadmeta charsetutf-8meta nameviewport contentwidthdevice-width,initial-scale1.0!-- 引入bootstrap但是不知道为什么我的无效 --link relstylesheet href./css/bootstrap.csstitletesttwo/title/headbodydiv idapp/div!-- built files will be auto injected --/body
/htmlApp.vue
templatediv classcontainerSearch/SearchList/List/div
/templatescript
import Search from ./components/Search.vue
import List from ./components/List.vue
export default {name:App,components:{Search,List}
}
/script
Search.vue
templatesection classjumbotronh3 classjumbotron-headingSearch Github Users/h3divinput typetext placeholderenter the name you search v-modelkeyWord/nbsp;button clicksearchUsersSearch/button/div/section
/templatescript
import axios from axios;
export default {name: Search,data(){return{keyWord:}},methods:{searchUsers(){// 请求前更新List的数据this.$bus.$emit(updataListData,{isFirst:false,isLoading:true,errMsg:,users:[]})axios.get(https://api.github.com/search/users?q${this.keyWord}).then(response {// 请求成功更新List的数据console.log(请求成功了);this.$bus.$emit(updataListData, { isLoading: false, errMsg: , users: response.data.items })},error {// 请求失败更新List的数据// console.log(请求失败了,error.message);this.$bus.$emit(updataListData, { isLoading: false, errMsg:error.message, users:[]})})}}
}
/scriptstyle
/style
List.vue
templatediv classrow!-- 展示用户列表 --div v-showinfo.users.length classcard v-foruser in info.users :keyuser.logina :hrefuser.html_url target_blankimg :srcuser.avatar_url stylewidth: 100px//ap classcard-text{{ user.login }}/p!--展示欢迎词--h1 v-showinfo.isFirst欢迎使用/h1!--展示加载中--h1 v-showinfo.isLoading加载中..../h1!--展示错误信息--h1 v-showinfo.errMsg{{ errMsg }}/h1/div
/div
/templatescript
export default {name:List,data(){return{info:{isFirst: true,isLoading: false,errMsg: ,users: []}}},mounted() {this.$bus.$on(updateListData, (dataObj) {// es6语法就是把info的四个都放在这里然后dataobj的改变的在替换info有的this.info {...this.info,...dataObj}console.log(this);})},
}
/scriptstyle scoped.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #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
三、vue-resource了解
在vue1.0时这个用的比较多但是现在用axios比较多了这个了解下就行其实这玩意儿和axios很像就把axios.get换成this.$http.get其他的都一样 安装vue-resource npm i vue-resource 引入插件import vueResource from vue-resource 使用插件Vue.use(vueResource)
案例
this.$http.get(http://localhost:8081/api2/cars).then(response {console.log(请求成功了,response.data)},error {console.log(请求失败了,error.message)}四、插槽
1、作用让父组件可以向子组件指定位置插入html结构也是一种组件间通信的方式适用于 父组件 子组件 。
2、分类默认插槽、具名插槽、作用域插槽
1、默认插槽
比如有那么一天我们要在页面显示三个类别每个类别下面有不同的文字本来是我们把数据传给子组件然后使用v-for遍历生成的文字信息但是产品经理突然让你把美食类的下面换成图片电影类下面换成视频怎么搞
有个非常好用的方法就是插槽也就是使用slot标签在子组件挖个坑然后在父组件的vc标签里面写东西往里边填 子组件Category
templatediv classCategoryh3{{title}}分类/h3slot我是一个默认值当没有传具体结构时我会出现/slot/div
/templatescript
export default {name:Category,props:[title,listData]
}
/scriptstyle.Category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}
/style App.vue
templatediv classcontainerCategory title美食 :listDatafoodsimg srchttps://s3.ax1x.com/2021/01/16/srJlq0.jpg alt/CategoryCategory title游戏ulli v-for(g, index) in games :keyindex{{ g }}/li/ul/CategoryCategory title电影video controls srchttp://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4/video/Category/div
/templatescript
import Category from ./components/category.vue
export default {name:App,components:{Category},data(){return {foods: [火锅,烧烤,小龙虾,牛排],games:[红色警戒,穿越火线,劲舞团,超级玛丽],films:[《教父》,《拆弹专家》,《你好李焕英》,《尚硅谷》]}}
}
/script
style scoped.container{display: flex;justify-content: space-around;}video{width: 100%;}img{width: 100%;}
/style
2、具名插槽
子组件 slot namecenter我是一个默认值当没有传具体结构时我会出现1/slotslot namefooter我是一个默认值当没有传具体结构时我会出现2/slot父组件
templatediv classcontainerCategory title美食 :listDatafoodsimg slotcenter srchttps://s3.ax1x.com/2021/01/16/srJlq0.jpg alta slotfooter href#美食/a/CategoryCategory title游戏ul slotcenterli v-for(g, index) in games :keyindex{{ g }}/li/uldiv classfoot slotfootera href#单机游戏/aa href#单机游戏/a/div/CategoryCategory title电影video slotcenter controls srchttp://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4/videotemplate v-slot:footer!-- 只有template才能这样写 --div classfoota href#经典/aa href#2024/aa href#热们/a/divh4欢迎观影/h4/template/Category/div
/template 3、作用域插槽
如果数据不在App中了而在Category.vue中然后App.vue要用到数据这时我们就可以在Category.vue中使用slot标签给父组件App传值写法很像当时父给子传值的props写法在标签里搞个:gamesgames然后用到插槽的地方必须使用template标签包裹并且配置scope属性来接收数据接过来的是一个对象
其实这个功能使用默认插槽完全可以实现但是默认插槽是指数据在使用插槽的文件里的那么如果数据在别的地方比如本案例的Category.vue文件就得用作用域插槽
数据在Category.vue
templatediv classCategoryh3{{title}}分类/h3slot :gamesgames我是一个默认值当没有传具体结构时我会出现/slot/div
/templatescript
export default {name:Category,props:[title],data() {return {games: [红色警戒, 穿越火线, 劲舞团, 超级玛丽]}}
}
/script App.vue
templatediv classcontainerCategory title游戏template scopecgp!-- {{ cgp.games }} --ulli v-for(g, index) in cgp.games :keyindex{{ g }}/li/ul/template/CategoryCategory title游戏template scope{games}!-- es6语法 --olli v-for(g, index) in games :keyindex{{ g }}/li/ol/template/CategoryCategory title游戏template slot-scope{games}h4 v-for(g, index) in games :keyindex{{ g }}/h4/template/Category/div
/template 总结
