導入
Vue.jsは、Webアプリケーションインターフェイスの構築に使用されるライブラリです
技術的には、VUE.JSは、MVVMモードのViewModelレイヤーに焦点を当てており、ビューとデータバインディングモデルを2つの方法で接続します。実際のDOM操作と出力形式は、指示（ディレクティブ）とフィルター（フィルター）に抽象化されています
哲学の分野では、MVVMデータバインディングAPIを可能な限りシンプルにするようにしてください。モジュール性と複合性も重要な設計上の考慮事項です。 Vueは包括的なフレームワークではなく、シンプルで柔軟なように設計されています。これを使用して、プロトタイプをすばやくまたは他のライブラリと混ぜて一致させて、フロントエンドスタックを定義できます。
vue。 JS APIは、Angularjs、knockoutjs ractive.js rivets.jsを指します。類似点にもかかわらず、Vue.jsは現在、いくつかの既存のフレームワークであなたの価値を得るための貴重な方法を提供していると思います
これらの用語のいくつかにすでに精通している場合でも、これらの用語の概念はvue.js以下で異なる場合があるため、概念の次の概要を渡すことをお勧めします。
コンセプトの概要
ViewModel
オブジェクトは、モデルとビューを同期します。 Vue.jsでは、ViewModelsはインスタンス化されたVueコンストラクターまたはサブクラスです
var vm = new vue（{ / * options * /}）これは、vue.jsを使用して開発者として対話する主なオブジェクトです。詳細については、クラス：Vueを参照してください。
ビュー
ユーザーが見た実際のHTML/DOM
vm。$ el //ビュー
Vue.jsを使用する場合、独自のカスタム命令を除いて、DOM操作にほとんど触れません。データが更新されると、ビューの更新が自動的にトリガーされます。ビューの更新は、各TestNodeノードに正確に到達できます。また、より良いパフォーマンスを提供するために、非同期にバッチされ、実行されます。
モデル
これは、わずかに変更されたJavaScriptオブジェクトです
vm。$ data //モデル
Vue.jsでは、モデルは単純なJavaScriptオブジェクト、データオブジェクトであり、プロパティとビューモデルを操作し、それらを観察してから通知を取得できます。 Vue.jsは、ES5のGetter/Setterを使用して、Data Object Huのプロパティを変換します。これにより、汚れたチェックなしで直接操作が可能になります。
データオブジェクトには適切な時期に変異があるため、修正することは、参照によるVM。$データの変更と同じです。これにより、複数のViewModelインスタンスが容易になり、同じデータが観察されます。
技術的な詳細については、インスタンスオプション：データを参照してください。
指令
プライベートHTML属性は、vue.jsにdomについていくつかの処理を行うように指示します
<div v-text = "message"> </div>
ここのdiv要素にはvテキスト命令があり、値はメッセージです。 Vue.jsに、ViewModeのメッセージ属性と同期したこのDivノードのコンテンツを保持するように伝えることを意味します
命令は、任意のDOM操作をカプセル化できます。たとえば、V-ATTRは属性要素を操作し、Array、V-on追加のイベントリスニングに基づいて要素をクローン化するv-Reepeatは、後で説明します。
口ひげバインディング
テキストやプロパティで、口ひげスタイルのバインディングを使用することもできます。それらはV-Text V-ATTRディレクティブに翻訳されます。例えば：
<div id = "person-{{id}}"> hello {{name}}！</div>便利ですが、注意を払う必要があることがいくつかあります。
画像SRC属性が設定されている場合、HTTPリクエストが送信されるため、テンプレートが初めて解析された場合は、V-ATTRを使用する方が良いでしょう。
HTMLを解析する場合、Internet Explorerは無効な内部スタイル属性を削除するため、IEバインディングインラインCSSをサポートする場合は、常にVスタイルを使用します
V-HTML内では、3つのブレースを使用して、エスケープのないHTMLを処理できますが、これにより潜在的なXSS攻撃が発生し、ウィンドウを開くことができます。したがって、データが絶対に安全である場合にのみこれを行うか、カスタムパイプラインフィルターを介して信頼できないHTMLをクリーンにすることをお勧めします
フィルター
この生データは、ビューを更新する前に機能を使用して処理できます。彼らは「パイプライン」指令またはバインディングを使用しています：
<div> {{message |大文字}} </div>DIVのテキストコンテンツが更新される前に、このメッセージの値はCapiteAlize関数を介して処理されます。詳細については、詳細なフィルターをご覧ください。
コンポーネント
Vue.jsでは、コンポーネントはVue.comPonent（ID、コンストラクター）に登録されたシンプルなビューモデルコンストラクターです。関連するIDを使用すると、別のビューモデルのテンプレートのV成分指令をネストできます。このシンプルなメカニズムにより、宣言されたビューモデルが再利用され、最新のブラウザや重いポリフィルを必要とせずにWebコンポーネントに似た方法で組み合わせます。アプリケーションをより小さなコンポーネントに分解することにより、結果は高度に分離され、保守可能なコードベースになります。詳細については、viewmodelsの作成を参照してください。
簡単な例
<div id = "demo"> <h1> {{title |大文字}} </h1> <ul> <li v-repeat = "todos" v-on = "click：done =！done"> {{content}} </li> </ul> </div> var demo = new vue（{el： '#demo'、data：{title： 'todos'、todos：[{done：true、content： 'learn javascript'}、{done：false、content： 'learn vue.js}]}}}）大まかな翻訳、エラーを指摘してください