AngularJSのようなフロントエンドフレームワークは、強力なシングルページアプリケーションを開発するのに非常に便利です。ただし、Angularのような大きなフレームワークが私たちのプロジェクトには大きすぎる場合があり、多くの機能は使用されない場合があります。この時点で、それを使用する必要性を評価する必要があります。単純なWebページにいくつかの機能を追加するだけである場合、Angularの使用は面倒すぎ、必要なインストール、構成、書き込み、コントローラーの設計などはあまりにも面倒に思えます。
現時点では、より軽量のソリューションが必要です。 Vue.jsは良い選択です。 Vue.jsは、ビューモデル（ViewModal）に焦点を当てたフレームワークです。ビューモデルは、UIとデータモデルの間のデータ通信のためのブリッジであり、UIとデータモデルの間の双方向のデータ結合を実現します。 「完全なフレームワーク」ではなく、ビューレイヤーに焦点を当てたシンプルで柔軟なフレームワークです。
次に、簡単なメモアプリケーションを使用して、vue.jsの基本について学びます。 Vue.js自体に全員にもっと注意を払うために、ローカルデータに基づいてクライアントアプリケーションを設計しました。この記事の最後に、vue.jsとバックエンドの間の相互作用について言及します。
準備
最初にnpmを介してvue.jsとブートストラップを取得しましょう（必要ではありません。スタイルライブラリを適用するためです）。コマンドラインに以下を入力します。
NPMインストールVUEブートストラップ
次に、2つのファイルを作成します。
index.html app.jsをタッチします
また、次のコンテンツをindex.htmlに追加します
<！ - index.html - > <！Doctype HTML> <HTML> <head> <Meta charset = "utf-8"> <title> vue </title> <！ - css-> <link rel = "styleSheet" href = "node_modules/boottrap/dist/css/boottrap.min.ナビゲーションバー - > <Nav> <div> <a> <i> </i> vueメモ</a> </div> </nav> <！ - アプリケーションの主要部分 - > <div id = "events"> <！ - formを追加 - > <div> <h3>イベントを追加</h3> </divo <div> </div> </div> </div> <！ - js-> <script src = "node_modules/vue/dist/vue.js"> </script> <script src = "app.js"> </scrip> </body> </html>
ID「イベント」を備えた<div>タグは、このアプリケーションの中核部分です。その後、このコアパーツのVUEインスタンスを作成します。
Vueインスタンスを作成します
まず、Vueインスタンスを作成し、このインスタンスの「EL」属性を「#Events」に設定しましょう。このようにして、インスタンスはID「イベント」を備えたコンテナにバインドされます。
// app.jsnew vue（{// and container binding el with id "events"： '#events'}）;この時点で、Vueの機能はDiv＃イベントで有効になります。他のコンテンツを追加する前に、作成されたVueインスタンスに必要なプロパティを追加しましょう。
// app.js new vue（{// "events"のIDを使用したコンテナバインドEL： '#Events'、//データ属性で、Webページと相互作用するデータを定義します。 {}}）;データ属性は、アプリケーションのビューモデル内のすべてのデータを宣言するオブジェクトです。
Ready属性は、アプリケーションのロード時に実行される関数です。通常、アプリケーションで必要なデータを初期化するために、他のメソッドがここで呼び出されます。
メソッドメソッドは、このアプリケーションで使用する必要がある方法を定義します
フォームにコンテンツを追加します
メモの詳細をフォームに入力する必要があります。 HTML5のネイティブタイムセレクターを使用して、メモコンテンツの時間を設定しました。 （この関数はFirefoxブラウザには適用できないことに注意してください。ChromeまたはSafariを使用することをお勧めします）
<div> <入力プレースホルダー= "event name" v-model = "event.name"> </div> <div> <div> <div> <div> <div> <div> <textarea placeholder = "event description" v-model = "event.description"> </textarea> </div> <入力タイプ= "date" placeholder = "date" v-model = "event.date"> </<> <> <ボタン@click = "addevent">送信</button> </div>
入力タグとTextareaタグに「V-Model」ディレクティブを追加しました。 Angularの「Ng-Model」と同様に、このVモデルの値は、ビューモデルのこのタグに結合したデータを指定します。このデータは、ここだけでなく、コンテナの他の場所でも利用できます。
送信ボタンに「@Click」命令を追加しました。この命令は略され、フルネームは「v-on：click」でなければなりません。その機能は、クリックイベントのリスナーをこのボタンにバインドすることです。クリックイベントがトリガーされると、 @click命令のリスナー関数が実行されます。この例では、AddEvent関数を送信ボタンにバインドします。また、他のイベントをバインドすることもできます。書き込みルールは@event name = "リスニング機能"です。リスナー関数fをキーダウンイベントにバインドしたい場合は、これを書くことができます： @keydown = "f"またはv-on：keydown = "f"
この時点で、Webページをプレビューすると、次のコンテンツが表示されます。
データを追加します
以前にAddEventメソッドについて言及しました。これは、新しいメモデータを追加するために使用されます。
次に、この方法を定義し、必要なデータを追加します
// app.js ... data：{event：{name： ''、description： ''、date： ''}、// ready属性の関数は、アプリケーションの読み込みがあるときに実行されます：{//アプリケーションが読み込まれると、データを初期化する必要があります。データFECKEVENTSを取得する方法を定義します：function（）{var events = [{id：1、name： 'Meeting' 'in a 21st Floor Conference Room'の午前9時、日付： '2015-09-10'}、{id：2、name： 'Shopping'、description： 'buy a power bank'、 'buy' buy '' decrid： 'by：' Id： 'Id： VUEのチュートリアル '、日付：' 2016-03-11 '}]; // $ setは、VUEが配列に挿入するためのメソッドです。ビューは、これを実行するときに更新されます。$ set（ 'events'、events）; }、//イベントAddEventの配列にデータを挿入：function（）{if（this.event.name）{this.events.push（this.event）; this.event = {name： ''、description： ''、date： ''}; }}}データプロパティでは、イベントオブジェクトとイベントアレイを定義し、それぞれイベントとイベントアレイを表します。このデータは、アプリケーションのロード時にロードされます。事前定義されたイベントオブジェクトがない場合、後続の関数を実装できますが、ブラウザはこのエラーを報告します。
それらは、アプリケーションで使用するデータがデータ属性で宣言されていない場合、アプリケーションのパフォーマンスが影響を受けることを意味します。したがって、アプリケーションで使用するデータは、データ属性で最もよく宣言されます。
Readyプロパティでは、データを取得するFetchEventsメソッドを定義します。この方法では、VM。$ setメソッドを介してビューにデータを追加します。その機能は、配列のプッシュ方法に似ており、ビューも再表示します。このメソッドのパラメーターは、着信データを表す文字列キーパスでなければなりません。特定の使用法については、こちらを参照してください。
最後に、メソッドプロパティでは、addEventsメソッドを定義して、event.nameの値が存在するかどうかを確認し、その場合はイベントアレイにイベントを追加します。その後、イベントオブジェクトのデータがクリアされ、フォームもクリアされます。
アイテムのリストを追加します
私たちはすべてのものをリストするために物のリストを使用します：
<div> <a href = "＃" v-for = "event in events"> <h4> <i> </i> {{event.name}} </h4> <h5> <i v-if = "event.date"> </i> {{event.date}}}} </h5> }} </p> <button @click = "deleteevent（$ index）"> delete </button> </a> </div>v-forディレクティブを使用して、同じDOM構造と異なるディスプレイコンテンツを持つ要素をバッチレンダリングします。この例では、タグにV-forディレクティブを追加します。タグは、イベントアレイ内のデータを通過し、各トラバーサルデータをイベントで表します。 v-forディレクティブが追加された要素は、子要素の各トラバーサルの結果を適用し、それらを繰り返し表示します。テンプレートエンジン、React、またはAngularを使用した友人は、同様の使用に精通している場合があります。この例では、H4、H5、P、およびボタンタグの内容が繰り返し表示され、ループの数はイベントアレイの長さです。 V-For指令要素を持つ子供はテンプレートと呼ばれ、テンプレート内のデータは二重ブレースに包まれています。この例では、データはイベントオブジェクトのさまざまなプロパティ（名前、日付、および説明）です。
テンプレートの要素の一部がV-IFディレクティブを追加していることに気付くでしょう。この命令は、条件付きレンダリングとして機能します。 V-IFの値は判断条件です。結果が真である場合、要素はレンダリングされます。そうしないと、レンダリングされません。さらに、ボタン要素にクリック命令を追加し、問題を削除するためにdeleteeVentメソッドを呼び出しました（特定の定義を以下に示します）。パラメーター$インデックスは、アレイ内の現在移動されている要素の数を表します。
ページを更新すると、すべてのアイテムがページの右側にリストされることがわかります。左側のフォームでコンテンツを入力して[送信]ボタンをクリックした後、新しいアイテムが右側のリストに自動的に追加されます。
deleteeventメソッドを定義しましょう
deleteevent：function（index）{if（confism（ "このイベントを削除することは確かですか？"））{// $削除は、splice this.events。$ remove（index）と同様のvue便利な方法です。 }}この方法では、最初にユーザーにアイテムを削除するかどうかを尋ねます。 「OK」をクリックすると、事前定義された$削除方法を介してアイテムがDOMから削除されます。
バックエンドとの相互作用
Angularと同様に、Vueのフロントエンドとバックエンドは分離されており、バックエンドとの相互作用はHTTPリクエストによって完了します。多くのインタラクティブなツールがあります。おなじみの$ .AJAX、ネイティブXMLHTTPREQUESTオブジェクト、またはその他のサードパーティライブラリを使用したり、Vue-Resourceを試したりできます。
Vue-Resourceの簡単な紹介です。 Vue-Resourceは、HTTPリクエストを送信するためにVUE専用に設計されたプラグインです。 PromiseとURIテンプレートをサポートし、インターセプターなどのツールも提供します。上記の例を見てみましょう。問題の取得をサーバーから取得することに変更します。現時点では、FetchEventsメソッドを変更する必要があります。
fetchevents：function（）{this。$ http.get（ 'api/events'）。then（function（events）{this。$ set（ 'events'、events）;}）。取得が成功した場合、then functionのステートメントが実行され、$ setメソッドは引き続き呼び出されますが、入力パラメーターイベントはサーバーから取得されます。
AddEventを変更する場合、POSTリクエストを送信する必要があります。
addEvent：function（）{this。$ http.post（ 'api/events'、this.event）.then（response）{this.events.push（this.event）; console.log（ "event add！"）;}）catch（function（error）{console.log（error）;}）;};};}同様に、問題を削除する方法は、次のように変更できます。
deleteeVent：function（index）{this。$ http.delete（ 'api/events/' + event.id）.then（function（response）{this.events。$ remove（index）;}）.catch（function（error）{console.log（error）;}）;}}ここで、問題のIDをサーバーに渡して、サーバーに問題のIDを削除するようにサーバーに指示し、サーバーが削除する問題を決定するように容易にします。
結論
AngularとReactを使用した友人は、そのVueとそれらがすべて似ていることに気付くでしょう：Angular、Modular Processingに類似した指示は反応に似ています。しかし、Vueは明らかにそれらとは異なります。軽くて使いやすいです。 Angularのような複雑な構成を作成する必要はなく、新しい仮想DOM、JSXなどの新しい概念をReactのような新しい概念を学ぶ必要もありません。したがって、アプリケーションがそれほど大きくない場合は、VUEをアプリケーションフレームワークとして使用することを検討することもできます。
上記は、編集者が紹介したvue.jsのクイック紹介チュートリアルです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！