北京网站建设laitangwordpress 503

当前位置： 首页 > news >正文

北京网站建设laitang,wordpress 503,域名批量查询系统,3小时网站建设平台Vue基础18github案例静态页面第三方样式引入#xff08;以bootstrap举例#xff09;App.vueSearch.vueList.vue列表展示接口地址使用全局事件总线进行兄弟间组件通信Search.vueList.vue完善案例List.vueSearch.vue补充知识点#xff1a;{…this.info,…this.dataObj}效果呈… Vue基础18github案例静态页面第三方样式引入以bootstrap举例App.vueSearch.vueList.vue列表展示接口地址使用全局事件总线进行兄弟间组件通信Search.vueList.vue完善案例List.vueSearch.vue补充知识点{…this.info,…this.dataObj}效果呈现vue-resource安装引用main.js使用Search.vuegithub案例 静态页面 第三方样式引入以bootstrap举例 public中创建文件夹css,将样式放入 在index.html中使用link引入
!– 引入第三方样式 –link relstylesheet href% BASE_URL %css/bootstrap.cssApp.vue templatediv classbgSearch/List//div /templatescript import Search from /components/Search; import List from /components/List; export default {name: App,components: {Search, List},methods:{} } /scriptstyle langless/style Search.vue templatediv classjumbotron bgh1Search Github Users/h1pinput typetext placeholder输入你想要搜索的用户名a classbtn btn-default btn-lg href# rolebuttonSearch/a/p/div /templatescriptexport default {name: Search} /scriptstyle scoped langless .bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;} } /style List.vue template div classbgdiv classpredict v-showisShowwelcome to use/divdiv classpro-listdiv classpro-item v-foritem in contentimg src/assets/logo.png altdiv classtext122555/div/div/div /div /templatescriptexport default {name: List,data(){return{isShow:false,content:[,,,,,,,,,]}}} /scriptstyle scoped langless .bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px 120px;.text{text-align: center;}}}} /style 列表展示 接口地址 https://api.github.com/search/users?qxxx 用到的响应值 avatar_url头像链接html_url用户详情页login用户名 使用全局事件总线进行兄弟间组件通信 Search.vue templatediv classjumbotron bgh1Search Github Users/h1pinput typetext placeholder输入你想要搜索的用户名 v-modelkeywordsa classbtn btn-default btn-lg href# rolebutton clicksearchUsersSearch/a/p/div /templatescript import axios from axios;export default {name: Search,data(){return{keywords:,}},methods:{searchUsers(){if(this.keywords.trim()) return alert(用户输入的内容不得为空)axios.get(https://api.github.com/search/users?qthis.keywords).then(response{// console.log(response.data.items)console.log(请求成功了)this.\(bus.\)emit(getUsersList,response.data.items)},error{console.log(error.msg)})}}} /scriptstyle scoped langless .bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;} } /style List.vue template div classbgdiv classpredict v-show!users.lengthwelcome to use/divdiv classpro-listdiv classpro-item v-foruser in users :keyuser.logina :hrefuser.html_url classaitemimg :srcuser.avatar_url alt/adiv classtext{{ user.login }}/div/div/div /div /templatescriptexport default {name: List,data(){return{isShow:false,users:[],}},mounted() {this.\(bus.\)on(getUsersList,(users){this.usersusers})}} /scriptstyle scoped langless .bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px 120px;.aitem{display: inline-block;width: 200px;height: 200px;}img{width: 200px;height: 200px;}.text{text-align: center;}}}} /style 完善案例 List.vue template div classbgh1 classpredict v-showinfo.isFirst欢迎使用/h1h1 v-showinfo.isLoading加载中…/h1h1 v-showinfo.emsg错误信息{{info.emsg}}/h1div classpro-listdiv classpro-item v-foruser in info.users :keyuser.logina :hrefuser.html_url classaitemimg :srcuser.avatar_url alt/adiv classtext{{ user.login }}/div/div/div /div /templatescriptexport default {name: List,data(){return{isShow:false,users:[],info:{isFirst:true,isLoading:false,emsg:,users:[]}}},mounted() {this.\(bus.\)on(updateListData,(dataObj){this.info{…this.info,…dataObj}})}} /scriptstyle scoped langless .bg{margin: 0 20px;font-size: 24px;.pro-list{display: flex;flex-wrap: wrap;.pro-item{margin: 50px 120px;.aitem{display: inline-block;width: 200px;height: 200px;}img{width: 200px;height: 200px;}.text{text-align: center;}}}} /style Search.vue templatediv classjumbotron bgh1Search Github Users/h1pinput typetext placeholder输入你想要搜索的用户名 v-modelkeywordsa classbtn btn-default btn-lg href# rolebutton clicksearchUsersSearch/a/p/div /templatescript import axios from axios;export default {name: Search,data(){return{keywords:,}},methods:{searchUsers(){if(this.keywords.trim()) return alert(用户输入的内容不得为空)else{this.\(bus.\)emit(updateListData,{isFirst:false,isLoading:true,emsg:,users:[]})axios.get(https://api.github.com/search/users?q${this.keywords}).then(response{// console.log(response.data.items)console.log(请求成功了)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:,users:response.data.items})},error{console.log(error.msg)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:error.message,users:[]})})}}}} /scriptstyle scoped langless .bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;} } /style 补充知识点{…this.info,…this.dataObj} {…this.info,…this.dataObj}通过字面量的形式合并一下对象 以this.dataObj为主依次替换this.info中的属性的值但是this.dataObj中没有的数据还是沿用this.info中的 效果呈现 vue-resource 发送Ajax的5种方式 1.xhr 2.jQuery 3.axios 4.fetch 5.vue-resource(插件库对xhr的封装 安装 npm i vue-resource 引用 main.js import Vue from vueimport App from ./App //引入vue-resource插件 import vueresource from vue-resourceVue.config.productionTip false //使用vue-resource插件 Vue.use(vueresource)new Vue({el: #app,render: h h(App),beforeCreate() {Vue.prototype.\(bus this} }) 使用 与axios一致只需要将axios替换成this.\)http就行 this.\(http.get(https://api.github.com/search/users?q\){this.keywords}).then(response{// console.log(response.data.items)console.log(请求成功了)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:,users:response.data.items})},error{console.log(error.msg)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:error.message,users:[]})})Search.vue templatediv classjumbotron bgh1Search Github Users/h1pinput typetext placeholder输入你想要搜索的用户名 v-modelkeywordsa classbtn btn-default btn-lg href# rolebutton clicksearchUsersSearch/a/p/div /templatescript import axios from axios;export default {name: Search,data(){return{keywords:,}},methods:{searchUsers(){if(this.keywordsthis.keywords.trim()) return alert(用户输入的内容不得为空)else{this.\(bus.\)emit(updateListData,{isFirst:false,isLoading:true,emsg:,users:[]})this.\(http.get(https://api.github.com/search/users?q\){this.keywords}).then(response{// console.log(response.data.items)console.log(请求成功了)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:,users:response.data.items})},error{console.log(error.msg)this.\(bus.\)emit(updateListData,{isLoading:false,emsg:error.message,users:[]})})}}}} /scriptstyle scoped langless .bg{height: 250px;margin: 0 20px;padding-left: 50px;padding-top: 50px;.title{font-size: 20px;}input{margin-right: 10px;} } /style