Vue.jsテンプレート、命令
テンプレート構文の概要
1、フロントエンドレンダリングの理解方法
HTMLタグにデータを埋め込み、一般的にAjaxを使用してバックグラウンドからデータを検索し、テンプレート()を結合します.
2、フロントエンドレンダリング方式
2.1.原生js接合文字列
文字列を使用してhtmlラベルにパッチを適用します.たとえばjsでパッチを適用します.
giao'.
欠点:コードが規範的ではなく、メンテナンスが難しい.
2.2、フロントエンドテンプレートエンジンの使用
文字列のつなぎ合わせに比べて、コードは明らかに規範化されており、独自のテンプレート文法規則を持っており、プログラマーはこの規則に従い、コードのメンテナンス性が大幅に向上しています.
欠点:イベントメカニズムを専門に提供していない.レンダリング後にjsを使用してイベントを追加する必要があります.
2.3、vue特有のテンプレート構文を使用する
1)、補間式
2)、指令
3)、イベントバインド(処理)
4)、属性バインド
5)、スタイルバインド
6)、分岐循環構造
3、指令
3.1、指令とは何ですか.
カスタムアトリビュートとは?命令の本質はカスタム属性です.命令のフォーマット:vで開始します(たとえば、v-cloak).これはvueの著者がどのように設計したかによって異なり,我々は使用するだけでよい.
3.2、v-cloak指令用法
補間式には「フラッシュ」の問題がありますが、この問題をどのように解決しますか?v‐cloak命令を導入した.この問題を解決する原理:まず非表示にし、値を置き換えた後、最終的な値を表示します.

1、 css     。
    [v-cloak]{
        display:none;
    }
2、              v-cloak  。
    
{{msg}}
    
  ：       ，          ，            。

3.3、v-text指令
ラベルにテキスト値を挿入する場合は、v-textラベルを使用します.補間式よりも簡潔で、フラッシュの問題はありません.ただし、補間式では演算子を使用できますが、できません.

  ，msg         ，  msg   hello world       
hello world

3.4、v-html指令

​ 填充HTML片段，但是存在安全问题，即容易受到XSS攻击，本地网站内部数据可以使用，来自第三方的数据不可用。不是很推荐使用。

  ，title1      html  ，  title1   
hello world
       
hello world

3.4、v-pre指令

​ 如果想在页面是直接展示{{msg}}，而不是插值表达式解析的结果，就可以使用v-pre指令，它可以显示原始信息，跳过编译过程。使用方法如下。

{{msg}}

4、応答式指令
応答式とは?
htmlでのレスポンス:画面サイズの変化によるスタイルの変化
データの応答式:データの変化はページの変化を招き、例えばコンソールでvmの属性を変更し、ページのデータも変化する.
データバインドとは?
データバインディングとは、ラベルにデータを埋め込み、補間式を使用したデータバインディングのデフォルトは応答式です.
4.1、v-once指令
プロパティを1回だけコンパイルし、その後応答機能を持たない場合は、v-onceラベルを使用します.すなわち,コンパイル時にのみ応答式を持つ.応答するデータを変更する必要がない場合は、v-onceを使用してパフォーマンスを向上させることができます.
5、双方向データバインド
双方向データバインドとは?
vmのプロパティをページに変更しました.これをデータの対応と呼びます.ページのプロパティを変更してもvmのデータを変更できます.このとき、双方向のデータバインドです.つまり、どちらかを変更すると、他方のデータに影響します.
5.1、v-model指令
v-model命令を使用して双方向のデータバインドを実現

補間式のデフォルトでは、双方向データバインドがサポートされています.