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サーバーにデプロイする方法の詳細な説明

推薦する

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明

ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...

HTML ウェブページハイパーリンクタグ

HTML ウェブ ページのハイパーリンク タグの学習チュートリアル リンク タグの属性 リンクは、ウ...

Vue+Echart 棒グラフで疫病データ統計を実現

目次1. まずプロジェクトにechartsをインストールします2. echartsに縦棒グラフテンプ...

MySQLリモートアクセスの設定方法をステップバイステップで説明します

序文MySQL データベースを使用する場合、クライアントはデータベース サーバーにリクエストを送信す...

デザイン協会: なぜ間違った場所を探したのですか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

MySQLアカウントのIP制限条件を変更する方法

序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...

ES6のシンボルデータ型について詳しく説明します

目次シンボルデータタイプシンボルが表示される理由シンボルの特徴シンボルの応用rbオブジェクトにupメ...

MySQL マスタースレーブ同期遅延の原因と解決策

歴史的な理由により、MySQL レプリケーションは、REDO ログではなく論理バイナリ ログに基づい...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

Dockerコンテナ間の通信を実装する方法

シナリオ: laradock 開発環境 (php7.3+mysql5.7) がローカルに構築されてい...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...

Linux 上の Vim で色とテーマを変更する方法

Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...