8.インスタンス・オプションのプロパティ


板橋隊長張基孝のVuejs入門基礎授業を聞いて、内容を整理しました.
毎日20分ちょっとVuejs頑張れ.
IDE: Visual Studio Code
クロムビュー開発者ツール:Vue.js devtools

前回のレッスンでは、ビューインスタンスジェネレータ関数でelプロパティを使用しました。


new Vue()を使用してビューインスタンスを作成する人について学習しました.
new Vue();

コンストラクション関数の利点


インスタンスを作成すると、オブジェクトに関連付けられた定義済み属性とメソッドに直接アクセスできます.
ビューインスタンスを作成しながらオブジェクトの機能とプロパティを作成します.

el属性値appは、app idを有するdivタグ要素を表す.

インスタンス・オプションのプロパティ


いくつかのインスタンスで使用可能なプロパティとAPIを見てみましょう.
重要なのは、インスタンスのオプションをKey Valueペアとして定義することです.
new Vue({
  el: ,
  data: ,
  methods: ,
  created: ,
  watch: ,
});
  • el:HTMLタグ識別子id
  • データ:アクティブ変更データに基づく属性
  • 方法:制御画面論理を定義する方法
  • 作成
  • :プロパティ
  • 、ビューインスタンスの作成時に実行する論理を定義
  • watch:インスタンス内の式または関数を監視する方法
  • 複数のプロパティとメソッドをカンマで区切ることができます.
    Vue.js API公式ドキュメント:Vueグローバル設定を持つオブジェクト

    データとメソッド


    optionという名前のオブジェクトを作成します.
    var option = {}
    elプロパティ、データプロパティ、メソッドを追加します.
    var option = {
            el: '#app',
            data: {
    
            },
            methods:{
    
            }
    }
    new Vue()ビューインスタンスに上記のプロパティとメソッドを持たせます.
    var option = {
            el: '#app',
            data: {
    
            },
            methods:{
    
            }
    }
    
    var vm = new Vue(option);  // 이렇게 할당 할 수 있다. 

    ビューインスタンスのプロパティとメソッドを入力します。


    オブジェクトの名前を省略し、属性やオプションを加えると簡潔になります.
    ビューインスタンスジェネレータにオブジェクトを含めることができます.
    var vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods:{
    
            }
    })
    次のレッスンでは、コンポーネントを学習します.