ディレクトリ
MVVMと1.MVC差
パターンMVCモデルはModel-View-Controller（ - - ビューコントローラモデル）を表しています。
ビュー（ビュー）：ユーザーインターフェース。
コントローラ（コントローラ）：ビジネス・ロジック・
モデル（モデル）：データ操作（CRUD）
（ルアンYifengログから撮影された画像）は次のように対話モードです。
ユーザーは、ビューの更新、ステータスを変更するために、モデルビューの直接の要求により、その後、ビューにコマンド（DOMイベント）を送信することができ
、ユーザーはまた、（URLなhashchangeトリガイベントの変更）コントローラに直接コマンドを送信することができ、その後、コントローラビューに送信されました
MVVMはモデル - ビュー - ViewModelに短縮形です。それは本質的にMVCの改良版です。
ビュー（ビュー）：ユーザーインターフェース。
（ViewModelに）に結合する双方向データ：ビューは、リクエストといういくつかのアクションを実行するためには、ViewModelにに結合しています。ターンでは、モデルとのViewModel通信、UIの応答更新するために、それを伝える
モデル（モデル）：データ操作
インタラクティブモードでは、以下の通りであります：
概要： MVCとMVVM実際、違いは重要ではありません。これは、設計の一種です。主にMVCコントローラでのViewModelにMVVMへと進化。MVVMは、主にDOM操作の数が多いユーザーエクスペリエンスに影響を与え、ページのレンダリングパフォーマンスの低下、遅いロード時間をMVC解決します。VMは、モデルビュー内のデータや変更があるが、他のように変化する際に結合双方向のデータを提供します
基本的なコード構造2.Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!--将来new的Vue的实例会控制这个元素的所有内容-->
<div id="app"></div>
<script src="../../js/vue.js"></script>
<script>
var vm = new Vue({
el: "#app", //当前我们new的这个Vue实例要控制页面上的哪个区域
data: {
msg: "HelloWorld" //data属性中，参访的是el中要用到的数据
},
methods: {
},
});
</script>
</body>
</html>
一般的なコマンド3.Vueの使用
1.補間式{} {}、データページに挿入されたデータは、プレースホルダ自体を交換し、それは要素の元の内容はクリアされません
2.v-マントを:(スタイルディスプレイを設定して：なし）溶液補間表現フリッカ
3.vテキスト：（V-テキスト = 'データ属性名に「）フリッカ、要素の元の内容を上書きし
4.v-HTML：（V-HTML =' name属性データで「）HTMLタグには、要素の元の内容上書き
5.vワンス：データを変更しません。V-一度表示とPラベルはMSGの唯一の初期値で、MSGは変更で変更することはありません。
6.vバインド：（V-バインド ：タイトル= " + '法的な構文のjs' 'の属性名データ）：と略記結合特性のため、
7.v-ON：（ON-V：クリック= @と略記結合事象のための「ショー」）
アプリケーションの状態と結合した形要素間の双方向データ：8.vモデル
ループ命令、アレイまたはオブジェクトをレンダリングベースリスト、：9.v-用使用するキー値を遵守しなければなりません。
10.v-IF：真または偽の条件式の値、破壊または再構築label要素。pタグのレンダリングフラグをfalseにレンダリングするためではない、本当です
11.vショー：真または偽の条件値の発現、スイッチング素子属性表示CSS。フラグがnoneに偽のpタグの表示プロパティに設定されます。
<div id="app">
<p v-once>{{ msg }}</p>
<p v-cloak>{{msg}}显示出来了</p>
<p v-text="msg"></p>
<p v-html="htmlmsg"></p>
<p v-once>{{msg}}</p> //显示msg的初始值，不会随着msg被修改而变化。
<a v-bind:href="url"></a>
<a :href="url"></a> //简写
<button v-on:click="show">BOTTON</button>
<button :click="show">BOTTON</button> //简写
<input v-model="name"></input> //输入值的改变，会即时在下面显示
<p>{{ name }}</p>
<ul>
<li v-for="(item,index) in myarray"> {{ item }} </li>
</ul>
<p v-if="flag">123</p> //flag 为true 渲染<p>标签，false 不渲染
<p v-show="flag">123</p> //flag 为 false 将<p> 标签的 display属性设置为 none
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "HelloWorld" ,
htmlmsg:"<p>hello world</p>",
name:"",
url:"www.baidu.com",
myarray:[1,2,3],
flag:true
},
methods: {
show(){
console.log(123)
}
},
});
</script>
Vショーの要約で使用する場合のV：
V-場合またはしない制御要素の明示的および暗黙的なプレゼンスのDOMノードによって制御され; V-ショーはDOM要素の表示スタイル、ブロックディスプレイによって提供され、いずれも隠され;
V V-ショーより高い初期レンダリング消費;スイッチングの高い消費-if
非常に頻繁に切り替えるには、好ましくはV-ショーを使用して、条件はめったにV-かのより多くのを使用して、実行時に変化していない場合良いです。
4.イベント剤（.stop / .prevent / .capture / .self / .once）
<a v-on:click.stop="doThis"></a> //阻止单击事件冒泡
<form v-on:submit.prevent="onSubmit"></form> //阻止默认事件，默认提交时重载页面，使用后不会重载页面
<a v-on:click.stop.prevent="doThat"></a> //修饰符可以串联使用，并且使用的顺序很重要
<div v-on:click.capture="doThis">...</div> //添加事件监听器时使用事件捕获模式
<div v-on:click.self="doThat">...</div> //点击自身时才会触发函数，冒泡或捕获都会略过自身
<a v-on:click.once="doThis"></a> //点击事件将只会触发一次
5.Vueバインディングスタイルのファッション
V-バインド：クラス：動的に切り替えるクラス、V-バインド：クラス命令してもよい従来のクラス属性とも共存
<div class="myclass" v-bind:class="{ active: isActive }"></div>
データ：
data: {
isActive: true,
hasError: false
}
レンダリング結果：
<div class="myclass active"></div>
V-バインド：スタイル：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
レンダリング結果：
<div style="color: red; font-size: 30px;"></div>
