基本的に、公式ウェブサイトのすべてのガイドラインを整理しました：http：//vuejs.org/guide/index.htmlここでは、すべての関連するみをまとめる例としてTodoリストアプリケーションを取ります。この記事のすべてのコードはgithub https://github.com/lihongxun945/vue-todolistにあります
Vueインスタンス
VueアプリケーションはRoot Vueインスタンスブーツによって開始され、Vueインスタンスは次のように作成されます。
var vm = new vue（{// options}）インスタンスは、実際にはMVVMのVMです。着信構成オブジェクトのデータのすべての属性は、インスタンスにマウントされます。競合の命名を回避するために、VUEビルトインメソッドは、$から始まるプロパティでインスタンスに取り付けられます。
インスタンスは、創造から破壊までの次のライフサイクルを経ています。
初期化中、およそ3つのステップ：
•データの監視、つまりデータの監視
•テンプレートのコンパイル
•ドキュメントを挿入するか、対応するDOMを交換します
＃vue Basic構文
データバインディング
VueはMastache構文を使用します。一般的に使用される結合構文は、いくつかのカテゴリに分けられます。
•{{{data}}}などのMastache構文{{data |フィルター}}
•v-bind：href、v-bind：classなどのvバインド結合特性
•v-on：click、v-on：送信などのv-onバインドイベント
その中で、v-*は指令です
例：
<div v-bind：class = "[classa、isb？classb： '']">
属性計算
Vueは、非常に興味深い属性計算構文をサポートしています。属性が他の属性によって計算されることを指定できるため、$ watchを使用して実装する必要はありません。
var vm = new vue（{el： '＃example'、data：{a：1}、computed：{// a computed getter b：function（）{// `this`を指しますvmインスタンスはthis.a + 1}}}}}））））##プロセスコントロールとリストに関連する構文には、 `v-if`、` v-show`、 `v-else`、` v-for`が含まれます。
形状
双方向のデータバインディング：
<input type = "text" v-model = "message" placeholder = "edit me">
<入力型= "チェックボックス" id = "jack" value = "jack" v-model = "checkednames">
##アニメーションの実装方法は、AngularおよびReactの実装方法と同じであり、クラスを追加および削除することで実装されます。 ＃ 成分
コンポーネントの基本的な使用
コンポーネントの定義には2つの部分が含まれています。
1コンポーネントクラスの作成：
var profile = vue.extend（{template： "<div> lily </div>"}）;2 tagnameを登録します：
vue.comPonent（ "me-profile"、profile）;
このようにして、このコンポーネントをTagnameを使用して使用できます。
<div id = "todo"> <my-profile> </my-profile> <form v-on：submit = "add" v-on：submit.prevent> <入力タイプ= "v-model ="入力 "/> <入力タイプ=" submit "value = '/> </form> ... </div>
vue.comPonent（ "me-profile"、profile）;グローバル登録です。特定のページでのみ使用されている場合は、ローカルで登録できます。
var vm = new vue（{el： "#todo"、コンポーネント：{"my-profile"：profile}、...}私たちのVueインスタンスはTODO要素に縛られているため、私のプロファイルがこの要素の外側に配置されている場合、それは無効です。それを中に入れることによってのみ、Vueのこのインスタンスによって初期化されます。
注：
Vueコンストラクターによって渡すことができるパラメーターは、基本的にVue.Extendで使用できますが、ELとデータの2つのパラメーターに注意を払う必要があります。異なるインスタンス間で同じオブジェクトを共有しないようにするために、関数を介して新しいオブジェクトを常に返すことがより信頼性が高くなります。
var mycomponent = vue.extend（{data：function（）{return {a：1}}}）パラメーターは同じであるため、実際には同じものですが、1つはコンポーネントであり、もう1つはVUEを開始するために使用されます。
テンプレートに関するメモ
VueはネイティブDOMであるため、一部のカスタムタグはDOM標準を満たしていない場合があります。たとえば、テーブルでTRをカスタマイズしたい場合、私のコンポーネントを直接挿入しても仕様を満たしていない場合は、次のように記述する必要があります。
<table> <tr is = "my-component"> </tr> </table>
パスデータを渡す小道具
VUEでは、各コンポーネントは独立しており、親クラスのデータに直接アクセスすることはできません。それでは、プロップを通じてデータをサブコンポーネントに渡すReactの方法に非常に似ていますか？
Reactとは異なり、Vueのサブコンポーネントは最初に自分の小道具を宣言する必要があります。
var profile = vue.extend（{props：["name"]、テンプレート： `<h2> {{name}} 's todo list </h2> <h4> {{name}}は良い女の子</h4>`}）;次に、プロファイルを使用するときにこのようなパラメーターを渡すことができます。
<my-profile name = 'lily'> </my-profile>
これは、パラメーターをリテラルに渡すためであるため、合格した値は文字列でなければなりません。別の方法は、パラメーターを動的に渡し、パラメーターをVバインドに渡すことです。双方向でデータをバインドするか、非弦パラメーターを渡すことができます。
<my-profile v-bind：name = 'input'> </my-profile>
v-bindが文字列の場合、それは親コンポーネントのデータの対応するフィールドです。たとえば、上記は両方方向にバインドされる入力の値です。それが数字の場合、それは数に縛られています。
Vueは、一方向または双方向のデータバインディングを明示的に指定することもできます。
<
小道具検証
優れたコンポーネントは、パラメーターが最初に正しいことを常に確認する必要があり、一部のパラメーターのデフォルト値を設定する必要がある場合があります。
varプロファイル= vue.extend（{input：{type：string}}）;親子コンポーネント通信
上記の小道具は、実際には親コンポーネントが子供コンポーネントにメッセージを渡す方法です。
子コンポーネントには、これがあります。ただし、これを避ける必要があります。コンポーネント自体は独立したロジックをカプセル化することであるため、親コンポーネントのデータに直接アクセスすると、コンポーネントのカプセル化が破壊されます。
したがって、親コンポーネントを介して小道具を渡す親コンポーネントを介して、子コンポーネントに通信する必要があります。
もちろん、小道具はコールバックのみを行うことができます。この問題はReactで議論されています。反応の方法は、小道具を使用してコールバック関数を子コンポーネントに渡すことです。実際、私はこのコールバック関数を渡すこの方法が本当に好きではありません。イベントの方法が好きです。 Vue Neutronicsは、イベントを通じて親コンポーネントと通信できます。親コンポーネントにメッセージを送信することは、これを介して行われます。$派遣、および子コンポーネントにメッセージを送信することは、これを使用しています。$ BoardCast。ここでは、メッセージはすべての親と子供に送信されますが、コールバックが実行されると、コールバック関数が明示的にTrueを返さない限り停止します。
前のTODOリストをさまざまなコンポーネントに分割して実装して、双方向のコンポーネントと通信する方法を体験できるようにします。リストとフォームの2つのコンポーネントを分割します。
フォームは、ユーザー入力を処理し、フォームを送信するときに親コンポーネントに追加メッセージを送信する責任があります。コードは次のとおりです。
var form = vue.extend（{props：{username：{type：string、default： "named"}}、data：function（）{input： ""、};}、テンプレート： `<h1> {{username}} 's todo list </h1 <input von：" von： "von：" von：< v-model = "input"/> <input type = "value = 'add'/> </form>`、{add：function（）{this。 "add"、this.input）;リストは、リストを表示し、ユーザーのチェック操作を処理する責任があります。追加メッセージを受信した後、それ自体にエントリが追加されます。
var list = vue.extend（{template： `<ul> <li v-for = 'todo in list'> <label v-bind：class =" {done：done：done} "> <入力タイプ="チェックボックス "v-model =" todo.done "/>> {{{{{todo.title}}} </li> </li>タイプ：array}}、data：function（）{list：[]}}、{add：function（input）{if（！input）return false;次に、これらは2つのコンポーネントであるため、もちろん、スタートアップをブートストラップするにはVUEインスタンスが必要であるため、インスタンスは次のとおりです。
var vm = new vue（{el： "#todo"、コンポーネント：{"todo-form"：form、 "todo-list"：list}、events：{add：function（input）{this。$ broadcast（ "add"、input）;}}}）;実際、フォームとリストは論理的に並列コンポーネントであるため、父と息子の関係がなく、すべてVMの子供であることに注意してください。ここで、VMはフォームメッセージを受信した後、リストに転送します。
HTMLコードはより簡単です：
<div id = "todo"> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> </div>
スロット
スロットを使用して、親コンポーネントからレンダリングされたHTMLを子コンポーネントに挿入できます。これがいつ必要になるかは明確ではなく、これは子供のコンポーネントに侵襲的すぎます。
動的スイッチコンポーネント
この関数は少し冗長に感じます。多くの場合、動的コンポーネントが組み込まれたVUEを使用するのではなく、論理コードを切り替える必要があります。ただし、タブスイッチングと同様の関数を実装することは非常に便利です。
ここでは、TODOリストにAboutページを追加します。したがって、最初にVMをコンポーネントに変更する必要があります。コンポーネントはTODOと呼ばれます。これはTODOページ全体です。
var todo = vue.extend（{template： `<div id =" todo "> <todo-form username = 'lily'> </todo-form> <todo-list> </todo-list> <slot> show </slot> </div>`、components：{"addo-form"：addo-list "："： "：addo-list」 this。$ broadcast（ "add"、input）}}）;実際、変更の最初の行は最初の行です。
次に、Aboutコンポーネントを作成する必要があります。
var arbout = vue.extend（{template： `<div id =" about "> <p> todo list v0.1.0 </p> <p> content bere </p> </div>`}）;次は重要なポイントです。これらの2つのページの切り替えを担当するインスタンスVMを作成したいと考えています。
var vm = new vue（{el： "body"、data：{currentView： "todo"}、コンポーネント：{"todo"：todo、 "about"：about}}）;ここでは、もちろん任意の名前である可能性があるCurrentViewフィールドを定義し、特別なコンポーネントタグを使用してコンポーネントを切り替えます。
<コンポーネント：IS = "currentView"> </component> <ul> <li> <label> <入力タイプ= "ラジオ" name = 'page' value = 'todo' v-model = 'currentView'> home </label> </li> <li> <ラベル> <入力タイプ= "ラジオ" name = 'ページ'値
上記のコードには注意すべきことが2つあります。
•特別なタグコンポーネントを使用して、次のように使用します。
•ラジオは、双方向のバインディングを介してcurrentViewフィールドを変更し、クリック後に切り替えることができます。
データバインディングの実装原則
Vueは、反応性データ結合として翻訳できる双方向結合反応性を呼び出します。 ES5で定義されたゲッターおよびセッターメソッドを介して内部的に実装されるため、IE8および次のブラウザをサポートしません。この実装には、間違いを犯す簡単なことが2つあります。
•データに属性を直接追加および削除する場合、検出することは不可能です。一般に、削除は不可能ですが、動的に追加される場合があります。現時点では、vm。$ set（ "name"、value）を介して追加する必要があります。
•オブジェクト内の変更を検出することはできません。つまり、データのプロパティの変更のみを検出できます。 data.aがオブジェクトである場合、data.ab = 1この変更は検出できません。この場合、新しいオブジェクトを作成し、data.aに割り当てる必要があります。
非同期更新メカニズム
VueのDomへの更新は非同期です！この非同期は非同期キューで実行されますが、この非同期キューは現在のイベントループで実行されます。したがって、データを変更すると、すぐにDOMに移動してクエリ操作を実行することは間違っています。現時点では、DOMはまだ更新されていません。正しい方法はこれを行うことです：
vm.msg = 'new Message' // datavm。$ el.textcontent === 'new message' // falsevue.nexttick（function（）{vm。$ el.textcontent === 'new message' // true}））またはこれ：
vm。$ nexttick（function（）{this。$ el.textcontent === 'new message' // true}）コンポーネントを読むのに長い時間がかかりました。これが別のポイントです：指令
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。