Vueは小さくて軽量のJavaScriptライブラリです。シンプルで理解しやすいAPIがあり、Webアプリケーションを開発するときに開発者がより簡単で便利になります。実際、Vueを常に誇りに思っているのは、その利便性、実行、柔軟性です。
このチュートリアルの目的は、いくつかの例を使用して、いくつかの基本的な概念と機能の概要を示すことです。他のチュートリアルでは、VUEを使用してスケーラブルなプロジェクトを構築するためのVUEのより有用な機能を学習します。
MVVMデータバインディング
MVVMの本質は、データのバインディングを介してビューとモデルをリンクして、データの変更を自動的にマッピングして更新を表示することです。 VUE.JSは、データバインディングAPIの設計におけるAngularの命令メカニズムを借用します。ユーザーは、特別なプレフィックスを使用してHTML属性を介してデータバインディングを実装したり、一般的なCurly Braceテンプレート補間を使用したり、フォーム要素の双方向のバインディングを使用したりできます。
<！ - directive-> <span v-text = "msg"> </span> <！ - 補間 - > <span> {{msg}} </span> <！ - 双方向結合 - > <入力v-model = "msg">補間は、テンプレートの執筆を容易にするためだけに、本質的に指示です。テンプレートの編集中、Vue.jsは、ダイナミックアップデートが必要な各DOMノードのディレクティブオブジェクトを作成します。命令オブジェクトによって観察されたデータが変更されるたびに、バインドされたターゲットノードで対応するDOM操作が実行されます。命令ベースのデータバインディングにより、特定のDOM操作を命令定義に合理的にカプセル化することができます。ビジネスコードは、データ状態でテンプレートと操作を含むだけで、アプリケーションの開発効率と保守性が大幅に向上する必要があります。
Angularとは異なり、Vue.jsのAPIには、モジュール、コントローラー、スコープ、工場、サービスなどの複雑な概念があり、すべてが「ViewModelインスタンス」に基づいています。
<！ - テンプレート - > <div id = "app"> {{msg}} </div> //ネイティブオブジェクトはデータvar data = {msg： 'hello！'} // viewmodelインスタンスvar vm = new vue（{//ターゲット要素el： '＃app'、//初期データ：データを提供するデータ：データを提供するターゲット要素El： '＃app'を選択します）レンダリング結果：
<div id = "app"> hello！</div>
レンダリング中、VUE.JSはデータの動的結合も完了しています：data.msgの値が変更された場合、DOMは自動的に更新されます。とてもシンプルで理解しやすいのではありませんか？さらに、Vue.jsは、カスタムディレクティブとフィルターのAPIも大幅に簡素化しました。角度開発の経験がある場合は、非常に迅速に開始されます。
データ観察の実装
Vue.jsのデータ観察の実装原則は、Angularのデータ観測とは本質的に異なります。 Angularを知っている読者は、Angularのデータ観察が汚れたチェックメカニズムを使用していることを知っているかもしれません。各命令には、ウォッチャーと呼ばれるデータの観察に使用される対応するオブジェクトがあります。範囲には多くのウォッチャーがいます。インターフェイスを更新する必要があるときはいつでも、Angularは現在の範囲内のすべてのウォッチャーを介して反復し、それらを1つずつ評価し、以前に保存された古い値と比較します。評価結果が変更された場合、対応する更新がトリガーされます。このプロセスは、ダイジェストサイクルと呼ばれます。汚いチェックには2つの問題があります。
データの変更は、現在の範囲内のすべてのウォッチャーを再評価する必要があることを意味するため、ウォッチャーの数が膨大な場合、アプリケーションのパフォーマンスは必然的に影響を受け、最適化することが困難です。
データが変更されると、フレームワークは変化の発生を積極的に検出できません。 Digestサイクルを手動でトリガーして、対応するDOMアップデートをトリガーする必要があります。 Angularは、DOMイベントハンドラー機能のダイジェストサイクルパーツを自動的にトリガーすることにより、この問題を回避しますが、ユーザーが手動でトリガーする必要がある状況はまだ多くあります。
Vue.jsは、依存関係収集に基づいて観察メカニズムを使用します。原則として、それは古いMVVMフレームワークノックアウトと同じです。依存関係収集の基本原則は次のとおりです。
ネイティブデータを「観測可能なオブジェクト」に変換します。観測可能なオブジェクトは、評価または割り当てられます。
ウォッチャーの評価プロセス中、取得される各観測可能なオブジェクトは、現在のウォッチャーをサブスクライバーとして登録し、現在のウォッチャーの依存関係になります。
依存する観察可能なオブジェクトが割り当てられると、すべてのサブスクライバーに、対応する更新を再評価およびトリガーするように通知します。
収集に依存することの利点は、データの変化を正確かつ積極的に追跡できることであり、上記のダーティチェックに2つの問題はないことです。ただし、ノックアウトなどの従来の依存関係コレクションの実装では、通常、観察可能なオブジェクトを作成するためにネイティブデータをラップする必要があります。値を取得して値を割り当てるときに、関数呼び出しを使用する必要があります。ライティング方法は面倒で、データ操作を実行する際に十分に直感的ではありません。同時に、複雑なネストされた構造を持つオブジェクトのサポートは理想的ではありません。
Vue.jsはES5のObject.DefinePropertyメソッドを使用して、ネイティブデータオブジェクトのプロパティをゲッターとセッターに直接変換し、これら2つの機能内で依存関係収集とトリガーを実装し、ネストされたオブジェクト構造を完全にサポートします。配列の場合、配列の変更は、プッシュなどの配列を包む可変方法によって聞きます。これにより、vue.jsのデータを操作してネイティブオブジェクトを操作することがほとんど不可能になります[注：属性を追加/削除する場合、または配列で特定の要素を変更する場合、obj。$ add（key、value）などの特定の関数を呼び出す必要があります。これは、ES5の言語機能によって制限されます。 ]、データ操作のロジックはより明確でスムーズであり、サードパーティのデータ同期ソリューションとの統合もより便利です。
コンポーネントシステム
大規模なアプリケーションでは、分業、再利用、保守性のために、アプリケーションを複数の比較的独立したモジュールに抽象化する必要があります。より伝統的な開発モデルでは、多重化を検討するときにのみコンポーネントの一部を作成します。しかし、実際、アプリケーションのようなUIは、コンポーネントツリーで完全に構成されていると見なすことができます。
したがって、コンポーネントは、vue.jsの設計のコアコンセプトとして使用されます。すべてのvue.jsアプリケーションはコンポーネントを中心に開発されていると言えます。
Vue.jsコンポーネントの登録は非常に簡単です：
vue.component（ 'my-component'、{//テンプレートテンプレート： '<div> {{msg}} {{privatemsg}} </div>'、//パラメーターのプロップを受け入れる：{msg：string <br>}、//プライベートデータ、返信する必要があります。 '成分！' } }}）登録後、親コンポーネントテンプレートの子コンポーネントをカスタム要素として呼び出すことができます。
<my-component msg = "hello"> </my-component>
レンダリング結果：
<div>こんにちはコンポーネント！</div>
Vue.jsコンポーネントは、事前定義された動作を持つViewModelクラスとして理解できます。コンポーネントは多くのオプションを事前に定義できますが、最も重要なオプションは次のとおりです。
ビルドツールに基づくシングルファイルコンポーネント形式
Vue.JSのコアライブラリは、基本的なAPIのみを提供し、アプリケーションのファイル構造を整理する方法についてあまり多くの制約を持っていません。ただし、大規模なアプリケーションを構築する場合は、Webpack + Vue-Roaderの組み合わせを使用してコンポーネント開発をより効率的にすることをお勧めします。
WebPackは、Tobias Koppersが開発したオープンソースのフロントエンドモジュールビルディングツールです。その基本機能は、モジュール形式で記述された複数のJavaScriptファイルを1つのファイルにパッケージ化し、CommonJSとAMD形式の両方をサポートすることです。しかし、ユニークなのは、さまざまなファイル形式の前処理ロジックを定義する強力なローダーAPIを提供し、JavaScriptモジュールとしてCSS、テンプレート、さらにはカスタムファイル形式を使用できるようにすることです。 WebPackは、自動チャンキングパッケージやオンデマンドのロード、画像リソース参照の自動位置付け、開発中のモジュールのホット交換など、オンデマンドの自動チャンキングパッケージやロード、ベース64インラインの意思決定など、ローダーに基づく多数の高度な機能を実装できます。
WebPackローダーAPIに基づいてVue-Loaderプラグインを開発したため、Vueコンポーネントをこのような単一のファイル形式（*.Vue）で記述できます。
<Style> .My-Component H2 {color：Red;} </style> <template> <div> <h2> hello {{msg}}} </h2> <other-component> </other-component> </div> </template> <script> // commonjs module paptent = require othine other componte '）// = {data：function（）{return {msg： 'vue-loader'}}、コンポーネント：{'other-component'：othercomponent}} </script>同時に、 *.vueファイルで他のプレプレセッサを使用して、対応するWebpackローダーをインストールすることもできます。
<style lang = "stylus">。私のコンポーネントh2色赤</style> <テンプレートlang = "jade"> div.my-component h2 hello from {{msg}} </template> <script lang = "babel"> // babelを使用してbabelを使用してes2015exportデフォルトをコンパイルします}}} </script>このようなコンポーネント形式は、コンポーネントのテンプレート、スタイル、ロジックの3つの要素を同じファイルに統合します。これは、開発、再利用、メンテナンスに便利です。さらに、Vue.JS自体はコンポーネントの非同期負荷をサポートし、Webpackのチャンキングパッケージ機能と組み合わせて、コンポーネントの非同期負荷を需要のあるものに簡単に実装できます。
その他の機能
vue.jsには、言及する価値のある他のいくつかの機能があります。
new vue（）を使用してVueインスタンスを作成します
最初にHTMLページを初期化してから、VueのJSファイルを導入する必要があります。それを紹介する方法はたくさんあります。 VueのCDNをスクリプトに導入したり、公式WebサイトにVueのMin.jsをダウンロードしたり、NPMを使用してVue依存関係をインストールしたりできます。便宜上、この記事はCDNを使用して導入されています。
<！doctype html> <html> <head> <title> crated </title> </head> <body> <script src = "http://cdn.jsdelivr.net/vue/1.0.16/Vue.js"> </scriti
開発しているときは、非圧縮バージョンを使用していることを確認してください。非圧縮バージョンは有用な詳細な警告を提供し、コードの作成に多くの時間を節約できます。
最初に体内にdivを書き、Vueインスタンスを作成してから、インスタンスとDivをバインドします。
新しいVUEインスタンスを作成するときは、Vue（）コンストラクターを使用して、インスタンスのマウントポイントを指摘します。このマウントポイントは、分割するVueインスタンスの境界です。マウントポイントとインスタンスの境界は1つずつ対応します。マウントポイントのインスタンス境界内のトランザクションのみを処理できますが、マウントポイントのインスタンス境界外のトランザクションは処理できません。
VUEインスタンスのマウントポイントを設定するためのパラメーターは「EL」であり、ELの値はDOM要素によって定義できます。
<！doctype html> <html> <head> <title> crated </title> </head> <body> <div id = "vueinstance">これは、インスタンスマウントポイントのインスタンス境界</div> <src = "http://cdn.jsdelivr.net/vue/1.0.16/> <.16/を//新しいVueインスタンスを作成し、マウントポイントvar v = new Vue（{el： '#vueinstance'}）を設定します。 </script> </body> </html>上記のように、新しいVue（）は新しいインスタンスを作成し、インスタンスのマウントポイントとしてDOM要素を指定します。マウントポイントを定義するとき、CSSセレクターのIDを使用して定義します。インスタンス化された名前は、後でコールするために単独で定義することもできます。
双方向データバインディングにV-Modelを使用します
V-Modelを使用して入力入力ボックスをバインドできるため、動的に使用してデータオブジェクトの値を取得できます。 HTML要素の属性と同様に、V-Modelを指定されたプロパティと考えることができます。ここでの双方向のデータ結合は、入力、Textarea、Selectなどの多くのフォーム要素で使用できます。
VueはV-Modelコマンドを使用してデータをバインドします。このデータは、ユーザー入力操作を通じて更新されるデータです。
たとえば、以下の例では、入力タグのデータ名をバインドし、VUEインスタンスのデータオブジェクトに宣言を実装する必要があります。
<div id = "vueinstance">名前を入力してください：<input type = "text" v-model = "name"> </div>
<Script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> //
ユーザーが何回入力しても、この名前は自動的に更新されます。また、名前の値が変更された場合、名前がマップされている他の場所の値も変更されます。
この入力ボックスとマッピングの同期変更の理由は、Vモデル命令を使用して、基礎となるデータストリームを介してデータをバインドし、直接変更することです。これは、データの双方向の結合の概念です。
この概念を証明するために、$データを使用してデータのマッピングを印刷して表示できます。
<div id = "vueinstance"> neme your name：<input type = "text" v-model = "name"> <p> {{$ data | json}} </p> //＃1 <p> {{name}} </p> //＃2 </div> <script> var v = new vue（{el： '#vueinstance'、data：{name： '_appian'}}）; </script>1です：
$データは、Vueインスタンスによって観察されるデータオブジェクトです。必須タイプはオブジェクトであるため、JSONに変換できます。新しいオブジェクトに置き換えることができます。インスタンスは、データオブジェクトのプロパティをプロキシにします。
{{}}、2つの巻き毛の包装で補間します。ここに挿入された値は、$データによってリアルタイムで変化する値です。
| JSON、データを表示するためのより直感的な方法。また、json.stringify（）の効果と同様に、フィルターと見なすこともできます。
アイテム2：
{{name}}は、補間式に直接データ変数を挿入することと、名前の値を直接マッピングする2つの巻き毛装具を意味します。
Vueは、データの双方向の結合を実行するのが非常に簡単です。 JSまたはJQを使用してデータを制御することなく、Vモデル命令のみが必要です。上記の例からロジックを明確にできると思います。
イベントバインディングにV-onを使用します
Vueは、イベントリスニングとイベント配布にV-on命令を使用します。 Vueインスタンスでリスニングイベントをバインドする方法を作成し、クリックイベントをディスパッチする方法を作成できます。
次の例では、ボタンにバインドされているSAYメソッドを作成します。クリックの効果は、ユーザー名でウェルカムボックスをポップアップすることです。このメソッドをボタンに割り当てるには、VON：クリックしてイベントをバインドする必要があります。
<div id = "vueinstance">名前を入力してください：<入力タイプ= "text" v-model = "v-model ="> <button v-on：click = "say">クリック</button> //＃1 <ボタン @butth = "say"> click </button> //＃2 </div>へようこそ
<script> var v = new vue（{el： '#vueinstance'、data：{name： '_appian'}、method：{say：function（）{alert（ 'welcome' + this.name）;}}}）; </script>もちろん、クリックイベントをクリックするだけでなく、他のマウスイベント、キーボード入力イベント、その他のJSイベントタイプにバインドすることもできます。たとえば、v-on：mouseover、v-on：keydown、v-on：submit、v-on：keypress、v-on：keyup.13など、またはその他のカスタムイベント。
開発プロセス中に、イベントバインディングを頻繁に使用できます。 V-onを書くのは少し面倒なので、上記の例では、＃2の略語が＃1の2つの方法があります。 V-onの代わりに @を使用すると、ここではあまり言いません。
V-IFまたはV-Showを使用して、条件付き判断を下します
ログイン後にユーザーにウェルカムポップアップウィンドウを表示したい場合は、ログインしていない場合は、ログインインターフェイスを提供します。 Vueは、さまざまなログイン状態でディスプレイコンテンツを制御するためのV-IFおよびV-Show命令を提供します。
前の例を使用して、ログインステータスの値を使用してログインするかどうかを制御できます。それが本当なら、歓迎ポップアップウィンドウを見ることができるように入力ボックスとボタンが表示されます。ただし、誤っている場合（つまり、ログインしていません）、入力ボックスとアカウント番号、パスワードを入力するための送信ボタンのみが表示されます（当面は認証がなく、ログインステータスのみが変更されます）。
<div id = "vueinstance"> // loginstatusがtrueの場合に表示されるセクション<セクションv-if = "loginstatus">名前を入力：<入力型= "v-model =" name "> <button v-on：" = "fay">クリック</button> <button @button = "switchlogintatus"> logintatus "> logintatus"> logintatus "> logintatus"> logintatus " loginstatus is false <セクションv-if = "！loginstatus"> loginperson：<入力タイプ= "text"> loginpassword：<input type = "password"> <button @click = "switchloginstatus"> login </button> </section> </div>
<script> var v = new vue（{el： '#vueinstance'、data：{name： '_appian'、loginstatus：false}、Methods：{say：function（）{alert（ 'welcome' + this.name）;}、switchloginstatus：function：function（）{this.loginstatus =！これの実行はインスタンスVです。このポインティングは、自分で理解する必要がある質問であるため、ここでは話しません。
上記の例では、V-IFがV-Showに置き換えられている限り、同じ効果を取得できます。 V-IFとV-Showの両方がV-Elseをサポートしていますが、V-ELSEコマンドをバインドするタグの以前の兄弟要素には、V-IFまたはV-Showが必要です。
上記の例では、[ログイン]または「ログインアウト」ボタンをクリックするだけで、SwitchLoginStatusメソッドがトリガーされます。この方法がトリガーされている限り、ログインステータスのステータスは変化し（真と偽の切り替え）、それによりHTMLのV-IFの判断条件の結果の変更を変更します。ログインスタッサスの現在のブールステータスに基づいて、表示されたセクションは異なる状態のセクションです。
V-ShowとV-IFの違いは何ですか？
V-IFブロックを切り替えるとき、VUEのテンプレートにはデータバインディングまたはサブコンポーネントが含まれる場合があるため、VUEにはローカルコンパイル/アンインストールプロセスがあります。 V-IFは、スイッチ中の条件ブロック内のイベントリスナーとサブコンポーネントを適切に破壊し、再構築することを保証するため、実際の条件付きレンダリングです。
V -ifも怠zyです。最初のレンダリング中に条件が誤っている場合、何も行われません - ローカルコンパイルは、条件が初めて真実になると開始されます（コンパイルがキャッシュされます）。
対照的に、V -Showははるかにシンプルです - 要素は常にコンパイルおよび保存され、CSSに基づいて単純に切り替えるだけです。
一般的に言えば、V-IFは切り替え消費量が高く、V-Showは初期レンダリング消費量が高いです。したがって、V-Showを頻繁に切り替える方が良いため、実行時に条件があまり高くない場合はV-IFを変更する方が良いでしょう。
この違いは現在の開発にとって重要ではないかもしれませんが、プロジェクトの開発が大きくなると重要になるため、注意を払って注意を払う必要があります。
v-forから出力リストを使用します
あなたが電子商取引プラットフォームを実行しているビジネスマンの場合、製品リストの出力をレンダリングする必要がある多くのページが必要です。 v-forディレクティブは、「arrayobjの要素」の方法で「arrayobjのすべての要素をループする」と発音される配列オブジェクトをループすることを許可します。
次の例では、V-For命令を使用して製品リストをループアウトします。各製品はLIで、製品の名前、価格、製品タイプが出力されます。
<div id = "vueinstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el。価格}} - {{el。カテゴリ}} </li> </ul> </div> <Script> var v = new Vue（{el： '#vueinstance'、data：{crowts：{name： 'microphone'、frice：25、category： 'electronics'}、{name： 'laptopケース'、価格：15、カテゴリ： 'アクセサリー'}、{name cleaner '、' laptory： 'lapt：' catmestory： 'name：' catmestory： 'name：' catmestory： 'camearsory：' camear 70、カテゴリ： 'Electronics'}、{name： 'mouse'、rice：40、category： 'electronics'}、{name： 'earphones'、frice：20、category： 'electronics'}、{name： 'Monitor'、{name： 'Monitor'、{name： 'electronics'}]}}）; </script>>>>もちろん、データの配列オブジェクトは、上記の定義なしで定義できます。データベースからインポートするか、Ajaxリクエストを使用して取得できます。これは、v-forのデモンストレーションのためだけです。
アレイオブジェクトで製品の対応する添え字を取得する必要がある場合があります。 $ indexで入手できます。
//＃1 <li v -for = "el in products"> {{$ index}} - {{el.name}} - ￥ {{el。価格}} - {{el。 category}} </li> //＃2 <li v -for = "（index、el）in products"> {{index}} - {{el.name}}} - ￥ {{el。価格}} - {{el。カテゴリ}} </li>計算されたプロパティ
属性の計算のアプリケーションシナリオでは、他の変数によって計算する必要がある変数値がある場合に使用されます。
たとえば、ユーザーが入力ボックスに番号xを入力すると、数字の正方形x²がユーザーに自動的に戻ります。入力ボックスデータをバインドする必要があり、その後、データが変更されると、すぐに正方形が計算されます。
<div id = "vueinstance"> nect on number：<input type = "text" v-model = "value"> <p>計算結果：{{square}} </p> </div> <script> var v = new vue（{el： '#vueinstance'、data：{value：1}、computed：{square：function（）{return this.value * this.value;}}）; </scrip>以前にメソッドオブジェクトを定義したときと同じように、一連の関数を定義することにより、属性定義値を計算します。たとえば、正方形の方法は変数「正方形」を計算するために使用され、そのメソッドの戻り値は2つのthis.valuesの積です。
次に、計算されたものを使用して、より複雑な例を作成できます。システムは、1〜10以内にランダムに数を取得します。ユーザーは、入力ボックスに1〜10以内に数字をランダムに入力できます。ユーザーの入力がシステムの乱数と一致する場合、ゲームは成功します。そうしないと、失敗します。
<div id = "vueinstance"> 1〜10以内に数値を入力してください：<入力型= "text" v-model = "value"> <p>計算結果：{{resultmsg}} </p> </div> <script> var v = new vue（{el： '#vueinstance'、data：{value：null、randnum：5 //最初の乱数は5}、メソッド：{getrandnum：function（min、max）{return math.floor（math.random（） *（）（） *（max -min + 1） + min;} min;}}}}}} （this.value.randnum = this.getrandnum（1、10）;ポストスクリプト
これまでのところ、あなたは世界で最も単純で最も美しいフレームワークの1つであるVueの基本的な使用を習得することができました。その構造には独自の完全なデザインのアイデアがあり、ますます人気が高まっています。このフレームワークは、開発においてよりスムーズなユーザーエクスペリエンスを提供し、開発効率を効果的に改善するのに十分なほど軽くています。上記の一連の例を挙げましたが、それらをすべて習得しましたか？