リポジトリ

https://github.com/x-hack-git/vue-first-step

ワークショップ開始 ~ Vue.jsの基本~

Vue.jsとは何か?

  1. Vue.jsの紹介
    1. ビューだけを扱うシンプルなライブラリ
    2. 学習コストが低い
    3. コンポーネント指向である
      1. システム全体をコンポーネントの集合として開発できる
    4. リアクティブなデータバインディング
      1. DOM操作が容易
      2. 自動で表示が更新される
      3. 双方向データバインディング
    5. プログレッシブフレームワーク
      1. 要求の変化に追随できる
      2. 必要になった時に拡張する
  2. プログレッシブフレームワーク
    1. 宣言的レンダリング
    2. コンポーネントシステム
    3. クライアントサイドルーティング
    4. 大規模向け状態管理
    5. ビルドシステム
    6. クライアントサーバデータ永続化
  3. コンポーネントシステム
    1. 単一ファイルコンポーネント
    2. リアクティブシステム
      1. 算出プロパティ
    3. レンダリングシステム

APIをVueで扱うハンズオンの教材

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"}
    ]
  }
});