https://github.com/x-hack-git/vue-first-step
https://www.webprofessional.jp/fetching-data-third-party-api-vue-axios/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The greatest news app ever</title>
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css>">
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">VueNews</h3>
<div class="columns medium-3" v-for="result in results">
<div class="card">
<div class="card-divider">
{{ result.title }}
</div>
<div class="card-section">
<p>{{ result.abstract }}.</p>
</div>
</div>
</div>
</div>
<script src="<https://unpkg.com/vue>"></script>
<!-- 下記を追加追加 -->
<script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>
<script src="app.js"></script>
</body>
</html>
API key を申請する
ニューヨークタイムズAPIを利用するためにはAPIキーが必要です。
app.js ver1
const vm = new Vue({
el: '#app',
data: {
results: [
{title: "the very first post", abstract: "lorem ipsum some test dimpsum"},
{title: "and then there was the second", abstract: "lorem ipsum some test dimsum"},
{title: "third time's a charm", abstract: "lorem ipsum some test dimsum"},
{title: "four the last time", abstract: "lorem ipsum some test dimsum"}
]
}
});