1  <div id='demo'>
 2         <!-- 使用组件 -->
 3         <my-school></my-school>
 4         <hello></hello>
 5 </div>
 6     <script src="../js/vue.js"></script>
 7     <script>
 8         /*  
 9         几个注意点：   
10               1.关于组件名：
11                 一个单词组成：
12                     第一种写法(首字母小写):school
13                     第二种写法(首字母大写):School
14                 多个单词组成：
15                     第一种写法(kebab-case命名):"my-school"
16                     第二种写法(CamelCase命名):MySchool(需要在Vue脚手架环境下)
17                  备注：
18                     (1).组件名尽可能回避HTML已有的元素，比如div head等都不能使用
19                     (2).可以使用name配置项指定组件在开发者工具中呈现的名字
20               2.关于组件标签：
21                 第一种写法：<school></school>
22                 第二种写法：<school/>    (脚手架环境下使用)
23               3.创建组件简写方式：
24                 可以不写Vue.extedn() ,  直接写配置项
25                 const school =Vue.extend(options) === const school = options  
26         */
27         //阻止启动时的提示
28         Vue.config.productionTip = false;
29         //定义组件 school
30         const school = Vue.extend({
31             name: "xuexiao", //vue开发工具中呈现
32             template: `
33                 <div>
34                     <p>名字：{{name}}</p>
35                     <p>年龄：{{age}}</p>
36                 </div>
37             `,
38             data() {
39                 return {
40                     name: "陈冠希",
41                     age: 19
42                 }
43             }
44         })
45         // 定义组件 hello
46         const hello = {
47             template: `
48                 <div>
49                     <p>你好,{{result}}</p>
50                 </div>
51             `,
52             data() {
53                 return {
54                     result: "Vue"
55                 }
56             }
57         }
58         new Vue({
59             el: '#demo',
60             data: {
61                 message: 'Hello Vue！'
62             },
63             //注册组件
64             components: {
65                 "my-school": school,
66                 hello
67             }
68         })
69     </script>