4. 手順
指示とは何ですか？
コマンド
（ディレクティブ）に
は
V
が付いています
-
特別なプロパティのプレフィックス。たとえば、エントリケースの
v-model
は
双方向バインディングを表します
4.1。補間式
4.1.1。中
括弧
フォーマット：
説明：
式は
JS
構文を
サポートし、
js
組み込み関数を
呼び出すことができます（
戻り値が
必要です
）
式は結果を返す必要があります。たとえば、
1 + 1の
場合、次のような結果のない式は使用できません
。vara = 1 + 1;
Vue
インスタンスで定義されたデータまたは関数を直接取得でき
ます
4.1.2。
補間の点滅
{
{}}
を使用
すると、インターネットの速度が遅いときに問題が発生します。データがロードされていない場合、ページには元の
{
{}}
が表示され、ロード後に正しい番号が表示されます
データによると、それは補間フリッカーと呼ばれています。効果は次のようになります（最新の
vueには
そのような問題は
ほとんどありません）。
4.1.3. v-text
和
v-html
{ {}}の代わりに
v-text
および
v-html
命令を
使用してください
説明：
- v-text ：要素にデータを出力します。出力データにHTMLコードがある場合は、通常のテキストとして出力されます。
- v-html ：要素の内部にデータを出力します。出力データにHTMLコードがある場合は、レンダリングされます。
4.2。vモデル
現在の
v-text
と
v-htmlは
一方向のバインディングと見なすことができます。データはビューのレンダリングに影響しますが、その逆はできません。次に学ぶ
vモデル
は2倍です
バインドするには、ビュー（
View
）とモデル（
Model
）が相互に影響します。
双方向バインディングであるため、ビューでデータを変更する必要があります。これにより、ビューの要素タイプが制限されます。
v-model
の現在
利用可能な要素は次のとおりです。
- 入力
- 選択する
- textarea
- チェックボックス
- 無線
- コンポーネント（Vueのカスタムコンポーネント）
- 複数の場合のチェックボックスがに対応するモデル、のタイプのモデルは配列であり、値の単一のチェックボックスがあるブール型
- 無線対応値が値値に入力されます
- inputとtextareaに対応するデフォルトのモデルは文字列です
- 選択配列に文字列に単一選択相当し、複数選択対応を
4.3。v-on
4.3.1。
基本的な使用法
v-on
命令は、イベントをページ要素にバインドするために使用されます。
文法：
省略構文：
v-on：
イベント名
= "js
フラグメントまたは関数名
"
4.3.2。
イベント修飾子
イベントハンドラで
event.preventDefault（）
または
event.stopPropagation（）
を呼び出すこと
は非常に一般的な要件です。私たちが
これはメソッドで簡単に実現できますが、より良い方法は次のとおりです。メソッドには、
DOM
イベントの詳細を処理するのではなく、純粋なデータロジックしかありません
。
この問題を解決するために、
Vue.jsは
提供イベント修飾子
のために
Vを
-
に
。前述のように、修飾子はドットで始まる命令接尾辞で表されます。
- .stop ：イベントのバブリングを停止します
- .prevent ：デフォルトのイベントが発生しないようにします
- .capture ：イベントキャプチャモードを使用します
- .self ：要素自体のみがイベントの実行をトリガーします。（バブリングやキャプチャは実行されません）
- .once ：1回だけ実行
4.4。v-for
データをトラバースしてページをレンダリングすることは非常に一般的な要件です。
これは、
Vueの
v-for命令
によって実現され
ます。
4.4.1。
配列をトラバースします
文法：
v-for = "item in items"
- 項目：トラバースする配列は、vueのデータで定義する必要があります。
- アイテム：ループ変数
4.4.2。
配列の添え字
トラバーサルのプロセスで、配列のインデックスを知る必要がある場合は、2番目のパラメーターを指定できます。
文法
- 項目：繰り返される配列
- item ：反復によって取得された配列要素のエイリアス
- index ：0から始まる、繰り返される現在の要素のインデックス。
4.4.3。
トラバースオブジェクト
配列の反復に加えて、v-for
はオブジェクトを反復することもできます。構文は基本的に似ています
- 1つのパラメータで、オブジェクトの値を取得します
- 2つのパラメーターの場合、最初のパラメーターは値で、2番目のパラメーターはキーです。
- .3パラメータの場合、3番目は0からのインデックスです開始
4.4.4。キー
とき
Vue.jsが
使用する
Vを
-
するために
レンダリングされた要素のリストを更新し、それが使用する
「
インプレース再利用
」
戦略
によって、デフォルトを。データ項目の順序が変更された場合、
Vue
は
データ項目の順序に一致するように
DOM
要素を移動するのではなく、
ここで各要素を再利用し、特定のインデックスの下でレンダリングされていることを確認してください
各要素の。
キー
機能
を使用すると、レンダリング効率を効果的に向上させることができます。一般に、トラバーサル後にコレクション要素を追加または削除する場合、
キーの
方が意味があります。
ただし、この機能を実現するには、
Vueに
いくつかのヒントを与えて、各ノードのIDを追跡できるようにする必要があり
ます。これにより、既存の要素を再利用および並べ替えることができます。
各アイテムに一意の
キー
属性
を提供します。理想的な
キー
値は、各アイテムの一意の
ID
です
。つまり、
キー
はアイテムの一意の識別子です。
例：
- ここでは特別な構文が使用されます:: key = ""は後で説明します。これにより、vueの属性を読み取り、それらをキー属性に割り当てることができます。
- ここでバインドされるキーは配列のインデックスであり、一意である必要があります