1つは補間演算です
1.口ひげ
データ内のテキストデータをHTMLに挿入するにはどうすればよいですか？
私たちはすでにそれを学び、合格することができますMustache语法（つまり、二重中括弧）。口ひげ：口ひげ/あごひげ。
次のように使用でき、データはレスポンシブです
2.v-once
ただし、場合によっては、インターフェイスが変更をランダムに追跡したくない場合があります。現時点では、Vueコマンドを使用できます。
v-once
v-一度：
- 命令の後に式を続ける必要はありません（たとえば、前のv-forの後に式を続ける）
- この命令は、要素とコンポーネント（コンポーネントは後で学習されます）が一度だけレンダリングされ、データの変更によって変更されないことを示します。
コードは次のように表示されます。
3. v-html
サーバーに要求するデータ自体がHTMLコードである
場合があります。{ {}}を介して直接出力する と、HTMLコードも出力されます。
しかし、私たちが望むのは、それをHTML形式で解析し、対応するコンテンツを表示することです。
HTML表示を解析したい場合は、v-htmlコマンドを使用できます。
- この命令の後には、多くの場合、文字列型が続きます
- 文字列のhtmlが解析され、レンダリングされます
4.v-text
- v-textの機能はMustacheに似ています：どちらもインターフェースにデータを表示するために使用されます
- v-textは通常、文字列型を受け入れます
5. v-pre
v-preは、この要素とそのサブ要素のコンパイルプロセスをスキップするために使用され、元のMustache構文を表示するために使用されます。
たとえば、次のコード：
- 最初のh2要素のコンテンツは、対応するコンテンツを取得するためにコンパイルおよび解析されます
- 2番目のh2要素は{
{message}}を直接表示し ます
6.vマント
場合によっては、ブラウザにコンパイルされていないMustacheタグが直接表示されることがあります。
ネットワークが遅く、WebページがまだVue.jsをロードしていて、Vueが遅すぎてレンダリングできない場合、ページにはVueソースコードが表示されます。この問題を解決するには、v-cloakコマンドを使用できます。v-cloakコマンドを使用して、画面のちらつきの問題を解決します。cloak
：cloak
2つ、バインディングプロパティ
以前に学習した手順の主な機能は、テンプレートのコンテンツに値を挿入することです。
ただし、動的に決定する必要のあるコンテンツに加えて、いくつかのプロパティを動的にバインドする必要もあります。
- たとえば、要素のhref属性を動的にバインドします
- たとえば、img要素のsrc属性を動的にバインドします
現時点では、v-bindコマンドを使用できます。
- 役割：動的バインディングプロパティ
- 略語：：
- 预期：any（引数付き）| オブジェクト（引数なし）
- パラメーター：attrOrProp（オプション）
v-bindは、1つ以上のプロパティ値をバインドするため、またはprops値を別のコンポーネントに渡すために使用されます（これは、コンポーネントについて学習するときに導入されます）。
開発では、どのプロパティを動的にバインドする必要がありますか？
画像リンクsrc、ウェブサイトリンクhref、一部のクラスの動的バインディング、スタイルなど、まだたくさんあります。たとえば
、Vueインスタンスのデータを介して要素srcとhrefをバインドすると、コードは次のようになります。
1.v-シンタックスシュガーをバインドします：
v-bindには、対応するシンタックスシュガー（省略形）があります。
開発では、より簡潔であるため、通常、シンタックスシュガーの形式を使用します。
略語は次のとおりです。
2.v-バインディングクラスをバインドします
多くの場合、クラスを動的に切り替えたいと考えています。たとえば、
データが特定の状態にある場合、フォントは赤になります。
データが別の状態の場合、フォントは黒で表示されます。
クラスをバインドするには、次の2つの方法があります。
- オブジェクト構文
- 配列構文
1）バインディングメソッド：オブジェクト構文
オブジェクト構文の意味は次のとおりです。クラスの後にオブジェクトが続きます。
オブジェクト構文には次の用途があります。
用法一：直接通过{}绑定一个类
<h2 :class="{
'active': isActive}">Hello World</h2>
用法二：也可以通过判断，传入多个值
<h2 :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{
'active': isActive, 'line': isLine}">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
2）バインド方法：配列構文
配列構文の意味は次のとおりです。クラスの後に配列が続きます。
配列構文には次の用途があります。
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>
3.v-バインドスタイル
v-bind：styleを使用して、いくつかのCSSインラインスタイルをバインドできます。
font-sizeなどのCSSプロパティ名を
記述する場合、camelCase fontSize
またはダッシュ区切り（kebab-case、一重引用符で囲むことを忘れないでください） 'font-size'を使用できます。
クラスをバインドするには、次の2つの方法があります。
-
オブジェクト構文
-
配列構文
-
バインディングメソッド1：オブジェクト構文
:style="{color: currentColor, fontSize: fontSize + 'px'}"
スタイルの後にオブジェクトタイプが続く
- オブジェクトのキーはCSSプロパティ名です
- オブジェクトの値は特定の割り当てられた値であり、値はデータの属性から取得できます
2）バインド方法2：配列構文
<div v-bind:style="[baseStyles, overridingStyles]"></div>
- スタイルの後に配列型が続く
- 複数の値はに分割することができます
3つの計算されたプロパティ
1.計算されたプロパティとは何ですか？
データ内の一部のデータは、補間構文を使用してテンプレートに直接表示できることがわかっています。
ただし、場合によっては、表示する前にデータを変換したり、複数のデータを組み合わせて表示したりする必要があります。
- たとえば、firstNameとlastNameの2つの変数があり、フルネームを表示する必要があります。
- ただし、フルネームを複数の場所に表示する必要がある場合は、複数の{
{firstName}} {
{lastName}}を記述する必要があります 。
上記のコードを計算された属性に置き換えることができます。
- OK、計算されたプロパティがインスタンスの計算されたオプションに書き込まれていることがわかりました。
2.属性を計算するための複雑な操作
次の例のように、計算された属性でさらに複雑な操作を実行することもできます。
3.プロパティのセッターとゲッターを計算します
計算された各プロパティには、ゲッターとセッターが含まれています。
上記の例では、ゲッターを使用して読み取ります。
場合によっては、セッターメソッド（一般的には使用されません）を提供することもできます。
セッターを作成する必要がある場合、コードは次のとおりです。
4.計算された属性のキャッシュ
そのような質問を考えるかもしれません：メソッドと計算は私たちの機能を達成できるようですが、
なぜもう1つの計算プロパティが必要なのですか？
理由：計算された属性はキャッシュされます。複数回使用された場合、計算された属性は1回だけ呼び出されます。
