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>