Vueを使用して天気コンポーネントをロードする方法の詳細な説明

Vueを使用して天気コンポーネントをロードする方法の詳細な説明

この記事では、Vueを使用して天気コンポーネントをロードする方法を参考までに紹介します。具体的な内容は次のとおりです。

まず、中国気象ネットワークにアクセスしてコードを生成します

必要に応じて天気スタイルを設定します

生成されたコードをコピーしてvueに変更します。

スクリプトのインポートをVueの動的インポート方法に変更する

<テンプレート>
    <div id="セーター">
        <div id="weather-view-he" ref="天気"></div>
        <remote-script src="天気ネットワークで生成されたコード内のスクリプト src"></remote-script>
    </div>
</テンプレート>
<スクリプト>
window.WIDGET = {ID: '123456'}; // WIDGET の前にウィンドウを追加します。そうしないと、この変数を読み取ることができません。import Vue from 'vue'
Vue.component('remote-script', { // vue は動的にスクリプトを生成します (html のコンポーネントとして使用されます)
    レンダリング: 関数 (createElement) {
        var self = this;
        createElement('script', を返す。
            属性: {
                タイプ: 'text/javascript',
                ソース: this.src
            },
            の上: {
                ロード: 関数 (イベント) {
                    self.$emit('load', イベント);
                },
                エラー: 関数 (イベント) {
                    self.$emit('error', イベント);
                },
                readystatechange: 関数 (イベント) {
                    this.readyState == '完了'の場合{
                        self.$emit('load', イベント);
                    }
                }
            }
        });
    },
    小道具: {
        ソース: {
            タイプ: 文字列、
            必須: true
        }
    }
})
エクスポートデフォルト{
    名前:"天気",
    データ(){
        戻る {
           
        }
    },
}
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vueは小さな天気予報アプリケーションを実装します
  • Vue が天気予報機能を実装
  • Vue で webSocket を使用してリアルタイムの天気を更新する方法
  • Vue 天気予報入門

<<:  MySQL の悲観的ロックと楽観的ロックの理解と応用分析

>>:  H5ゲームをnginxサーバーにデプロイする方法の詳細な説明

推薦する

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

JSON.stringify のさまざまな用途のまとめ

序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...

H5でクリックされたときにaタグの背景色をキャンセルする方法

1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...

CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)

CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

Centos7 システムに k8s クラスターを展開するための詳細な紹介

目次1 バージョンと計画1.1 バージョン情報: 1.2 クラスター計画2. 展開1. ファイアウォ...

Vueの子コンポーネントと親コンポーネントの詳細な分析

目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

Linux に nginx をインストールする方法

Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...

角丸四角形の HTML+CSS 実装コード

退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...

MySQL でストリーミングクエリを使用してデータ OOM を回避する

目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...

Vueは、センシティブな単語フィルタリングコンポーネントを検出するためのさまざまなアイデアを実装しています。

目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...

JavaScript を使用してページ要素のオフセットを取得/計算する方法

質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...