vue.extendとvue.componentの違いと連絡

2764 ワード

ひたすら開発に没頭しているのに、基礎概念に対する理解が足りず、大きな穴だ...公式サイトを調べた後、自分の理解を記録して、後日復習して強固にするために使います.
Vue.extend({})簡単な説明:vueを使用する.extendは、サブクラスコンストラクタ、すなわち、予め設定された部分オプションのvueインスタンスコンストラクタを返します.
後でvueを使用できます.componentをインスタンス化するか、new extendName().$を使用します.mount('el)方式でインスタンス化(シミュレーションコンポーネントを実現)する.
1   let Footer = Vuew.extend({
2     data(){
3       return {
4         footerName:'I CAN DO IT...'
5       }
6     },
7     template:'
{{footerName}}
' 8 });

 Vue.component({})简述:あまり绍介しません...グローバルコンポーネントの生成
次の操作を行います.
  1,Vue.componentはVueを使用します.extendによって生成されるコンストラクション関数:
 Vue.component('footer-view',Footer);

2.構成関数をインスタンス化してコンポーネントをシミュレートします.
new Footer({
    data:{
      '...':''
    }
  }).$mount('my-footer')

完全なコード:

<span style="color: #000000">
  let Footer </span>=<span style="color: #000000"> Vuew.extend({
    data(){
      </span><span style="color: #0000ff">return</span><span style="color: #000000"> {
        footerName:</span>'I CAN DO IT...'<span style="color: #000000">
      }
    },
    template:</span>'<div>{{footerName}}</div>'<span style="color: #000000">
  });
  Vue.component(</span>'footer-view'<span style="color: #000000">,Footer);
  </span><span style="color: #008000">//</span><span style="color: #008000"> new Footer({</span>
  <span style="color: #008000">//</span><span style="color: #008000">   data:{</span>
  <span style="color: #008000">//</span><span style="color: #008000">     '...':''</span>
  <span style="color: #008000">//</span><span style="color: #008000">   }</span>
  <span style="color: #008000">//</span><span style="color: #008000"> }).$mount('my-footer')</span>

何か間違いがあったら、指摘してください...
詳細については、
【猿2048】www.mk 2048.com