Vue.js에서 도쿄도의 오늘의 날씨를 보여주는 웹 사이트를 만드는 Copipe 샘플
5531 단어 Vue.jsaxios자바스크립트OpenWeatherMap
Vue.js와 axios로 간단한 데이터 연동을 합니다.
만드는 것
이런 식으로 버튼을 누르면 오늘의 날씨를 표시하는 웹 사이트를 만듭니다.
사용하는 API
OpenWhethermap의 API를 만듭니다. 무료로 어느 정도 (잡) 사용할 수 있습니다.
API 키를 얻자.
로그인 후 여기에 액세스하면 키가 표시됩니다.
Copipe 코드
한 곳에서만 변경이 필요합니다.
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이나 어딘가에 배포하여 행동을 확인하십시오.
Reference
이 문제에 관하여(Vue.js에서 도쿄도의 오늘의 날씨를 보여주는 웹 사이트를 만드는 Copipe 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n0bisuke/items/439c7dac42603e7dd1aa텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
