MBP(はてな)

MacBook Pro,iPhone Xs,React

Vite + VueでQiitaAPIを使って記事情報を取得して表示、無限スクロール Vercel

Vue初心者がQiita APIを使ってみた - Qiita

$ vi src/components/HelloWorld.vue
$ npm install axios
$ npm run dev

$ vi src/components/HelloWorld.vue して、
Vue.jsタグのデータを表示、表示を変更
axios.get(`https://qiita.com/api/v2/tags/Vue.js/items?page=1&per_page=20`, {})

cssを追加して、リンクの色、リンクの下線を消去
$ vi src/assets/css/style.css
$ vi src/main.js して、import
import './assets/css/style.css'
vercel-vite-vue/style.css at main · hiroyuki12/vercel-vite-vue · GitHub

vite-react-pages/QiitaApp.css at main · hiroyuki12/vite-react-pages · GitHub

タグボタンを追加

GitHub
GitHub - hiroyuki12/vercel-vite-vue


Vercel アプリ
https://vercel-vite-vue-silk.vercel.app


【Vue.js】QiitaのAPIを使ったリアルタイム検索プログラムの作成方法 - Qiita

Vue.js + axios で Qiita API v2 を叩いて投稿を取得する - Qiita

ページ遷移、vue-router
VueでのAPI - Qiita

サンプルあり
Qiita APIを利用した検索表示-Vuejs | isystk's blog

Vue.js / JSON から情報を引っ張ってくる その10 - Chuck the Casual Web Surfer

Twitter風の〜分前を実装する(JavaScript/Vue編) - Qiita


無限スクロール。mounted()を追加、window.onscrollでページの一番下到着確認
Vue.jsで無限スクロールを実装する方法 - 開発者ドキュメント

axios get catch
[フロントエンド] axiosライブラリを使って、柔軟にHTTP通信を行う - YoheiM .NET

モック API アプリの作成
APIの利用制限(Rate Limit)めんどくせー - Qiita

v-if, v-else
v-if,v-else-if,v-elseを使って条件分岐しよう - Vue.jsで条件分岐する方法 | Vue.js辞典 - 今村だけがよくわかるブログ

初回のみ実行 created
Vue.jsのライフライクル [Vue v3.x] | JOHOBASE

ヌルチェック
【Vue】ヌルチェック(null判定)の方法。エラー対処法:vue.runtime.esm.js [Vue warn]: Error in render: “TypeError: Cannot read property ‘xxx’ of undefined”