vue.extendとvue.componentの違いと連絡
2764 ワード
ひたすら開発に没頭しているのに、基礎概念に対する理解が足りず、大きな穴だ...公式サイトを調べた後、自分の理解を記録して、後日復習して強固にするために使います.
Vue.extend({})簡単な説明:vueを使用する.extendは、サブクラスコンストラクタ、すなわち、予め設定された部分オプションのvueインスタンスコンストラクタを返します.
後でvueを使用できます.componentをインスタンス化するか、new extendName().$を使用します.mount('el)方式でインスタンス化(シミュレーションコンポーネントを実現)する.
Vue.component({})简述:あまり绍介しません...グローバルコンポーネントの生成
次の操作を行います.
1,Vue.componentはVueを使用します.extendによって生成されるコンストラクション関数:
2.構成関数をインスタンス化してコンポーネントをシミュレートします.
完全なコード:
何か間違いがあったら、指摘してください...
詳細については、
【猿2048】www.mk 2048.com
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