VUEのスクラッチ(II)の指示

、V-テキストおよびV-HTML

       <スパンV-テキストは= "MSG"> </ span>を

  <divのV-HTML = "HTML"> </ div>

  注意事項:

     1、V-テキスト及びV-HTML区別InnerTextプロパティとinnerHTMLのと同様に、V-テキストレンダリングテキスト形式との差だけ、タグが識別しレンダリングすることができるV-HTML、

     簡単にXSS攻撃につながるので2は、サイトの動的なレンダリングに任意のHTMLは、非常に危険です。唯一の信頼できるコンテンツのV-htmlの内容ではなく千万ユーザーが送信しました

     図3に示すように、アセンブリ内の単一のファイルに、スタイルは、V-HTML内スコープ、またはwebpack.config.js追加モジュール内(CSS-ローダファイルにCSSモジュールVUEローダを使用してグローバルスタイルを使用することができ適用されません:真)

二、V-ショーとV-IF

   <H1 V-ショー= "OK">こんにちは!</ H1>

   <H1 V-IF = "素晴らしい"> Vueのは素晴らしいです!</ H1>

      注意事項:

   命令として、それは要素に追加されなければならない1、場合V-あります。しかし、あなたは複数の要素の間で切り替えたい場合は?この時点で、それは<テンプレート>目に見えないパッケージ要素として要素、およびV-場合は、上記の使用することができます。最終的なレンダリング結果は、<テンプレート>要素は含まれません。

    <テンプレートV-IF = "OK">

    <H1>タイトル</ H1>

    <P>第1項</ P>

    <P>段落2 </ P>

    </テンプレート>

   図2は、V-そうなら他のJSのように、V-IFと一致するために使用することができます

   3、V-ショーは、単にCSSプロパティの表示要素を切り替えます        

   4、不活性V-あれば、それがレンダリングされるときにのみ、最初に真である、V-ショーの条件がレンダリングされますどんなにのような

   図5に示すように、イベントリスナーとサブアセンブリは、適切な破壊と再構築、及びV-ショーあろうV-場合単に隠し要素の表示を切り替えます

   図6に示すように、特徴的なV-IF V-場合まれ使用する場合、頻繁に切り替える際の切り替えオーバーヘッドは、Vショーを使用するように、比較的大きい決定

   7、V-場合よりもV-ため、Vの優先度に関連して使用されるV-IF高いです

三、V-用およびキー

       <DIV V-ため= "(項目、インデックス)の項目における"> </ div>

  <DIV V-ため= "オブジェクト内(ヴァル、キー)"> </ div>

  <DIV V-ための "オブジェクト内(ヴァル、名前、索引)" => </ div>

  <V-バインドのdiv V-用= "項目の項目":= "item.id" キー>

      <! - コンテンツ - >

  </ div>

  注意事項:

    1、VUE「多重古い」データ要素は、要素の位置が変更されていないときに変化するが、更新データ要素は、このモデルは非常に効果的です

    2が、古い弱点の再利用故意にデフォルトの動作に依存していない限り、要素間の依存関係を破壊するには、古い再利用するためにキーを配置することをお勧めします

    3、キー値は一意の識別子である必要があり、重複するキー値が表示されないことができます

四、V-上のモニター・イベント

          1、<ボタンVオン:クリック= "カウンター+ = 1"> 1 </ button>を追加します。式は、イベントで使用することができます

     2、<ボタンVオン:=「挨拶」をクリック>名前グリー<ボタン/>複合イベント処理ロジック際のメソッドを呼び出すために使用することができます

     3、:、ステートメントはメソッドを呼び出すことができるJavaScriptのインライン何</ button>の言う<ボタンVオン= "( '何')と言う" をクリック>引数の受け渡し

     4、イベント修飾子:<! - 拡散を防ぐために、継続してイベントをクリックします - >

    <a v-on:click.stop="doThis">する</a>

 

    <! - イベントは、もはやページをリロード - >

    <フォームのV-上:submit.prevent = "をonSubmit"> </フォーム>

 

    <! - 修飾子は、直列に接続することができます - >

    <a v-on:click.stop.prevent="doThat">する</a>

 

    <! - 唯一の修飾子 - >

    <フォームのV-上:submit.prevent> </フォーム>

 

    <! - イベントリスナーを追加する使用イベントキャプチャモード - >

    <! - それは内部処理要素に引き渡さ前に、このイベントは、このプロセスの最初の要素自体をトリガ - >

    <divのV-上:click.capture = "doThis"> ... </ div>

 

    <! - ハンドラが現在の要素自体トリガーされるだけEvent.target - >

    <! - つまり、イベントが内部の要素からトリガーされません - >

    <divのV-上:click.self = "doThat"> ... </ div>

    <! - クリックイベントは一度だけトリガされます - >

    <a v-on:click.once="doThis">する</a>

    <! - とき `key` is` Enter`` vm.submit() `だけ呼び出さ - >

    <入力V-上:keyup.enter = "提出">

  修飾子を使用する場合は、順序が重要であり、適切なコードが同じ順番で生成されます。そのため、使用が  v-on:click.prevent.self できなくなり、すべてのクリックを、しかし、  v-on:click.self.prevent 唯一の要素自体のクリックを防止します。

おすすめ

転載: www.cnblogs.com/wyongz/p/11118928.html