簡単なサンプルです。
Vue.jsとaxiosで簡単なデータ連携をします。
作るもの
こんな感じでボタンを押すと今日の天気を表示するWebサイトを作ります。
使うAPI
OpenWhethermapのAPIを作います。無料である程度（雑）使えます。
APIキーを取得しましょう。
ログイン後ここにアクセスするとキーが表示されます。
コピペ用コード
一箇所だけ、変更が必要です。
appid=ここにOpenWeathermapのAPIキーを指定と書いているところに自身で取得したAPIキーを指定しましょう。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>今日の天気は{{ weather }}で、気温は{{ temp }}度です。</p>
<button v-on:click="getData()">今日の東京の天気をAPIで取得！</button>
<p>
<a href="https://openweathermap.org/api">openweathermapから取得しています。</a>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
weather: 'xxxx',
temp: 'yyyy'
},
methods: {
getData: async function(){
const URL = `https://api.openweathermap.org/data/2.5/weather?id=1850147&units=metric&appid=ここにOpenWeathermapのAPIキーを指定`;
const response = await axios.get(URL);
this.weather = response.data.weather[0].main;
this.temp = response.data.main.temp;
// console.log(response.data);
},
},
// mounted: function(){
// }
})
</script>
</body>
</html>
試す。
ローカルのindex.htmlをブラウザで開いたり、live severやどこかにデプロイしたりして挙動確認をしましょう。