コンポーネントを作成し、VUUTUBユーザの詳細をVueで取得します.セマンティックUI👩‍💻

このチュートリアルでは、裸の最小要件を使用してVueコンポーネントを作成する方法を学びます.私たちが構築しているのは、以下の内容を持つGithubユーザカードです.

プロフィール写真.

プロフィール名.

結合日付.

ユーザーバイオ.

フォロワーの数.

すべての中で、次のようになります.

あなたがよく知っているならばSemantic UI , これはまさにそれだcard component です.
Github APIエンドポイントからデータを取得する方法と、どのように接続するかを知ることができますVue instance .
まっすぐにジャンプしましょう!

これはジャンプかファセットか?

必要条件🙃

ウェブ開発の極度の新しいcomersへの注意!このチュートリアルは

HTML

CSS

JavaScript

Vue.js - 基本的なコンポーネントの作成、インスタンスの知識、小道具など.

HTMLマークアップを書き込む😌

インサイドindex.html ファイルをrootにする必要がありますapp 元素div Vueがウェブページにマウントするのを助ける.
さらに移動する前に、次の意味のあるUI CSS cdnを追加します.

https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css

次に、カードコンポーネントマークアップコードをhere .

<div id="app">
    <!-- Template from Semntic UI docs -->
    <div class="ui card">
      <div class="image">
        <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
      </div>
      <div class="content">
        <a class="header">Kristy</a>
        <div class="meta">
          <span class="date">Joined in 2013</span>
        </div>
        <div class="description">
          Kristy is an art director living in New York.
        </div>
      </div>
      <div class="extra content">
        <a>
          <i class="user icon"></i>
          22 Friends
        </a>
      </div>
    </div>
  </div>

ご覧の通り、下にui card クラス、我々は image デフォルトのアバターを保持します.この後、我々は content block それはすべての詳細を保持します header , metadata , the description そして最後に extra content 友達の数が含まれます.

Vueを書く！😎

閉鎖直前</body> Vueを追加します.JSスクリプト

<script src="https://unpkg.com/vue"></script>

新しいメインを作る.同じプロジェクトフォルダの下のJSファイルlink it with your HTML , それから、Vue instance .

コンポーネントのコード

新しいコンポーネントテンプレートをbody . カードがレンダリングされる場所です.<github-card username="username"></github-user-card>次のステップは、コンポーネントを登録することです.使用する Vue.component メソッド.名前をあげましょうgithub-card . 一つの支柱が必要です.username はtype: String 作られrequired デフォルトでは、Github APIエンドポイントをヒットする必要があります.
当社のユーザーの詳細は data() プロパティ.次に、GitHub APIを呼び出す方法を必要としますので、私たちは多くの人気を使用しますAxios library 詳細を取得するには次のスクリプトを含めてcdnを取得してください.

https://unpkg.com/axios/dist/axios.min.js

さて、これAJAX コールは2つの場所で行われる:

最初に、コンポーネントが作成されると.

第二に、ドキュメントにマウントされる前に.

チェックアウトthis lifecycle diagram より良い文脈のために.
だから、内部 created フック、我々は get() API URLを渡す方法.すなわちhttps://api.github.com/users/${this.username} . The response データはuser プロパティ.
以下はコードです.

Vue.component('github-card', {
      props: {
        username: {
          type: String,
          required: true
        }
      },
      data() {
        return {
          user: {}
        };
      },
      async created() {
        const response = await axios.get(`https://api.github.com/users/${this.username}`);
        this.user = response.data;
      }
    });

    new Vue({
      el: '#app',
    });

テンプレートの作成

我々はX-Template 上記のHTML構文を付ける方法.最初に、我々はそれを適切に与えるid of github-card-template を追加することによって、Vueコードを更新することを確認するtemplate これでid . すべての意味のUI HTMLをカットし、新しいXテンプレートスクリプトの下に追加します.
Github APIフォーマットと我々が得ることができるすべてのデータはavailable on their website JSON形式で.
ハードコーディングされた値を新しくアクセス可能なものに置き換えましょうuser APIからのオブジェクト.ここに置換があります.

<img src="https://semantic-ui.com/images/avatar2/large/kristy.png"> -> <img :src="user.avatar_url">

「クリスティ」->{{ user.name }}

「2013年入会」Joined in {{ user.created_at }}

「クリスティはニューヨーク在住のアートディレクターです」{{ user.bio }}

のフレンド一覧{{ user.followers }} Followers

我々が使用していることを忘れないでくださいmoustache format JavaScriptコードの場合.
新しいコードを示します.

<script type="text/x-template" id="github-card-template">
    <div class="ui card">
      <div class="image">
        <img :src="user.avatar_url">
      </div>
      <div class="content">
        <a :href="`https://github.com/${username}`" class="header">{{user.name}}</a>
        <div class="meta">
          <span class="date">Joined in {{user.created_at}}</span>
        </div>
        <div class="description">
          {{user.bio}}
        </div>
      </div>
      <div class="extra content">
        <a :href="`https://github.com/${username}?tab=followers`">
          <i class="user icon"></i>
          {{user.followers}} Followers
        </a>
      </div>
    </div>
  </script>

ご覧のように、名前とフォロワーカウントの間にリンクを追加しました :href 引数.
ブラウザのページをリフレッシュし、そこにある!あなたはVueでGithubコンポーネントを作成し、ストーリーブックとスタイルを付けました.なんてクールだ.
githubカードは次のようになります.😉

次はどこですか。🤔

複数のユーザーのためにこれらのカードを作る!

より多くの情報を得るためにGithubデータを使用してください

セマンティックUIの他のコンポーネントを使用してデータを表示します.

読んでくれてありがとう.良い一日を.(✿◕‿◕✿)

Who here can relate? 😓

Documentation is rarely closed as duplicate, just saying... 😉

Find Microsoft Docs this way: https://t.co/eq5hQaVjPn

Image source: https://t.co/gnY04c5qul pic.twitter.com/KIrCbhE7Q5

— Microsoft Developer UK (@msdevUK)

📫 毎週の開発者ニュースレターを購読してください📫

Daily すべての新しいタブを最高のプログラミングニュースを提供します.私たちはあなたのための資格のソースの数百人は、将来をハックできるようにランク付けされます.