1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>12</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <mycom></mycom> 11 </div> 12 <script> 13 /** 14 * 1.组件可以有自己的data 数据 15 * 2.组件的data 和实例的data 不一样，实例中的data 可以为一个对象 16 * 而组件中的data 必须是一个方法 17 * 3.组件中的 data除了必须为一个方法之外，这个方法内部还必须返回一个对象 18 * 4.组件中的data 数据使用方式和实例中的data 使用方式完全一样 19 */ 20 Vue.component('mycom',{ 21 template:"<h1>这是全局组件 - - - {{ msg }}</h1>", 22 data:function () { 23 return { 24 msg:'这是组件的data中定义的数据' 25 } 26 } 27 }); 28 const vm = new Vue({ 29 el:'#app', 30 data:{ 31 }, 32 methods:{ 33 } 34 }) 35 </script> 36 </body> 37 </html>