コンストラクタ
各vue.jsアプリケーションは、コンストラクターVUEを介してVueのルートインスタンスを作成することから始まります。
var vm = new vue（{// options}）VUEインスタンスは、実際にはMVVMモードで説明されているViewModelです。そのため、変数名VMはドキュメントでよく使用されます。
VUEをインスタンス化する場合、データ、テンプレート、マウント要素、メソッド、ライフサイクルフックなどのオプションを含めることができるオプションオブジェクトを渡す必要があります。すべてのオプションはAPIドキュメントで表示できます。
VUEコンストラクターを拡張して、事前定義されたオプションを備えた再利用可能なコンポーネントコンストラクターを作成できます。
var mycomponent = vue.extend（{//拡張子オプション}）//すべての `myComponent`インスタンスは、事前定義された拡張機能オプションで作成されますvar mycomponentinstance = new myComponent（）拡張インスタンスは命令的に作成できますが、ほとんどの場合、コンポーネントコンストラクターはカスタム要素として登録され、テンプレートで宣言的に使用されます。後でコンポーネントシステムを詳細に説明します。これで、すべてのvue.jsコンポーネントが実際に拡張されたVueインスタンスであることを知る必要があります。
プロパティと方法
各Vueインスタンスは、データオブジェクトのすべてのプロパティをプロキシにします。
var data = {a：1} var vm = new vue（{data：data}）vm.a === data.a //-> true //プロパティの設定も、元のデータに影響しますvm.a = 2data.a //-> 2 // ...これらのプロキシ属性のみが応答することに注意してください。インスタンスの作成後に新しいプロパティがインスタンスに追加された場合、ビューの更新をトリガーしません。後で応答システムについて詳しく説明します。
これらのデータ属性に加えて、Vueインスタンスはいくつかの有用なインスタンス属性とメソッドを公開します。これらのプロパティとメソッドには、プロキシのデータ属性と区別するためのプレフィックス$があります。例えば：
var data = {a：1} var vm = new vue（{el： '＃example'、data：data：data}）vm。$ data ==== truevm。$ el === document.getelementbyid（ 'example'）//-> true // $ watchはインスタンスメソッドVm。変更された}）APIドキュメントを参照して、すべてのインスタンスのプロパティとメソッドを表示します。
インスタンスライフサイクル
VUEインスタンスには、作成されたときの一連の初期化ステップがあります。たとえば、データ観察の確立、テンプレートのコンパイル、必要なデータバインディングの作成が必要です。その過程で、いくつかのライフサイクルフックを呼び出し、カスタムロジックの実行機会を提供します。たとえば、インスタンスが作成された後に作成されたフックが呼び出されます。
var vm = new vue（{data：{a：1}、created：function（）{// `this`をVMインスタンスconsole.log（ 'a is：' + this.a）}}）//->" a is：1 "コンパイルされた、準備が整った、破壊されたなど、インスタンスライフサイクルのさまざまな段階で呼ばれる他のフックもあります。このフックは、それを呼ぶVueインスタンスを指しています。一部のユーザーは、vue.jsが「コントローラー」の概念を持っているかどうかを尋ねるかもしれません。答えは、いいえです。コンポーネントのカスタムロジックは、これらのフックに分割できます。
ライフサイクル図
次の図は、インスタンスのライフサイクルを示しています。すぐにすべてを理解する必要はありませんが、将来的には役立ちます。
この記事は、「vue.jsフロントエンドコンポーネント学習チュートリアル」にまとめられており、誰もが学習して読むことを歓迎します。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。