Vue.jsは、データ駆動型のWebインターフェイスを構築するためのライブラリです。 VUE.JSの目標は、可能な限り単純なAPIを介して応答性のデータバインディングと統合ビューコンポーネントを実装することです。 （これは公式の説明です！）
編集者は、Angularjsを使用したことも、React.jsも使用していません。 3つの違いを詳細に説明することはできません。知りたい場合は、公式の分析があります。表示するにはここをクリックしてください。
編集者は、1年以上フロントエンド開発に従事しています。当初、フロントエンド開発にはあまりにも多くのテクノロジーがありました。編集者は無力で、考慮できませんでした。理解した後、彼はネイティブJSの基本合併とjQueryから学習の学習パスを学ぶことを選択しました。編集者は、ビジネスニーズのためにVue.jsを使用します。 Angularjsを選んでみませんか？実際、jQueryを同時に放棄することはできません。 vue.jsとjqueryは完全に互換性があります。このプロジェクトのため、編集者は長い間残業しており、プロジェクト開発時間の増加を回避するために常に勉強しています。これ以上苦労せずに、編集者のVUE学習の概要をいくつか始めましょう。あなたがうまく書いていないなら、それに慣れないでください。記事を書くことは常に私の弱点でした。 。 。 。
親チェーンとしてのVueの例があります
子コンポーネントに渡すことができます。ルートインスタンスは、this.rootを使用してアクセスできます。親には、これはアレイを持っています。もちろん、プロジェクトでは、当社のコンポーネントには1つまたは2つだけを持つことはできません。コンポーネントが多すぎる場合、子供のコンポーネントの位置を覚えておくことは困難です。 V-REFディレクティブを使用して、コンポーネントのフックを作成できます。このフックは、他のコンポーネントがコンポーネントにアクセスするときのインデックスです。
//これは私のコンポーネントの1つです<MSG V-REF：MSGS> </MSG> // var children = vm。$ refs.msgs //このように子供のコンポーネントにアクセスする// v-refは配列またはオブジェクトであり、これはすべてのREFフックを作成するコンポーネントのコレクションです。
ここでは、写真を見せて、親、子供、$ refsに関連するコンテンツを見てみましょう（写真は少しぼやけているようで、完全なダイナミックな画像ではないようです。恥ずかしいことではっきりと見えません。デモを作成して印刷できます！）
この方法でインスタンス全体でコンポーネントに直接アクセスできますが、子供が親コンポーネントの状態を直接変更することは非常に悪いので、親と子のコンポーネントをしっかりと結合することは非常に悪いためです。理想的には、各コンポーネントは各コンポーネントの範囲が独立しているため、独自の状態のみを変更できます。
この場合、Vueは彼らのカスタムイベントももたらします
$ dispatch（）を使用してイベントを派遣し、イベントは親チェーンに沿って泡立ちます。
$ broadcast（）を使用してイベントをブロードキャストすると、イベントはすべての子孫に送信されます。
少し抽象的に見えます、例で理解する方が簡単です
// $ dispatch（）バブルケース<！ - example-> <div id = "app"> <！ - コンポーネント通信v-model = "msg"> <a href = "javascript :;" @click = "add_data"> add </a> </div> </template> <script> vue.component（ 'msg'、{//構文糖はコンポーネントを直接登録するために使用されます。このイベント、$ dispatch（）メソッドは、親コンポーネントを聴くために親コンポーネントによって作成されます。これ。$ parent.add（par_msg）;この方法は、親コンポーネントを直接操作することです。対応する応答サブコンポーネント 'add_msg'：function（msg）{// add_msgは、サブコンポーネントから通知を受信するために使用される方法ですこのコードを読んだ後、$ dispatch（）の使用法を誰もが知っていると思います。実際、2つのパラメーターがあります。最初のパラメーターは、親コンポーネントが子コンポーネントのイベントオブジェクトのメソッド名に耳を傾けることです。 2つは一貫している必要があります。 2番目のパラメーターは、子コンポーネントによって更新されたデータです。これは、親コンポーネントに同期して更新されるようにデータに渡されます。次に、親コンポーネントはこのパラメーターを使用して、対応する操作を実行します。
// $ broadcast（）メソッドの使用法は、$ dispatch（）の使用法と同じです。違いは、イベントオブジェクトが子コンポーネントに作成され、親コンポーネントにトリガーされる関数が反対にあることです。ここで言いたいのは、子コンポーネントのデータが親コンポーネントのデータに完全に依存している場合、一般的なイベント配信方法を使用する必要がないということです。親コンポーネントのデータをプロップを介して取得し、子コンポーネントにバインドするだけです。
<！ - コンポーネント通信2 $ broadcast（）Method-> <section> <h3>親コンポーネントによって追加されたデータソース：</h3> <div> <label for = ""> id：</label> <div> <div> <div> <input "v-model =" id "> </div> </div> <div> <ラベル=" " v-model = "name"> </div> </div> <div> <label for = ""> host：</label> <div> <input type = "text" v-model = "inst"> </div> </div> <div> <div> <label for = "" for = ""> </label> <div> <a href = "javascript :;" @click = "add_table"> add </a> </div> </div> <h3>次の表は子コンポーネント情報です：</h3> <！ - 親コンポーネントのtable_dataデータを子コンポーネントにバインドします - > <broadcase：data = "table_data"> </broadcase> id = "broadcase"> <div> <table> <thead> <tr> <th> id </th> <th> name </th> <th>趣味</th> </tr> </tbody> <tr v-for = "fist in data"> <td> {{list.id}}}} </td> <td> </td> </td> </td> list.inst}} </td> </tr> </tbody> </table> </div> </template> <script> vue.component（ 'broadcase'、{//これはコンポーネントの登録に使用される構文砂糖であり、シンプルでショートカットテンプレート： '＃broadcase、'＃broadcase ']データをカスタマイズしてください。データがデフォルト値を持っている必要がある場合、データにデータを定義する必要があります。{return {msg： 'abc'}}、これは単なる例です。 vue（{el： '＃app'、data：{table_data：[{id：1、name： 'gjei'、inst： 'gjweir'}、{id：2、name： 'jiuyer'、inst： 'oiuyt'}]}、methods：{add_table：untsable（）{var set（id：adname：bar set = adname：bar：name：add： this.inst}; this.table_data.push（set）; // $ broadcast（ 'test'、set）;ここをクリックして、上記の2つの例をテストできます。ファイルは個人的なスペースにアップロードされていますVue Parent-Child Communicationデモ
私がこれを書き終えたとき、私は振り返って、私が書いたコンテンツが少し乱雑であるように思われたのを見ました、それは本当に恥ずかしかったです！私はずっと前にブログを書いて自分のメモライブラリを構築することを考えましたが、以前にそれを書こうとしたとき、私は本当にそれをすることができませんでした。最近、私はそれをどのように書いても書くことを主張することを決心しました。いつか私の執筆スタイルが突然良くなったらどうでしょう！
実際、アプリケーションはそれほど難しくありません。実際には、対応するAPIインターフェイス監視を提供します。実際のプロジェクトアプリケーションを操作して変更する方法は、自分で作成する必要があります。重要なのは、JSレベルを改善することです。結局のところ、ますます複雑なWebアプリケーションがあります！フロントエンドが好きな学生がJSへの道でお互いを励ますことができることを願っています。