vue 創建單文件組件 注冊組件 以及組件的使用

<template>


  <div id="app"> 
    

     <v-home></v-home>



     <hr >

     <br>

     <v-news></v-news>
     
  </div>
</template>

<script>

  /*
  1、引入組件

  2、掛載組件

  3、在模板中使用
  */
   import Home from './components/Home.vue';

   import News from './components/News.vue';

   export default {     
      data () { 
        return {
         
         msg:'你好vue'
        }
      },
      components:{   /*前面的組件名稱不能和html標簽一樣*/
        'v-home':Home,
        'v-news':News
      }
    }
</script>


<style lang="scss">


</style>

<template>
    <!-- 所有的內容要被根節點包含起來 -->
    <div id="home">

            <v-header></v-header>
            <br>
            <hr>

            <h2>這是一個首頁組件--{{msg}}</h2>

            <button @click="run()">執行run方法</button>


    </div>

</template>


<script>
    //引入頭部組件

    import Header from './Header.vue';


    export default{

        data(){

            return {

                msg:'我是一個首頁組件msg'
            }
        },
        methods:{

            run(){

                alert(this.msg);
            }
        },
        components:{

            'v-header':Header
        }

    }

</script>

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red
    }

    
</style>