記事ディレクトリ
1. モジュールとコンポーネント、モジュール化とコンポーネント化
1.1. モジュール
- 理解する: 特定の機能を外部に提供するjsプログラム、通常は js ファイル
- 理由: js ファイルが多く、複雑です。
- 機能：jsの再利用、jsの記述の簡素化、jsの動作効率の向上
1.2. コンポーネント
- 理解する：局所的な（特定の）機能効果を達成するために使用されるコードのコレクション(html/css/js/image……)
- 理由: インターフェースの機能は複雑です
- 機能: コーディングの再利用、プロジェクトのコーディングの簡素化、業務効率の向上
1.3. モジュール性
アプリケーション内の js がモジュールで記述されている場合、そのアプリケーションはモジュール型アプリケーションです。
1.4. コンポーネント化
アプリケーション内の関数がマルチコンポーネント方式で記述されている場合、アプリケーションはコンポーネント化されたアプリケーションです。
2. 単一ファイル以外のコンポーネント
2.1基本的な使い方
1. Vue でコンポーネントを使用するための 3 つの主な手順:
- コンポーネントを定義する（コンポーネントを作成する）
- レジスタコンポーネント
- コンポーネントを使用する (コンポーネントタグを記述する)
2. コンポーネントを定義するにはどうすればよいですか?
Vue.extend(options) を使用して作成されたオプションは、new Vue(options) のときに渡されるオプションとほぼ同じですが、いくつかの違いがあり、違いは次のとおりです
。
- エルと書かないでください、なぜですか？——— 最終的には、すべてのコンポーネントは vm によって管理される必要があり、vm 内の el によってどのコンテナーを提供するかが決まります。
- データは関数として記述する必要がありますが、なぜですか? ———— コンポーネントを再利用する場合は、データ参照関係を避けてください。
注: コンポーネント構造を構成するには、テンプレートを使用します。
3. コンポーネントを登録するにはどうすればよいですか?
- 部分登録: 新しい Vue に依存する場合はコンポーネント オプションを渡します
- グローバル登録: Vue.component('コンポーネント名', コンポーネント) に依存します。
4. コンポーネントタグを記述します。
<school></school>
コード：
<body>
<!-- 准备好一个容器-->
<div id="root">
<h1>{
{msg}}</h1>
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义组件
const s = Vue.extend({
name:'atguigu',
template:`
<div>
<h2>学校名称：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue!'
},
components:{
school:s
}
})
</script>
2.2 いくつかの注意点:
- コンポーネント名について:
- 1 つの単語は次の内容で構成されます。
- 最初の書き方（最初の文字が小文字）：学校
- 2 番目の書き方 (最初の文字が大文字): School
- 複数の単語で構成されています:
- 最初の書き方（ケバブケースのネーミング）：my-school
- 2 番目の書き方 (CamelCase 命名): MySchool (Vue スキャフォールディングのサポートが必要)
- 述べる：
- (1). コンポーネント名は、h2 や H2 など、HTML 内の既存の要素名をできるだけ避ける必要があります。
- (2). 名前設定項目を使用して、開発者ツールに表示されるコンポーネントの名前を指定できます。
- コンポーネントタグについて:
- 最初の書き方:
<school></school> - 2 番目の書き方:
<school/> - 注: スキャフォールディングが使用されない場合、後続のコンポーネントはレンダリングされません。
- 簡略化した方法:
const school = Vue.extend(options) は次のように省略できます: const school = options
2.3 コンポーネントのネスト
<body>
<!-- 准备好一个容器-->
<div id="root">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//定义student组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名：{
{name}}</h2>
<h2>学生年龄：{
{age}}</h2>
</div>
`,
data(){
return {
name:'尚硅谷',
age:18
}
}
})
//定义school组件
const school = Vue.extend({
name:'school',
template:`
<div>
<h2>学校名称：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
<student></student>
</div>
`,
data(){
return {
name:'尚硅谷',
address:'北京'
}
},
//注册组件（局部）
components:{
student
}
})
//定义hello组件
const hello = Vue.extend({
template:`<h1>{
{msg}}</h1>`,
data(){
return {
msg:'欢迎来到尚硅谷学习！'
}
}
})
//定义app组件
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school,
hello
}
})
//创建vm
new Vue({
template:'<app></app>',
el:'#root',
//注册组件（局部）
components:{
app}
})
</script>
2.4Vueコンポーネント
- School コンポーネントの本質は VueComponent と呼ばれるコンストラクターです。これはプログラマーによって定義されるのではなく、Vue.extend によって生成されます。
<school/>または を書くだけで済みます<school></school>。解析時に Vue が学校コンポーネントのインスタンス オブジェクトを作成するのに役立ちます。つまり、Vue は次の実行を支援しますnew VueComponent(options)。- 特記事項: Vue.extend が呼び出されるたびに、まったく新しい VueComponent が返されます。！！！
- この指摘について:
(1). コンポーネント構成では、
データ関数、メソッド内の関数、ウォッチ内の関数、および計算された関数の this はすべて [VueComponent インスタンス オブジェクト] です。
(2).新しい Vue(オプション) 設定:
データ関数、メソッド内の関数、ウォッチ内の関数、計算された関数、これらはすべて [Vue インスタンス オブジェクト] です。 - VueComponent のインスタンス オブジェクト。以下、vc と呼びます(コンポーネント インスタンス オブジェクトとも呼ばれます)。以降、
Vue のインスタンス オブジェクトをvm と呼びます。
2.5 単一ファイルのコンポーネント
1. .vue ファイルの構成 (3 つの部分)
(1) テンプレート ページ:<template>ページ テンプレート</template>
(2) JS モジュール オブジェクト:
<script>
export default {
data() {
return {
}},
methods: {
},
computed: {
},
components: {
}
}
</script>
(3) スタイル<style>：スタイル定義</style>
2. 基本的な使い方
(1) コンポーネントの導入
(2) ラベルへのマッピング
(3) コンポーネントラベルの使用