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>