この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL の悲観的ロックと楽観的ロックの理解と応用分析
>>: H5ゲームをnginxサーバーにデプロイする方法の詳細な説明
最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...
序文json を使用したことがある人なら、オブジェクトを文字列化してからバックエンドに送信するのが一...
目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...
1. モバイル端末でクリックされたときにタグの青色を解除する { -webkit-tap-highl...
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...
目次1 バージョンと計画1.1 バージョン情報: 1.2 クラスター計画2. 展開1. ファイアウォ...
目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....
以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...
Nginx は C 言語で開発されており、Linux で実行することをお勧めします。もちろん、Win...
退屈していたので、突然角丸四角形の実装を思いつきました。しかし、私たちはこの話題についてあまりにも長...
目次1. はじめに2. JDBCはストリーミングクエリを実装する3. パフォーマンステスト3.1. ...
目次前面に書かれた要件分析 v1アイデア1: インターセプションメソッドを使用して入力ボックスの入力...
質問コントロールをクリックすると、コントロールの下にフローティング レイヤーが表示されます。通常の方...