vue構築単一ページアプリケーション4

コンポーネント

コンポーネントはすべて/src/components/下

コンポーネントは大文字の先頭、アルパカの命名法を推奨し、接尾辞名は.vue

一般的なコンポーネント定義は以下の通り

//     
export default {
  name: 'HomePage', //     name            
}

ルートコンポーネントに他のコンポーネントを手動でマウントする

参照コンポーネント、script中import from './components/ .vue';

コンポーネント登録、script中components: { // }

テンプレートにラベルを使用してマウント >

すべてのコンポーネントのテンプレートには、他のコンテンツをパッケージするルート要素が必要です.(はっきり言えば最大のdiv)
ライフサイクル関数の簡単な説明

前のコードで使用したことがあるmounted()関数とは、コンポーネントがマウントされて自動的に呼び出されるライフサイクル関数であり、ライフサイクル関数の1つであり、初回以外にもbeforeMount()・、beforeCreated、created()など多くのライフサイクル関数があり、いずれも、コンポーネントがインスタンス化および実行中にあるフェーズ(ある時点)で自動的に呼び出される関数です.

//         
beforeCreate() {
    console.log('      ');
},
created() {
    console.log('      ');
},
beforeMount() {
    console.log('      ');
},
mounted() {
    console.log('      ');
},
beforeDestroy() {
    console.log('      '); //                                    
},
destroyed() {
    console.log('      ');
}

・v-if=" "ブール値を変更してマウント/アンインストールを実現できる.

#   

   /    

#         flag         。