.vue ファイル解析の実装について

この記事は主に詳細な .vue ファイル解析の実装を紹介します。その内容は非常に優れているので、参考として共有します。

vue 単一ファイル

vue は、今日非常に人気のあるフレームワークの 1 つで、全体的にエレガントでコンパクトです。私は最近、いくつかのプロジェクトを実行するためにこのフレームワークを使用する方法を学び始めました。公式ドキュメントを閲覧した後、vue プロジェクトを迅速に構築し、実践から素早く学ぶために vue-cli スキャフォールディングを使用し始めました。プロジェクト ファイルの構造を確認したところ、.vue で終わる単一のファイルについて多くの混乱が生じました。発生した具体的な問題は次のとおりです。

とは何ですか?テンプレートは HTML5 の新しい要素です。主に、ブラウザがコンテンツを解析するために使用されますが、後で使用するためにドキュメントに保存されるコンテンツの断片とみなすことができます。

単一ファイルコンポーネントについて

vueの単一ファイルは、コンポーネントに関するhtml-css-jsファイルのコレクションを含む、ページ内のコンポーネントに相当します。これは、プロジェクト管理と統合、公式に有益です。ビルドステップがあるということです。
タグの下に子ノード要素は 1 つだけあります。

などのタグを複数記述すると、以下のようにエラーが報告されます

.vue ファイルには html-css-js を含めることができ、webpack は自動的にそれを 3 つのファイルにパッケージ化しますか?

.vue ファイルでは、dom 構造は タグの下に記述でき、dom 構造のスタイル ファイルは タグが存在します。DOM 構造を制御する同じスクリプトが別の兄弟要素 <script></script> に記述されるため、各コンポーネントの対応する構造スタイルが同じファイル内に存在します。他のコンポーネント。

公式 hello.vue インスタンス

style タグの属性は何ですか?違いとはどういう意味ですか?

タグには、それぞれ css スコープと css モジュールを表す、scoped 属性と module 属性が含まれており、スタイルが現在のテンプレート部分にのみ有効であることを示します。コンポーネントとそのサブコンポーネント
script タグのエクスポートデフォルトとは何を意味しますか?

全文中の唯一の図から、<script></script> タグの下のコードの最初の行がエクスポートデフォルト {...} であることがわかります。これは、次の新しいモジュール部分の構文です。 ES6、モジュールの使用 このように、各ファイルは独自のモジュールであり、エクスポートとインポートを使用してインターフェイスを公開および参照します。ファイルまたはモジュールでは複数のエクスポートとインポートを行うことができますが、このコマンドを使用した後は、他のモジュールが参照するときにロードされるモジュール変数名を知る必要はありません。 エクスポートのデフォルトを使用できます何を書きますか?

オープンインターフェースとして使用したい限り、変数、メソッド、オブジェクトなどを含む多くのものを書くことができます。 に data() {} やメソッドなどを書くことができます。 vue ファイル。データは、このコンポーネントで定義されたテンプレート データを指します。 など、クリック メソッドを の要素にバインドする場合は、次のようになります。

<template>
 <p></p>
 <p></p>
</template>

//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

私は少し前に vue に触れたばかりですが、実際に戦って学ぶのが最善の方法だと信じています。上記に間違いがある場合は、誰かが指摘してくれることを願っています〜

以上がこの記事の内容です。その他の関連コンテンツについては、ご注意ください。 PHP中国語ウェブサイトへ！

関連する推奨事項:

VUEJS 2.0 サブコンポーネントへのアクセス/親コンポーネントの呼び出し

vue-admin とバックエンド (flask) の分離と組み合わせの分析

以上が.vue ファイル解析の実装についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。