(一)vue指令


1.基本コード




  
  Document
  
  



  
  

{{ msg }}

// Vue // , , Vue // new vm , MVVM VM var vm = new Vue({ el: '#app', // new Vue , // data MVVM M, data: { // data , el msg: ' Vue' // Vue , , DOM } })

2.v-cloak
v-cloakを使用すると、補間式が点滅する問題を解決できます.
3.v-text
v-textは要素の元の内容を上書きしますが、補間式は自分のこのプレースホルダを置き換えるだけで、要素全体の内容を空にすることはありません.デフォルトv-textでは点滅の問題はありません.
4.v-bind:
v-bind:vueで、属性をバインドするためのコマンドを以下に略記します.
5. v-on:
v-on:イベントバインドメカニズム
@
6.イベント修飾子
.stop泡立ち止め
.preventデフォルトイベントのブロック
.captureイベントリスナーを追加する際のイベントキャプチャモードの使用
.selfは、イベントがサブエレメントではないなどのエレメント自体でトリガーされた場合にのみコールバックをトリガーします.
.onceイベントは1回のみトリガーされます
7.v-model
v-bindはデータの一方向バインドしか実現できず、MからVに自動的にバインドされ、データの双方向バインドを実現できない.v-model命令を使用すると、フォームメタとModel中のデータの双方向データバインドを実現できる.v-modelはフォーム要素でのみ使用できます.
8.v-for
反復配列、オブジェクト属性、数値
9.v-ifとv-show
v-ifの特徴:毎回要素v-showを再削除または作成する特徴:DOMの削除と作成操作は毎回行われず、要素のdisplay:noneスタイルを切り替えただけ
v-ifスイッチングパフォーマンス消費量が高いv-show初期レンダリング消費量が高い
エレメントが頻繁に切り替える場合は、v-ifではなく、v-showを推奨します.エレメントがユーザーに表示されない可能性がある場合は、v-ifを推奨します.