この記事では、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サーバーにデプロイする方法の詳細な説明
この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...
ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...
HTML ウェブ ページのハイパーリンク タグの学習チュートリアル リンク タグの属性 リンクは、ウ...
目次1. まずプロジェクトにechartsをインストールします2. echartsに縦棒グラフテンプ...
序文MySQL データベースを使用する場合、クライアントはデータベース サーバーにリクエストを送信す...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
目次シンボルデータタイプシンボルが表示される理由シンボルの特徴シンボルの応用rbオブジェクトにupメ...
歴史的な理由により、MySQL レプリケーションは、REDO ログではなく論理バイナリ ログに基づい...
序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...
シナリオ: laradock 開発環境 (php7.3+mysql5.7) がローカルに構築されてい...
目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...
Vim は Linux でよく使用されるテキスト エディターです。 Vim は、Sublime や ...
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...