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)の簡単な使用例分析

推薦する

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

CSS子要素選択親要素の実装

通常、CSS セレクターは上から下に選択し、親要素を介して子要素を選択します。では、子要素を介して親...

Nginx フォワードプロキシとリバースプロキシの違いと原理分析

1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

エンコードが utf-8 に設定されている場合に Web ページが文字化けする問題の解決策

最近、PHP で Web ページを書いているときに、エンコードを UTF-8 に設定しました。しかし...

Flexレイアウトを使用してヘッドの固定コンテンツ領域のスクロールを実現する方法

ページ ヘッダーの固定レイアウトは、以前は position:fixed を使用して実装されていまし...

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

MySQLデータベースをアンインストールするための完全な手順

MySQLデータベースを完全にアンインストールするプロセスは次のとおりです。 1. MySQLサービ...

Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル

序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

この構成ファイルの排他ロックに失敗したという VMware 仮想マシンのプロンプトの解決方法

VMware が異常シャットダウンした後、再起動すると「この構成ファイルを排他的にロックできませんで...

CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明

幅: 自動子要素(コンテンツ+パディング+境界線+余白を含む)は、親要素のコンテンツ領域全体を埋めま...

クロスドメインの問題を解決するためのNginxの実用的な方法

フロントエンドとバックエンドを分離し、nginxを使用してクロスドメインの問題を解決するフロントエン...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...