vue2.x の徹底研究 - h 関数の説明

vue2.x の徹底研究 - h 関数の説明

vue プロジェクト。 .vue ファイルのテンプレート内に記述されたコードは、webpack テンプレート パーサー プラグインを使用して解析する必要があります。単一の .html ファイルに vue ファイルが導入されると、vue ファイルにはテンプレート パーサーも導入されます (欠点はサイズが大きいことです)。

したがって、エンジニアリング開発プロジェクトを使用する場合は、テンプレート解析のために package.json ファイルに vue-template-compile を導入する必要があります。

ここに画像の説明を挿入

テンプレート パーサーがない場合、解析できませんが、vue-template-compile は .vue ファイル内のテンプレートのみを解析でき、.js ファイル内のテンプレートを解析することはできません。

したがって、これを記述すると、機能しなくなります。

ここに画像の説明を挿入

ここに画像の説明を挿入

なぜ解析できないのでしょうか? main.jsファイルによって導入されたvueファイルにはテンプレートパーサーがないため

ここに画像の説明を挿入

ここに画像の説明を挿入

vue.runtime.common.js はテンプレートパーサーのない .vue ファイルであり、vue.js はテンプレートパーサーのある vue ファイルです。

ここに画像の説明を挿入

main.jsのテンプレートパーサーを使ってvue.jsファイルをインポートすると、テンプレートを解析することができます。

ここに画像の説明を挿入

ここに画像の説明を挿入

テンプレート パーサーのない vue.js ファイルがデフォルトでインポートされるのはなぜですか?
音量の問題のため:

ここに画像の説明を挿入

解決、

公式のレンダリング機能を使用してください。導入した vue-template-compile を h 関数を通じて呼び出すことができます。つまり、コードの 9 行目は、11 行目と 12 行目に加えて、ローダー テンプレート パーサーと同等になります。

ここに画像の説明を挿入

要約:

ここに画像の説明を挿入

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

<<:  vscode を使用したリモート Linux 開発の実装

>>:  MySQL 派生テーブル(Derived Table)の簡単な使用例分析

推薦する

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

フロントエンドJavaScript ES6の詳細について

目次1. はじめに1.1 Babel トランスコーダ1.2 ポリフィル2. let と const ...

MySQL マスターとスレーブの不整合とその解決策の詳細な説明

1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...

Vue のキーボードイベント監視の概要

キー修飾子キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。...

Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

コンピュータ システムが再インストールされ、侵入テスト学習環境 DVWA を再インストールする必要が...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

Docker+nacos+seata1.3.0 のインストールと使用設定チュートリアル

これに先立ち、1日かけてやってみました。Seataは使い方が簡単で超シンプルですが、インストールや設...

Linux サービスでファイアウォールを有効にする 2 つの方法

方法は2つあります: 1. サービス方法ファイアウォールのステータスを確認します。 [root@ce...

MySQLデータベースのトランザクションとロックの詳細な分析

目次1. 基本概念酸3.自動コミット4. トランザクション分離レベル5. 同時実行の一貫性の問題6....

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

Nginx 運用保守ドメイン名検証方法例

インターフェイス ドメイン名を構成する際、各パブリック プラットフォームはドメイン名に対する開発者の...

Dockerイメージをプルしてバージョンを確認する方法

イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...

Angular構造ディレクティブモジュールとスタイルの詳細な説明

目次1. 構造指示モジュールforRoot()を書く3. スタイルの定義ドラッグ時の順序を調整するに...

最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順

Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...

HTML iframe で親ページと子ページ間の双方向メッセージングを実装する例

ある日、リーダーはメイン ページに iframe を埋め込み、親ページと子ページ間で双方向にメッセー...