1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <!--1.导入Vue的包--> 10 <script src=" https://cdn.jsdelivr.net/npm/vue"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <mycom1></mycom1> 16 </div> 17 18 <script> 19 // 1.组件可以有自己的 data 数据 20 // 2.组件的 data 和实例的data 有点不一样，实例中的data 可以为一个对象，但是 组件中的data 必须是一个方法 21 //3.组件中 的data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行 22 //4.组件中的data数据，使用方式，和实例中的data 使用方式完全一样！！！ 23 Vue.component('mycom1',{ 24 template:'<h1>这是全局组件---{{msg}}</h1>', 25 data:function(){ 26 return{ 27 msg:'这是组件中data定义的数据' 28 } 29 } 30 }) 31 //创建 Vue 实例，得到 ViewModel 32 var vm = new Vue({ 33 el:'#app', 34 data:{ 35 msg:'' 36 }, 37 methods:{} 38 }); 39 </script> 40 </body> 41 </html>