VUEは、次の3つの方法でグローバルなコンポーネントを作成します

<!DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "https://cdn.bootcss.com/vue/2.6.10/vue.js"> </ SCRIPT>
<リンクのhref = "https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" のrel = "スタイルシート">
<リンクのhref = "https://cdn.bootcss.com/animate.css/3.7.1/animate.css" のrel = "スタイルシート">
</ head>の
<身体>
<DIV ID = "アプリ">
<DIV> {{名前}} </ div>
<私の-COM1> </私の-COM1>
<私の-COM2> </私の-COM2>
</ div>
<テンプレートID = "myCom3">
<div>
<H1>第三の実施形態</ H1>
</ div>
 
</テンプレート>

<スクリプト>
 

Vue.component( 'myCom1' Vue.extend({
テンプレート: '<H3> camelCasing形式注</ H3>'
}))。

Vue.component( 'myCom2'、{
テンプレート: '<H3> Vueの第二の実施形態</ H3>'
});

Vue.component( 'myCom2'、{
テンプレート: '#のmyCom3'
});

{(VM =新しいVueのでした
「#アプリ」
データ:{
name:'小明'

}
});
</ SCRIPT>
 
</ BODY>
</ HTML>

おすすめ

転載: www.cnblogs.com/xiannv/p/10992591.html