第六章 组件 56 组件-组件中的data

 <!DOCTYPE html>
 <html lang="en">

   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible"  content="ie=edge">
     <title>Document</title>
     <!--1.导入Vue的包-->
     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
   </head>

   <body>
       <div id="app">
       <mycom1></mycom1>
       </div>

       <script>
       // 1.组件可以有自己的 data 数据
       // 2.组件的 data 和实例的data 有点不一样，实例中的data 可以为一个对象，但是 组件中的data 必须是一个方法
       //3.组件中 的data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
       //4.组件中的data数据，使用方式，和实例中的data 使用方式完全一样！！！
       Vue.component('mycom1',{
         template:'<h1>这是全局组件---{{msg}}</h1>',
         data:function(){
           return{
             msg:'这是组件中data定义的数据'
           }
         }
       })
           //创建 Vue 实例，得到 ViewModel
           var vm =  new Vue({
               el:'#app',
         data:{
           msg:''
         },
         methods:{}
           });
       </script>
   </body>
 </html>