Vueとwebpackの基本的な使用紹介

MVVM

View id=app div
VM   new Vue({})
Model Vue    data:{}

Vueの命令
基本概念:
Vueの中の命令はすべてv-xxで始まるので、命令の作用、最終的にすべてデータを持って、私達の命令のラベルの中の内容をレンダリングします{{}}補間式
v-text/v-html直接テキストを表示し、Webページv-bindデータバインドを表示して、私たちのページに表示される値を動的に(一方向データストリームの体現)一方向データストリームを表示します.モデルが変更されると、私たちのビューは変化します.
注意:

v-bind     `:`
  :
v-bind:href="xxx"
:href="xxx"

v-on:イベント処理
イベントをトリガーした後、オブジェクトの処理関数が必要です.
注意:
1、私たちがトリガしたイベント処理関数にパラメータがない場合、v-onに直接関数名を書くことができます(()呼び出しを加えてもいいです)2、イベントをトリガした処理関数にパラメータがある場合、( ) 3、v-onを省略することはできません:@ 4と簡単に書くことができます.イベントはclickだけではありません.イベントタイプの表を参照してください.https://developer.mozilla.org/zh-CN/docs/Web/Events
v-model双方向データバインド
モデル----->ビュー----->モデル
注意点:
1、すべてのhtml要素がv-modelを使用できるわけではありません.一般的にはvalueの値を持つhtml要素が2、双方向データでバインドできる原理Angular:汚値検査Vue:属性検査/ハイジャックhttp://www.cnblogs.com/kidney/p/6052935.html https://segmentfault.com/a/1190000006599500
v-if/v-show条件レンダリング
注意:
1、v-else要素はv-ifまたはv-else-if要素の後ろに続く必要があります.そうしないと認識されません.
v-if&v-show違い:v-ifが偽物の場合、dom要素v-showは作成されません.偽物の場合、dom要素が作成され、スタイルで非表示になります.
v-show初期化のレンダリング効率は低くなりますが、v-ifの切り替え効率は向上します.
v-ifは、スイッチング中に条件ブロック内のイベントリスナーとサブコンポーネントが適切に破棄され、再構築されることを保証するため、「真の」条件レンダリングです.v-ifも不活性です.初期レンダリング時に条件が偽の場合、条件が初めて真になるまで条件ブロックのレンダリングが開始されません.それに比べて、v-showはずっと簡単です.初期条件が何であれ、要素は常にレンダリングされ、CSSに基づいて簡単に切り替えるだけです.一般に、v-ifはより高いスイッチングオーバーヘッドを有し、v-showはより高い初期レンダリングオーバーヘッドを有する.したがって、非常に頻繁に切り替える必要がある場合は、v-showを用いるのが好ましい.実行時に条件が変更されない場合は、v-ifを使用するとよい.
v-forリストレンダリング
誰に作用するか、v-forを誰に書くか.

     v-for="person in persons"
    v-for="(person,index) in persons"

Vueコンポーネント(Component)
基本概念:コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.同じ機能のコードを別のコンポーネントに抽出し、すべてのコードをid=appのdivに書かないでください.コンポーネントはカスタム要素です.
Vueコンポーネント定義の方法:5種類
1、先に定義して、更に2、定義して、登録して1歩所定の位置に着く3、私達のコンポーネントの内容のコードを定義して