Vue.jsのテンプレートは、DOMに基づいて実装されています。これは、すべてのVue.JSテンプレートが解析可能で有効なHTMLであり、いくつかの特別な機能によって強化されていることを意味します。したがって、VUEテンプレートは、文字列ベースのテンプレートと根本的に異なります。これに留意してください。
補間
文章
データバインディングの最も基本的な形式は、「口ひげ」構文（二重ブレース）を使用したテキスト補間です。
<span>メッセージ：{{msg}} </span>
口ひげタグは、対応するデータオブジェクトのMSG属性の値に置き換えられます。また、このプロパティが変更されるたびに更新されます。
また、単一の補間のみを処理することもできます。将来のデータの変更は、補間の更新を引き起こしなくなります。
<span>これは決して変更されません：{{* msg}} </span>
オリジナルHTML
デュアル口ひげタグは、データをHTMLの代わりにプレーンテキストに分割します。実際のHTML文字列を出力するには、3つの口ひげタグを使用する必要があります。
<div> {{{raw_html}}} </div>
内容はHTML文字列として挿入されます - データバインディングは無視されます。テンプレートフラグメントを再利用する必要がある場合は、部分的なものを使用する必要があります。
[xss攻撃]（https://en.wikipedia.org/wiki/cross-site_scripting）になりやすいため、WebサイトでHTMLを動的にレンダリングすることは非常に危険です。信頼できるコンテンツに対してのみHTML補間を使用することを忘れないでください。
HTML機能
口ひげタグは、HTML属性でも使用できます。
<div id = "item- {{{id}}"> </div>
Vue.jsの指令と特別な機能内で補間は使用できないことに注意してください。口ひげタグが間違った場所で使用されている場合、Vue.jsが警告を発します。
バインド式
口ひげタグに配置されたテキストは、結合式と呼ばれます。 Vue.jsでは、バインドされた式は、単純なJavaScript式、およびオプションで1つ以上のフィルターで構成されています。
JavaScript式
これまでのところ、テンプレートは単純な属性キーのみにバインドされています。ただし、実際、Vue.JSは、データバインディングでフル機能のJavaScript式をサポートしています。
{{number + 1}}
{{ わかりました ？ 「はい」：「いいえ」}}
{{message.split（ ''）。reverse（）。join（ ''）}}}
これらの式は、それらが属するVUEインスタンスの範囲内で評価されます。 1つの制限は、各バインディングには単一の式のみが含まれるため、次のステートメントが無効であることです。
<！ - これは声明であり、表現ではありません： - >
{{var a = 1}}
<！ - プロセス制御も不可能です。代わりに3成分式を使用できます - >
{{if（ok）{return message}}}
フィルター
vue.jsは、式の後にオプションの「フィルター」を追加することを許可し、「パイプライン文字」を示しています。
{{メッセージ|大文字}}
ここでは、式メッセージ「パイプ」の値を内蔵の大文字フィルターに使用します。このフィルターは、実際には、大文字の値を返すJavaScript関数にすぎません。 Vue.jsはいくつかの組み込みフィルターを提供し、後で独自のフィルターを開発する方法について説明します。
Pipe SyntaxはJavaScriptの構文ではないため、式内でフィルターを使用できず、式の後付けにのみ追加できることに注意してください。
フィルターは直列に接続できます。
{{メッセージ|フィルター| filterb}}
フィルターはパラメーターを受け入れることもできます。
{{メッセージ| filtera 'arg1' arg2}}
フィルター関数は、常に式の値を最初のパラメーターとして受け取ります。引用された引数は文字列として扱われますが、引用されていない引数は式として計算されます。ここでは、文字列「Arg1」が2番目のパラメーターとしてフィルターに渡され、式Arg2の値は3番目のパラメーターとして計算されます。
命令
ディレクティブは、プレフィックスV-を備えた特別な機能です。指令の値は結合式に限定されているため、上記のJavaScript式とフィルタールールもここで適用されます。指示の責任は、その表現の値が変化したときに、特定の特別な行動をDOMに適用することです。 「概要」の例を行き来しましょう：
<p v-if = "グリーティング">こんにちは！</p>
ここで、V-IFディレクティブは、式グリーティング値の信頼性に従って<P>要素を削除/挿入します。
パラメーター
いくつかの指示は、その名前の後に「引数」と中央のコロンによって区切ることができます。たとえば、V-Bindディレクティブは、HTML機能を応答的に更新するために使用されます。
<v-bind：href = "url"> </a>
ここでは、hrefはパラメーターであり、v-bindディレクティブに、要素のhref属性を式URLの値に結合するように指示します。たぶん、あなたはフィーチャー補間{％raw％} href = "{{url}}" {％endraw％}を使用して同じ結果を得ることができることに気づいたかもしれません。これは正しいことであり、実際、内部機能の補間はV剤結合に変換されます。
別の例は、domイベントをリッスンするために使用されるV-onディレクティブです。
<a v-on：click = "dosomething">
このパラメーターは、聞くイベントの名前です。また、イベントバインディングについて詳しく説明します。
修飾子
修飾子は、半幅の期間から始まる特別な接尾辞です。それらは、指示が特別な方法で拘束されるべきであることを示すために使用されます。たとえば、文学的修飾子は、式の代わりに、その値を文字通りの文字列に解析するよう指令に指示します。
<a v-bind：href.literal = "/a/b/c"> </a>
もちろん、これは意味をなさないようです。なぜなら、単一の命令を使用せずにhref = "/a/b/c"を使用する必要があるからです。この例は、構文を実証するためだけです。後で、修飾子のより実用的な使用法が表示されます。
略語
V-Prefixは、テンプレート内の特定のVUE機能を識別する視覚的なヒントです。これらの接頭辞は、既存のHTMLコードに動的な動作を追加する必要がある場合、良い区別になる可能性があります。しかし、いくつかの一般的な指示を使用すると、それは常にとても現実的で冗長であると感じるでしょう。また、単一ページアプリケーション（SPA）を構築する場合、Vue.jsはすべてのテンプレートを管理し、V-プレフィックスは現時点ではそれほど重要ではありません。したがって、vue.jsは、最も一般的に使用される2つのディレクティブV-bindとv-onに特別な略語を提供します。
Vバインドの略語
<！ - complete syntax-> <a v-bind：href = "url"> </a> <！ - 略語 - > <a：href = "url"> </a> <
v-onの略語
<！ - complete syntax-> <a v-on：click = "dosomething"> </a> <！ - 略式 - > <a @click = "dosomething"> </a>
それらは「リーガル」HTMLとは少し異なって見えますが、すべてのvue.js対応ブラウザーで正しく解析されており、最終レンダリングされたタグには表示されません。略語文法は完全にオプションですが、段階的に学ぶにつれて、あなたはそれらを持っていることを喜んでいます。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。