不管何時何地，永遠保持熱愛，永遠積極向上?。?！
【20.尚硅谷GitHub搜索案例_vue-resource實現(xiàn)】
1.vue-resource
- vue-resource 是 vue 中一個用于發(fā)送請求的插件。
- vue 發(fā)送請求推薦使用 axios ，vue-resource 的更新頻率不高，且 vue 也推薦 axios。
1.1 安裝插件vue-resource
npm i vue-resource
vue插件使用忘了的，點擊此處。
1.2 在main.js中導入插件vue-resource
- vue-resource 中使用的是默認導出，導入 vue-resource 使用變量vueResource 接收即可。
import vueResource from 'vue-resource'
1.3 在main.js中使用插件vue-resource
//使用插件
Vue.use(vueResource)
沒有使用 vue-resource插件，【 vue 實例對象和組件實例對象含有的部分屬性如下】。
使用 Vue 的 use() 方法使用插件，在所有的 vue 實例對象和組件實例對象中會多一個 $http 屬性。
在所有的 vue 實例對象和組件實例對象中 $http 屬性展開。
1.4 使用vue-resource發(fā)送請求
- vue-resource 與 axios 一樣都是 promise 風格的，vue-resource 發(fā)送請求的方法與形式和 axios 一樣。
以發(fā)送 get 請求為例：
- 用axios發(fā)送請求：
// 發(fā)起請求獲取用戶數(shù)據(jù)
axios.get(`請求地址`).then(
//請求成功后，應該干什么？
(response)=>{
console.log(this);// this指vc
console.log('請求成功');
// 請求成功的處理代碼寫在這里，xxx
},
//請求失敗后，應該干什么？
(error)=>{
console.log('請求失敗', error.message)
// 請求失敗的處理
},
);
- 用vue-resource發(fā)送請求：
// 發(fā)起請求獲取用戶數(shù)據(jù)
this.$http.get(`請求地址`).then(
response => {
console.log('請求成功')
// 請求成功的處理
},
error => {
console.log('請求失敗', error)
// 請求失敗的處理
}
)
2.基于插件vue-resource的GitHub搜索案例實現(xiàn)
- 頁面效果如下：
完整代碼：
index.html
<!DOCTYPE html>
<html lang="zh-en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 引入第三方樣式庫 -->
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
-
main.js文件//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入vue-resource插件 import vueResource from 'vue-resource'; //關閉Vue的生產(chǎn)提示 Vue.config.productionTip = false //使用插件 Vue.use(vueResource) //創(chuàng)建vm new Vue({ el:'#app', render: h => h(App), // 生命周期鉤子beforeCreate中模板未解析，且this是vm beforeCreate() { // this:指的是vm Vue.prototype.$bus = this //安裝全局事件總線$bus } }) -
App.vue文件<template> <div class="container"> <Search/> <List/> </div> </template> <script> import List from './components/List'; import Search from './components/Search'; export default { components: { List, Search}, name: 'App', }; </script> -
Search.vue文件文章來源：http://www.zghlxwxcb.cn/news/detail-513030.html<template> <section class="jumbotron"> <h3 class="jumbotron-heading">Search Github Users</h3> <div> <input type="text" placeholder="enter the name you search" v-model="keyWord" /> <!-- 綁定一個點擊事件 --> <button @click="searchUsers">Search</button> </div> </section> </template> <script> export default { name: 'Search', data() { return { keyWord:'', } }, methods: { searchUsers() { console.log(this); //請求前更新List的數(shù)據(jù)【類似于初始化】 this.$bus.$emit('updateListData',{isLoading:true,errorMsg:'',users:[],isFirst:false}) // 獲取該url：github搜索的數(shù)據(jù) this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then( //請求成功后觸發(fā)自定義事件，并傳遞數(shù)據(jù) (response)=>{ console.log(this);// this指vc console.log(response.data); this.$bus.$emit('updateListData',{isLoading:false,errorMsg:'',users:response.data.items}) }, //請求失敗后 (error)=>{ console.log('我請求數(shù)據(jù)失敗后，傳遞失敗的信息，并將users數(shù)據(jù)初始化'); // 請求失敗后 users必須制空，不然頁面還是會顯示上次成功請求的數(shù)據(jù) this.$bus.$emit('updateListData',{isLoading:false,errorMsg:error.message,users:[]}) }, ); }, }, }; </script> -
List.vue文件文章來源地址http://www.zghlxwxcb.cn/news/detail-513030.html<template> <div class="row"> <!-- 展示用戶列表 --> <div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.login" > <!-- 必須有冒號：動態(tài)數(shù)據(jù)綁定 --> <a :href="user.html_url" target="_blank"> <img :src="user.avatar_url" style="width: 100px" /> </a> <p class="card-text">{{ user.login }}</p> </div> <!-- 展示歡迎詞 --> <h2 v-show="info.isFirst">歡迎使用免費的GitHub接口！</h2> <!-- 展示加載中 --> <h2 v-show="info.isLoading">頁面加載中....</h2> <!-- 展示錯誤信息 --> <h2 v-show="info.errorMsg">{{ info.errorMsg }}</h2> </div> </template> <script> export default { name: 'List', data() { return { info: { isFirst: true, isLoading: false, errorMsg: '', users: [], }, }; }, // 全局數(shù)據(jù)總線： // 接收數(shù)據(jù)的一方：在mounted鉤子中定義自定義事件 mounted() { // 綁定事件updateListData,并在回調(diào)函數(shù)中接收來自Search組件的數(shù)據(jù)【對象的形式：dataObj】 this.$bus.$on('updateListData', (dataObj) => { // 對象合并：相同的屬性以后面的對象為主 this.info = {...this.info,...dataObj} }); }, }; </script> <style scoped> h2 { margin-left: 50px; } .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: 0.75rem; margin-bottom: 2rem; border: 1px solid #efefef; text-align: center; } .card > img { margin-bottom: 0.75rem; border-radius: 100px; } .card-text { font-size: 85%; } </style>
到了這里，關于前端vue入門(純代碼)18的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
